2015.7.29 第十三、十四课 jq实例（磁力图片、轮播图、腾讯课堂菜单、可弹出红色菜单、砸蛋游戏）

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>

时间： 2024-08-02 15:11:30

2015.7.29 第十三、十四课 jq实例（磁力图片、轮播图、腾讯课堂菜单、可弹出红色菜单、砸蛋游戏）的相关文章

第三十四课二维数组的存储【项目1-3】

第三十四课二维数组的存储项目一[二维数组当函数参数] 定义一个函数来完成对参数数组中元素的求和工作,函数声明如下: [cpp] view plain copy print? int sum(int array[ ][4],int m,int n); //该函数完成对array数组中的前m行和n列元素求和在以下程序的基础上,完成对sum函数的定义. [cpp] view plain copy print? #include <stdio.h> int sum(int array[ ][4

NeHe OpenGL教程第四十四课：3D光晕

转自[翻译]NeHe OpenGL 教程前言声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线教程的编写,以及yarn的翻译整理表示感谢. NeHe OpenGL第四十四课:3D光晕 3D 光晕当镜头对准太阳的时候就会出现这种效果,模拟它非常的简单,一点数学和纹理贴图就够了.好好看看吧. 大家好,欢迎来到新的一课,在这一课中我们将扩展glCamera类,来实现镜头光晕的效果.在日常生活中,

NeHe OpenGL教程第十四课：图形字体

转自[翻译]NeHe OpenGL 教程前言声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线教程的编写,以及yarn的翻译整理表示感谢. NeHe OpenGL第十四课:图形字体图形字体: 在一课我们将教你绘制3D的图形字体,它们可像一般的3D模型一样被变换. 这节课继续上一节课课的内容.在第13课我们学习了如何使用位图字体,这节课,我们将学习如何使用轮廓字体. 创建轮廓字体的方法类似于

Kali Linux Web 渗透测试视频教程—第十四课-arp欺骗、嗅探、dns欺骗、session劫持

Kali Linux Web 渗透测试视频教程—第十四课-arp欺骗.嗅探.dns欺骗.session劫持文/玄魂目录 Kali Linux Web 渗透测试—第十四课-arp欺骗.嗅探.dns欺骗.session劫持 1 关于嗅探.arp欺骗.会话劫持.............................................................. 1 视频教程地址:http://edu.51cto.com/course/course_id-1887.h

第二十四课：能量和功率

1.RC电路充电过程的能量特性: 电源提供的能量 Vs i 在T内积分如果T远远大于时间常数,则该能量等于 CVs2 但是电容储存的能量等于 (1/2) CVs2 因此一半能量被电阻消耗,另一半则被电容储存起来 2.RC电路放电过程的能量特性: 所以能量消耗在电阻上 3.将两个过程相连,则电源消耗CVs2,一般在充电时消耗,一般在放电时消耗因此平均功率等于 CVs2f ,f是充放电的切换频率,愈大功率越大 4.类似于MODFET反相电路两种功率之和:待机功率和动态功率,后者就是充放电

OpenGL教程翻译第十四课相机控制（一）

OpenGL教程翻译第十四课相机控制(一) 原文地址:http://ogldev.atspace.co.uk/(源码请从原文主页下载) Background 在之前的教程中我们学习了如何在三维场景中的任何地方放置相机.那么我们下一步就应该学着去控制这个相机.相机可以向任何方向自由移动.我们可以用鼠标和键盘控制相机--鼠标控制视口方向,键盘控制我们的位置.这些都和第一人称视角相似.这一章我们主要来学习鼠标和键盘的控制. 我们仍然使用上下左右四个方向键.记住,我们的相机的变换取决于位置.targ

【小梅哥FPGA进阶教程】第十四章 TFT屏显示图片

十四.TFT屏显示图片本文由杭电网友曾凯峰贡献,特此感谢学习了小梅哥的TFT显示屏驱动设计后,想着在此基础上通过TFT屏显示一张图片,有了这个想法就开始动工了.首先想到是利用FPGA内部ROM存储图片数据,然后通过控制读取数据地址将图片数据传给TFT驱动模块,从而将每个图片数据显示在对应的像素点上.整个设计的框图如下: 主要是在小梅哥TFT驱动设计基础上增加了图片数据发送控制模块Imgdata_send,该模块包括存储图片数据的rom,和一些简单的逻辑控制.具体的rom IP核的建立我这里就

轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器

项目源代码下载地址:轮播图以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换图片,无缝滚动和非无缝滚动两种效果) 页面源代码:index.html(以下注释自行切换,为了项目清晰,所以用了四个js文件,分别实现不同的效果) <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

横冲直撞vue(第四篇)：v-model、指令系统总结、指令系统示例轮播图实现、指令系统示例跑马灯效果实现、在vue中使用样式的方式

一. v-model v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素. 尽管有些神奇,但v-model本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理. v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件: text 和 textarea 元素使用 value 属性和 input 事件: checkbox