《锋利的jQuery》打造个性网站整合
浏览数：27 /
时间：2015年06月09日
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、产品详细页面效果（放大镜，遮罩，选项卡，评分等）
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
