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

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-10-25 02:21:34

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

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/cs

定时图片轮播图

先是HTML部分 <div id="alternate"> <ul class="img_list clear"> <li><a href="#"><img src="1.jpg" /></a></li> <li><a href="#"><img src="2.jpg" /&

图片轮播图插件的使用 unslider！！！

1.百度图片轮播图unslider,第一个就会出现jquery unslider轮播图,点击进去,下载网站提供的文件,解压,内部有我们需要使用的各种js,图片等. 2.在自己的eclipse或者intellij idea中搭建一个可以正常运行的web工程 3.在WEB-INF下创建一个jsp文件夹,jsp文件夹下创建一个lunbo.jsp,颜色标记的代码是需要注意的!在WebRoot下创建js和img文件夹,存放js和所需要的图片. 页面的代码: <%@ page language="ja

关于图片轮播图的一个简单实例 以及实例中发现问题

1.最近在学习JS的过程中,为了巩固水平做了一个简单的轮播图,以及在做的过程中发现一些问题(未解决!希望可以有大佬可以解释这个问题)2.代码如下:<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}.wai{width: 100

js实现图片轮播图（一）

一.实现原理 (1)将所有图片放在一个父容器div里面,通过display属性来设置图片的出现与隐藏: (2)轮播图分为手动轮播和自动轮播: 手动轮播的重点是每次点击图片下方的小圆圈,获得它的索引号,并让与之对应索引号的图片显示,并且此时的小圆圈为高亮显示: 自动轮播:利用定时器setInterval(),来每隔一定的时间来播放一次图片. (3)所有的基础知识:dom操作,定时器,事件运用. 二.轮播图页面布局: <div id="content">   <!-- 总

图片轮播图插件

闲来无事,自己搞了一个图片轮播的jQuery插件,话不多说,直接上代码咯!!!!! 1.HTML模块的代码很简单.写一个容器就可以了,之后往里面加入图片轮播的效果 <div class="index-banner" id="banner"></div> 2.样式代码 1 .index-banner { 2 position: relative; 3 width:1280px; 4 height: 461px; 5 margin:0 auto;

安卓图片轮播图

最近自己根据领导要求app启动页面要放产品图片(以轮播的形式),方便用户查看,做了一个简单的demo,实现了基本图片轮播功能,亲测可用. csdn地址:https://download.csdn.net/download/qq_35702985/11545257 下面贴了几乎全部代码: MainActivity: String[] urls = getResources().getStringArray(R.array.url);List list = Arrays.asList(urls);i

js图片轮播图

/*焦点图*/        var Box='.carousel';//盒子        var Menu=$(Box+' .l_cursor li');//圆点菜单        var Con=$(Box+' .carouselChange li');//大图        var Text=$(Box+' .text li');//图注文字        var Prev=$(Box+' .Prev');//上一页        var Next=$(Box+' .next');//下

JS实例之图片轮播，实现图片播放效果

1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>无标题文档</title> 4 <style type="text/css"> 5 *{margin:0px auto;padding:0px;} 6 #wai{width:500px;height:200px