Jquery实例（磁力图片、轮播图、腾讯课堂菜单、可弹出红色菜单、砸蛋游戏）

1、磁力图片：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        * {
            font-family:微软雅黑;
        }
        img {
            position:absolute;
        }
    </style>
  <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(document).click(function (a) {
                $("img").animate({ left: a.pageX, top: a.pageY }, 2000);
            });
        });
    </script>
</head>
<body>
    <img src="Images/cat.jpg" />
</body>
</html>

 

2、轮播图：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
     <link href="Style/demo2.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        var num = 0;//记录下当前显示的图片的索引
        $(function () {
            $(".imgitem").not(":eq(0)").hide();//页面加载的时候，第一张图片显示。
            
            setInterval(function () {//隔多久，执行一次方法
                num++;
                if (num == 5)
                {
                    num = 0;
                }
                ShowFocusPic();
            }, 5000);

            $(".btn a").click(function () {
                num = $(".btn a").index($(this));//当前点击的下标在整个下标里面的索引，把这个索引值转成整数赋值给num
                ShowFocusPic();
            });
        });
        function ShowFocusPic()
        {
            $(".imgitem").eq(num).show();
            $(".imgitem").not(":eq(" + num + ")").hide();
            $(".btn li a").eq(num).addClass("selected");
            $(".btn li a").not(":eq(" + num + ")").removeClass("selected");
        }
    </script>
</head>
<body>
    <div id="list">
        <div class="imgitem"><img src="Images/2.png" /></div>
        <div class="imgitem"><img src="Images/3.jpg" /></div>
        <div class="imgitem"><img src="Images/4.jpg" /></div>
        <div class="imgitem"><img src="Images/5.jpg" /></div>
        <div class="imgitem"><img src="Images/6.jpg" /></div>
        <div class="btn">
            <ul>
                <li><a href="#" class="selected">1</a></li>
                 <li><a href="#">2</a></li>
                 <li><a href="#">3</a></li>
                 <li><a href="#">4</a></li>
                 <li><a href="#">5</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

 

3、腾讯课堂菜单：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Style/demo1.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".showinfor").hide();//页面加载后，class为showinfor的div隐藏

            $(".showinfor").hover(function () {
                $(this).show();
            }, function () {
                $(this).hide();
            });

            $(".listitem").hover(function () {
                var obj = $(this).offset();
                var index =$(".listitem").index($(this));
                $(".showinfor").eq(index).show();
                $(".showinfor").eq(index).css({ "top": obj.top, "left": obj.left + 220 });
                $(this).addClass("itembg");
            }, function () {
                var index =$(".listitem").index($(this));
                $(".showinfor").eq(index).hide();
                $(this).removeClass("itembg");
            });
        });
    </script>
</head>
<body>
    <div id="list">
        <p class="top"><a href="#">全部课程</a></p>
        <div class="listitem">
            <div class="item_1"><a href="#">职业技能</a></div>
            <div class="item_2">
                <ul>
                    <li><a href="#">职能技能</a></li>
                    <li><a href="#">SNS营销</a></li>
                    <li><a href="#">公务员</a></li>
                </ul>
            </div>
        </div>
        <div class="showinfor">
         职业技能
        </div>
        <div class="listitem">
            <div class="item_1"><a href="#">IT培训</a></div>
            <div class="item_2">
                <ul>
                    <li><a href="#">网站制作</a></li>
                    <li><a href="#">手机开发</a></li>
                    <li><a href="#">游戏制作</a></li>
                </ul>
            </div>
        </div>
        <div class="showinfor">IT培训</div>
        <div class="listitem">
            <div class="item_1"><a href="#">语言学习</a></div>
            <div class="item_2">
                <ul>
                    <li><a href="#">英语口语</a></li>
                    <li><a href="#">留学英语</a></li>
                    <li><a href="#">韩语</a></li>
                </ul>
            </div>
        </div>
        <div class="showinfor">语言学习</div>
        <div class="listitem">
            <div class="item_1"><a href="#">中小学/大学</a></div>
            <div class="item_2">
                <ul>
                    <li><a href="#">中考备战</a></li>
                    <li><a href="#">高考备战</a></li>
                </ul>
            </div>
        </div>
        <div class="showinfor">中小学/大学</div>
        <div class="listitem">
            <div class="item_1"><a href="#">兴趣爱好</a></div>
            <div class="item_2">
                <ul>
                    <li><a href="#">投资理财</a></li>
                    <li><a href="#">美妆</a></li>
                    <li><a href="#">摄影</a></li>
                </ul>
            </div>

        </div>
        <div class="showinfor">兴趣爱好</div>
        <div class="listitem">
            <div class="item_1"><a href="#">亲子课堂</a></div>
            <div class="item_2">
                <ul>
                    <li><a href="#">幼儿教育</a></li>
                    <li><a href="#">家长训练营</a></li>
                </ul>
            </div>
        </div>
        <div class="showinfor">亲子课堂</div>
    
    </div>
</body>
</html>

 

4、可弹出红色菜单：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <style type="text/css">
        body {
            background-color: #ffdee0;
        }

        a {
            font-family: "微软雅黑";
            color: white;
            text-decoration: none;
        }

        ul {
            list-style-type: none; /* 不显示项目符号 */
            margin: 0px;
            padding: 0px;
        }

        #navigation {
            width: 200px;
        }

            #navigation ul li {
                border-bottom: 1px solid #ED9F9F; /* 添加下划线 */
                background-color: #c11136;
            }

                #navigation ul li a {
                    display: block; /* 区块显示 */
                    padding: 5px;
                    border-left: 12px solid #711515; /* 左边的粗红边 */
                    border-right: 1px solid #711515; /* 右侧阴影 */
                }

                    #navigation ul li a:hover { /* 鼠标经过时 */
                        background-color: #990020; /* 改变背景色 */
                        color: #ffff00; /* 改变文字颜色 */
                    }


                #navigation ul li ul li {
                    background-color: #e85070;
                    border-top: 1px solid #ED9F9F;
                }

                    #navigation ul li ul li a {
                        display: block;
                        padding: 3px;
                        border-left: 28px solid #a71f1f;
                        border-right: 1px solid #711515;
                    }

                        #navigation ul li ul li a:hover {
                            background-color: #c2425d;
                            color: #ffff00;
                        }
    </style>
    <script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        //$(function () {
        //    $(".c").find("ul").hide();
        //    $(".c").toggle(function () {
        //        $(this).find("ul").slideDown(500);
        //    }, function () {
        //        $(this).find("ul").slideUp(500);
        //    });
        //});

        $(function () {
            $(".c").find("ul").hide();
            $(".c").toggle(function () {
                $(this).find("ul").slideDown(500);
            }, function () {
                $(this).find("ul").slideUp(500);
            });
        });

    </script>
</head>
<body>
    <div id="navigation">
        <ul id="listUL" >
            <li class="c"><a href="#">体育明星</a>
                <ul>
                    <li><a href="#">乔丹</a></li>
                    <li><a href="#">纳什</a></li>
                    <li><a href="#">奥利尔</a></li>
                </ul>
            </li>

            <li class="c"><a href="#">政治明星</a>
                <ul>
                    <li><a href="#">普京</a></li>
                    <li><a href="#">习总</a></li>
                    <li><a href="#">奥巴马</a></li>
                </ul>
            </li>
            <li class="c"><a href="#">娱乐明星</a>
                <ul>
                    <li><a href="#">黄家驹</a></li>
                    <li><a href="#">周润发</a></li>
                    <li><a href="#">刘德华</a></li>
                </ul>
            </li>
            <li class="c"><a href="#">历史人物</a>
                <ul>
                    <li><a href="#">康熙</a></li>
                    <li><a href="#">拿破仑</a></li>
                    <li><a href="#">秦始皇</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

 

5、砸蛋游戏：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        #d1 {
            margin-top: 200px;
            margin-left: 200px;
        }

        .egg {
            float: left;
            background-image: url("Images/egg_1.png");
            background-repeat: no-repeat;
            height: 187px;
            width: 158px;
            margin-right: 50px;
            cursor: pointer;
        }

        #t {
            height: 87px;
            width: 74px;
            background-image: url("Images/egg_3.png");
            background-repeat: no-repeat;
            position: absolute;
            top: 185px;
            left: 330px;
            cursor: pointer;
        }

        #re {
            width: 160px;
            height: 35px;
            position:absolute;
            background-color:#FFFFCC;
            color:#FF6600;
            font-size:14px;
            font-family:"微软雅黑";
            display:none;
            text-align:center;
            line-height:35px;
        }
    </style>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var iNum = Math.floor(Math.random() * 4 + 1);//产生一个1~4之间的随机整数
         
            var i = 0;

            $(".egg").mouseover(function () {
                var off = $(this).offset();//当前蛋的方位
                $("#t").css("left", off.left + 120);
            });

            $(".egg").click(function () {
                if (i == 4) {
                    alert("蛋都碎了，别砸了，刷新再来");
                    document.getElementById("a3").play();
                    return;
                }
                if ($(this).attr("isbreak") == "false") {
                    i++;
                    $(this).css("background-image", "url(Images/egg_2.png)");
                    var a = $(".egg").index($(this)) + 1;//获取到当前的蛋是第几个蛋
                    var off = $(this).offset();
                    if (a == iNum) {
                        $("#re").text("恭喜，您中得数码相机!").css({ "left": off.left, "top": "140px" }).slideDown();
                        document.getElementById("a2").play();
                    }
                    else {
                        $("#re").text("很遗憾，您没有中奖").css({ "left": off.left, "top": "140px" }).slideDown();
                        document.getElementById("a1").play();
                    }
                    $(this).attr("isbreak", "true");
                }
                else {
                    $("#re").text("蛋已砸过了").css({ "left": off.left, "top": "140px" }).slideDown();
                }

            });
        });
    </script>
</head>
<body>
    <div id="d1">
        <div class="egg" isbreak="false"></div>
        <div class="egg" isbreak="false"></div>
        <div class="egg" isbreak="false"></div>
        <div class="egg" isbreak="false"></div>
    </div>
    <div id="t"></div>
    <div id="re"></div>

    <div><audio src="file/1.mp3" id="a1"></audio></div>
    <div><audio src="file/2.mp3" id="a2"></audio></div>
    <div><audio src="file/3.mp3" id="a3"></audio></div>
</body>
</html>
posted @ 2015-10-20 23:57  75-逢场作戏  阅读(338)  评论(0)  编辑  收藏  举报