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>
