1. 搜索框文字效果
  2. 网页换肤
  3. 导航效果
  4. 广告效果
  5. 添加超链接提示
  6. 产品横向滚动效果
  7. 光标滑动列表效果
  8. 产品详细页面效果（放大镜，遮罩，选项卡，评分等）

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;

4、衍生点击效果代码

if($element.is(":visible")){
                $element.hide();
            }else{
                $element.show();
            }

<!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、广告效果

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" type="text/css" href="css/zgy.css">

    <style>

        .scrollDiv { width: 550px; height: 320px; position: relative; overflow: hidden; font-family: Verdana, Arial, Helvetica, sans-serif; }

        .scrollDiv div { position: absolute; bottom: 0; z-index: 1; }

        .scrollDiv div a { float: left; display: inline-block; height: 32px; width: 79px; margin-right: 1px; padding: 5px 15px; text-align: center; color: #fff; background-color: #444444; }

        .scrollDiv div a em { width: 79px; height: 16px; overflow: hidden; display: block; }

        .scrollDiv .last { width: 80px; margin-right: 0; }

        .scrollDiv a.chos { background: url(images/ads/adindex.gif) no-repeat center 39px #37A7D7; }

    </style>

</head>

<body>

<div class="fz p10">

    <div class="scrollDiv" id="scrollDiv">

        <a href="#" id="imgWrap">

            <img src="data:images/ads/1.jpg" alt="相约情人节">

            <img src="data:images/ads/2.jpg" alt="新款上线">

            <img src="data:images/ads/3.jpg" alt="愤怒小鸟特卖">

            <img src="data:images/ads/4.jpg" alt="男鞋促销第一波">

            <img src="data:images/ads/5.jpg" alt="春季新品发布">

        </a>

        <div class="fix">

            <a href="###1">

                <em>相约情人节</em>

                <em>全场119元起</em>

            </a>

            <a href="###2">

                <em>新款上线</em>

                <em>全场357元起</em>

            </a>

            <a href="###3">

                <em>愤怒小鸟特卖</em>

                <em>全场89元</em>

            </a>

            <a href="###4">

                <em>男鞋促销第一波</em>

                <em>全场3.1折起</em>

            </a>

            <a href="###5">

                <em>春季新品发布</em>

                <em>全场4.1折起</em>

            </a>

        </div>

    </div>

</div>

</body>

<script src="js/jquery-1.9.1.min.js"></script>

<script>

    $(function () {

        var $scrollText = $("#scrollDiv div a");

        $scrollText.css("opacity", "0.7");

        var len = $scrollText.length;

        var index = 0;

        var adTimer = null;

        $scrollText.mouseover(function () {

            index = $scrollText.index(this);

            showImg(index);

        }).eq(0).mouseover();

//    滑入 停止动画，滑出开始动画

        $("#scrollDiv").hover(function () {

            if (adTimer) {

                clearInterval(adTimer);

            }

        }, function () {

            adTimer = setInterval(function () {

                showImg(index);

                index++;

                if (index == len) {

                    index = 0;

                }

            }, 5000);

        }).trigger("mouseleave");

    });

    function showImg(index) {

        var $scrollDiv = $("#scrollDiv");

        var $scrollText = $scrollDiv.find("div a");

        var newHref = $scrollText.eq(index).attr("href");

        $("#imgWrap").attr("href", newHref)

                .find("img").eq(index).stop(true, true).fadeIn()

                .siblings().fadeOut();

        $scrollText.removeClass("chos").css("opacity", "0.7")

                .eq(index).addClass("chos").css("opacity", "1");

    }

</script>

</html>

5、添加超链接提示

《锋利的jQuery》3示例

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" type="text/css" href="css/zgy.css">

    <style>

        #tooltip { position: absolute; background-color: #f7f5d1; border:1px solid #666; }

    </style>

</head>

<body>

<div class="fz p10">

    <ul class="ul">

        <li><a title="[活动] 伊伴春鞋迎春大促" class="tooltip" href="###1">[活动] 伊伴春鞋迎春大促</a></li>

        <li><a title="[活动] 千百度冬靴新品火热让利" class="tooltip" href="###2">[活动] 千百度冬靴新品火热让利</a></li>

        <li><a title="[活动] COEY秋冬新品全场2.3折起" class="tooltip" href="###3">[活动] COEY秋冬新品全场2.3折起</a></li>

        <li><a title="[活动] 伊伴春鞋迎春大促" class="tooltip" href="###4">[活动] 伊伴春鞋迎春大促</a></li>

        <li><a title="[活动] 千百度冬靴新品火热让利" class="tooltip" href="###5">[活动] 千百度冬靴新品火热让利</a></li>

        <li><a title="[活动] COEY秋冬新品全场2.3折起" class="tooltip" href="###6">[活动] COEY秋冬新品全场2.3折起</a></li>

    </ul>

</div>

</body>

<script src="js/jquery-1.9.1.min.js"></script>

<script>

    $(function () {

        var x = 10;

        var y = 20;

        $("a.tooltip").mouseover(function (e) {

            this.myTitle = this.title;

            this.title = "";

            var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>";

            $("body .fz").append(tooltip);

            $("#tooltip").css({

                "top": (e.pageY + y) + "px",

                "left": (e.pageX + x) + "px"

            }).show("fast");

        }).mouseout(function () {

            this.title = this.myTitle;

            $("#tooltip").remove();

        }).mousemove(function (e) {  //鼠标在超链接上移动时，提示效果跟随鼠标一起移动

            $("#tooltip").css({

                "top": (e.pageY + y) + "px",

                "left": (e.pageX + x) + "px"

            });

        });

    });

</script>

</html>

6、产品横向滚动效果

对比《锋利的jQuery》3 jquery中的动画

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" type="text/css" href="css/zgy.css">

    <style>

        div { font-family: Verdana, Arial, Helvetica, sans-serif; }

        .brandTab { line-height: 29px; border-bottom: 1px solid #dcdcdc; width: 790px; }

        .brandTab li { float: left; background-color: #dcdcdc; margin-right: 5px; }

        .brandTab li a { display: inline-block; padding: 0 10px; color: #333; }

        .brandTab .chos { background-color: #FA5889; }

        .brandTab .chos a { color: #fff; }

        .brandCont { width: 790px; height: 188px; overflow: hidden; position: relative; }

        .brandList { position: absolute; left: 0; top: 0; }

        .brandList li { float: left; width: 185px; padding: 0 5px; }

        .brandList li a { display: block; }

    </style>

</head>

<body>

<div class="fz">

    <div>

        <div class="brandTab fix" id="brandTab">

            <ul class="r">

                <li><a title="运动" href="#">运动</a></li>

                <li><a title="女鞋" href="#">女鞋</a></li>

                <li><a title="男鞋" href="#">男鞋</a></li>

                <li><a title="Applife" href="#">童鞋</a></li>

            </ul>

            <span class="b fz14">品牌活动</span>

        </div>

        <div class="brandCont">

            <ul class="brandList fix" id="brandList">

                <li>

                    <a href="#"><img src="data:images/upload/20120217.jpg"></a>

                    <a href="#" class="bg-grey">耐克</a>

                </li>

                <li>

                    <a href="#"><img src="data:images/upload/20120218.jpg"></a>

                    <a href="#" class="bg-grey">阿迪达斯</a>

                </li>

                <li>

                    <a href="#"><img src="data:images/upload/20120219.png"></a>

                    <a href="#" class="bg-grey">李宁</a>

                </li>

                <li>

                    <a href="#"><img src="data:images/upload/20120220.png"></a>

                    <a href="#" class="bg-grey">安踏</a>

                </li>

                <li>

                    <a href="#"><img src="data:images/upload/20120217.jpg"></a>

                    <a href="#" class="bg-grey">耐克</a>

                </li>

                <li>

                    <a href="#"><img src="data:images/upload/20120218.jpg"></a>

                    <a href="#" class="bg-grey">阿迪达斯</a>

                </li>

                <li>

                    <a href="#"><img src="data:images/upload/20120219.png"></a>

                    <a href="#" class="bg-grey">李宁</a>

                </li>

                <li>

                    <a href="#"><img src="data:images/upload/20120220.png"></a>

                    <a href="#" class="bg-grey">安踏</a>

                </li>

                <li>

                    <a href="#"><img src="data:images/upload/20120217.jpg"></a>

                    <a href="#" class="bg-grey">耐克</a>

                </li>

                <li>

                    <a href="#"><img src="data:images/upload/20120218.jpg"></a>

                    <a href="#" class="bg-grey">阿迪达斯</a>

                </li>

                <li>

                    <a href="#"><img src="data:images/upload/20120219.png"></a>

                    <a href="#" class="bg-grey">李宁</a>

                </li>

                <li>

                    <a href="#"><img src="data:images/upload/20120220.png"></a>

                    <a href="#" class="bg-grey">安踏</a>

                </li>

                <li>

                    <a href="#"><img src="data:images/upload/20120217.jpg"></a>

                    <a href="#" class="bg-grey">耐克</a>

                </li>

                <li>

                    <a href="#"><img src="data:images/upload/20120218.jpg"></a>

                    <a href="#" class="bg-grey">阿迪达斯</a>

                </li>

                <li>

                    <a href="#"><img src="data:images/upload/20120219.png"></a>

                    <a href="#" class="bg-grey">李宁</a>

                </li>

                <li>

                    <a href="#"><img src="data:images/upload/20120220.png"></a>

                    <a href="#" class="bg-grey">安踏</a>

                </li>

            </ul>

        </div>

    </div>

</div>

</body>

<script src="js/jquery-1.9.1.min.js"></script>

<script>

    $(function () {

        $("#brandTab li a").click(function () {

            $(this).parent().addClass("chos")

                    .siblings().removeClass("chos");

            var idx = $("#brandTab li a").index(this);

            showBrandList(idx);

            return false;

        }).eq(0).click();

    });

    function showBrandList(index) {

        var $rollObj = $("#brandList");

        var rollWidth = $rollObj.find("li").outerWidth();

        rollWidth = rollWidth * 4;

        $rollObj.stop(true, true).animate({

            left: -rollWidth * index

        }, 1000);

    }

</script>

</html>

7、光标滑动列表效果

只贴代码了。

/* 滑过图片出现放大镜效果 */

$(function(){

    $("#jnBrandList li").each(function(index){

        var $img = $(this).find("img");

        var img_w = $img.width();

        var img_h = $img.height();

        var spanHtml = '<span style="position:absolute;top:0;left:5px;width:'+img_w+'px;height:'+img_h+'px;" class="imageMask"></span>';

        $(spanHtml).appendTo(this);

    })

    $("#jnBrandList").delegate(".imageMask", "hover", function(){

        $(this).toggleClass("imageOver");

    });

    /*

    $("#jnBrandList").find(".imageMask").live("hover", function(){

        $(this).toggleClass("imageOver");

    });

    */

})

8、产品详细页面效果（放大镜，遮罩，选项卡，评分等）

《锋利的jQuery》打造个性网站整合的更多相关文章

  1. 利用jQuery打造个性网站

    网页结构 编写全局样式(reset.css) /*全局样式*/ body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fi ...

  2. 《锋利的jQuery》读书要点笔记7——制作商城网页：网站脚本

    第8章 用jQuery打造个性网站 上一节将网页的样式设计完了,现在开始用jQuery来编写网站的脚本.首先要确定的是应该完成哪些功能. 首页应该完成的功能是: 详情页: 这个页面要完成的效果是: 接 ...

  3. 锋利的jQuery第2版学习笔记8~11章

    第8章,用jQuery打造个性网站 网站结构 文件结构 images文件夹用于存放将要用到的图片 styles文件夹用于存放CSS样式表,个人更倾向于使用CSS文件夹 scripts文件夹用于存放jQ ...

  4. 《锋利的jQuery》读书要点笔记6——制作商城网页：结构和样式设计

    第8章 用jQuery打造个性网站 做一个购物网站并用jQuery来完善.大体步骤是: 收集素材 确定网站结构 A. 文件结构,imagea文件夹用来存放将要用到的图片,styles文件夹存放CSS, ...

  5. 锋利的jQuery学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...

  6. Jquery打造的类似新浪微博@提醒功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 锋利的jQuery（第二版）学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结. 此书主要讲解了jQuery的常用操作,包括认识jQuery,j ...

  8. 《锋利的JQuery》读书要点笔记1——认识JQuery&&选择器

    <锋利的jQuery>源码下载,包括了这本书中全部代码以及用到的CSS文件 第一章 认识jQuery jQuery是个Js库.首先该明确的一点是:在jQuery库中$就是jQuery的一个 ...

  9. 《锋利的jQuery》学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...

随机推荐

  1. selenium遇到不可编辑input和隐藏input如何赋值

    js = 'document.getElementsByName("m:csr_mt_gnccspjclfbxd:bmshldID")[0].type="text&quo ...

  2. Yii2 数据操作Query Builder

    转载地址: http://blog.csdn.net/hzqghost/article/details/44117081 Yii2 数据操作Query Builder 分类: Yii22015-03- ...

  3. 2016.6.20 eclipse中的jsp文件的字体大小在哪里修改

    刚打开eclipse的时候,觉得jsp文件的字体太小了.于是去修改字体,但是colors and fonts里的字体选项太多了,不知道哪一个是. 试了几个后发现,是structured text ed ...

  4. 【LeetCode-面试算法经典-Java实现】【139-Word Break（单词拆分）】

    [139-Word Break(单词拆分)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a string s and a dictionary of w ...

  5. Mysql 性能监控及调优

    死锁概念: 两个或两个以上的进程在执行过程中,因争夺资源而造成的一种互相等待的现象 1.监控死锁(innotop): (1) 启用 innodb_status_file 在/etc/my.cnf添加如 ...

  6. 分享个免费的货币汇率API

    先上API文档链接:https://www.juhe.cn/docs/api/id/23,支持人民币牌价.外汇汇率查询:数据仅供参考,交易时以银行柜台成交价为准. 人民币牌价 接口地址:http:// ...

  7. PHP增加$_ENV变量

    在日常开发过程中,我们常常会将一些系统或模块配写在配置文件里.这样便于程序维护与修改.通常的配置文件有.ini , .xml等.配置文件的好处在于:1,便于管理.2,可读性高.但是,使用配置文件也会有 ...

  8. robotframework使用之 下拉框的选择

    选择下拉框有几种方式处理,首先在浏览器F12选择下拉框 1. F12后看见下拉框的源码是<option xxx> <select class="w_60" dat ...

  9. JVM、垃圾回收、内存调优、常见參数

    一.什么是JVM JVM是Java Virtual Machine(Java虚拟机)的缩写.JVM是一种用于计算设备的规范.它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现 ...

  10. IOS-4-面试题1：黑马程序猿IOS面试题大全

    一.多线程网络 1. 多线程的底层实现? 1> 首先搞清楚什么是线程.什么是多线程 2> Mach是第一个以多线程方式处理任务的系统.因此多线程的底层实现机制是基于Mach的线程 3> ...