- 搜索框文字效果
- 网页换肤
- 导航效果
- 广告效果
- 添加超链接提示
- 产品横向滚动效果
- 光标滑动列表效果
- 产品详细页面效果（放大镜，遮罩，选项卡，评分等）
1、搜索框文字效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/zgy.css">
<style>
.inputSearch{ width: 160px; height: 30px; line-height: 30px; border:1px solid #dcdcdc;}
.focus{border:1px solid #ff4136;}
</style>
</head>
<body>
<div class="fz">
<input type="text" value="请输入内容" class="inputSearch" id="inputSearch">
</div>
</body>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
// 注意：同placeholder=""效果，该属性是html5特性
$(function(){
$("#inputSearch").focus(function(){
$(this).addClass("focus");
if($(this).val()==this.defaultValue){
$(this).val("");
}
}).blur(function(){
$(this).removeClass("focus");
if($(this).val()==""){
$(this).val(this.defaultValue);
}
}).keyup(function(e){
if(e.which==13){
alert("回车提交表单");
}
})
});
</script>
</html>
2、网页换肤
参考《锋利的jQuery》jQuery对表格的操作（选项卡/换肤）
3、导航效果
注意几点：
1、导航的层一般位于页面的最顶端。so，注意添加li的relative的z-index值，防止不必要的被覆盖。
2、善用text-indent: 12px;
3、善用border: 1px solid #dcdcdc; border-width: 0 1px 1px;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/zgy.css">
<style>
.nav { width: 100%; line-height: 37px; background-color: #4a4a4a; }
/*为li添加z-index的，避免被下面的定位覆盖*/
.nav li { margin-right: 15px; position: relative; float: left; z-index: 2; }
.nav li a { padding: 0 10px; display: inline-block; color: #fff; }
.nav li a:hover { text-decoration: underline; }
.subItem { display: none; }
.subItem { width: 450px; position: absolute; top: 37px; left: 0px; z-index: 1; border: 1px solid #dcdcdc; border-width: 0 1px 1px; }
.subItem dt { text-indent: 12px; }
.subItem dd a { color: #333; }
</style>
</head>
<body>
<div class="fz">
<ul class="nav fix" id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">品牌</a>
<div class="subItem">
<dl>
<dt class="fz14 b">品牌</dt>
<dd>
<em><a href="#nogo">耐克</a></em>
<em><a href="#nogo">阿迪达斯</a></em>
<em><a href="#nogo">达芙妮</a></em>
<em><a href="#nogo">李宁</a></em>
<em><a href="#nogo">安踏</a></em>
<em><a href="#nogo">奥康</a></em>
<em><a href="#nogo">骆驼</a></em>
<em><a href="#nogo">特步</a></em>
<em><a href="#nogo">耐克</a></em>
<em><a href="#nogo">阿迪达斯</a></em>
<em><a href="#nogo">达芙妮</a></em>
<em><a href="#nogo">李宁</a></em>
</dd>
</dl>
</div>
</li>
<li><a href="#">女装</a>
<div class="subItem">
<dl>
<dt class="fz14 b">品牌</dt>
<dd>
<em><a href="#nogo">耐克</a></em>
<em><a href="#nogo">阿迪达斯</a></em>
<em><a href="#nogo">达芙妮</a></em>
<em><a href="#nogo">李宁</a></em>
<em><a href="#nogo">安踏</a></em>
<em><a href="#nogo">奥康</a></em>
<em><a href="#nogo">骆驼</a></em>
<em><a href="#nogo">特步</a></em>
<em><a href="#nogo">耐克</a></em>
<em><a href="#nogo">阿迪达斯</a></em>
<em><a href="#nogo">达芙妮</a></em>
<em><a href="#nogo">李宁</a></em>
</dd>
</dl>
</div>
</li>
<li><a href="#">男装</a>
<div class="subItem">
<dl>
<dt class="fz14 b">品牌</dt>
<dd>
<em><a href="#nogo">耐克</a></em>
<em><a href="#nogo">阿迪达斯</a></em>
<em><a href="#nogo">达芙妮</a></em>
<em><a href="#nogo">李宁</a></em>
<em><a href="#nogo">安踏</a></em>
<em><a href="#nogo">奥康</a></em>
<em><a href="#nogo">骆驼</a></em>
<em><a href="#nogo">特步</a></em>
<em><a href="#nogo">耐克</a></em>
<em><a href="#nogo">阿迪达斯</a></em>
<em><a href="#nogo">达芙妮</a></em>
<em><a href="#nogo">李宁</a></em>
</dd>
</dl>
</div>
</li>
<li><a href="#">鞋包配饰</a></li>
</ul>
</div>
</body>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
$(function () {
$("#nav li").hover(function () {
$(this).find(".subItem").show();
}, function () {
$(this).find(".subItem").hide();
})
})
</script>
</html>
4、广告效果
5、添加超链接提示
6、产品横向滚动效果
7、光标滑动列表效果
8、产品详细页面效果（放大镜，遮罩，选项卡，评分等）
时间： 2024-08-03 01:42:27