前言：jq的最后一节课，主要讲解应用，
内容：
1.会飞的li：
HTML代码：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>会飞的li</title> 6 <script src="js/jquery-1.10.2.min.js"></script> 7 <script src="js/demo1.js"></script> 8 <link href="css/css1.css" rel="stylesheet" /> 9 </head> 10 <body> 11 <ul id="u1"> 12 <li>Google</li> 13 <li>Facebook</li> 14 <li>Yahoo</li> 15 <li>Amazon</li> 16 <li>MSN</li> 17 <li>eBay</li> 18 </ul> 19 <ul id="u2"></ul> 20 </body> 21 </html>
CSS代码：
1 * { 2 padding: 0px; 3 margin: 0px; 4 font-family: "微软雅黑"; 5 } 6 ul { 7 list-style-type: none; 8 height: 210px; 9 width: 160px; 10 border: dashed 2px #00bfff; 11 line-height: 33px; 12 margin-top: 100px; 13 margin-left: 150px; 14 } 15 li { 16 margin-left: 45px; 17 } 18 #u1 { 19 float: left; 20 } 21 #u2 { 22 margin-right: 150px; 23 float: right; 24 }
JS代码：
1 $(function() { 2 $("li").click(function() { 3 if ($(this).parent().attr("id")=="u1") { 4 $(this).css("position", "absolute").animate({ "left": document.body.clientWidth - 265 }, 2000,function() { 5 $(this).appendTo($("#u2")).css("position","static"); 6 }); 7 } 8 else { 9 $(this).css("position", "absolute").animate({ "left": 150 }, 2000, function () { 10 $(this).appendTo($("#u1")).css("position", "static"); 11 }); 12 } 13 14 }); 15 });
效果图：
2.消息弹框：
HTML代码：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>消息弹框</title> 6 <script src="js/jquery-1.10.2.min.js"></script> 7 <script src="js/demo2.js"></script> 8 <link href="css/demo2.css" rel="stylesheet" /> 9 </head> 10 <body> 11 <div id="message"><img src="image/message.jpg"/></div> 12 </body> 13 </html>
CSS代码：
1 * { 2 padding: 0px; 3 margin: 0px; 4 } 5 #message { 6 position: fixed; 7 right: 0px; 8 bottom: -203px; 9 }
JQ代码：
1 $(function() { 2 $("#message").animate({ "bottom": "0px" }, 2000,function() { 3 setTimeout(function() { 4 $("#message").animate({ "bottom": "-203px" }, 2000); 5 }, 5000); 6 }); 7 });
效果图：
3.砸金蛋：
HTML代码：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>砸金蛋</title> 6 <link href="css/demo1.css" rel="stylesheet" /> 7 <script src="js/jquery-1.10.2.min.js"></script> 8 <script src="js/demo1.js"></script> 9 </head> 10 <body> 11 <div id="eggs"> 12 <div class="egg" data-isbreak="false"></div> 13 <div class="egg" data-isbreak="false"></div> 14 <div class="egg" data-isbreak="false"></div> 15 <div class="egg" data-isbreak="false"></div> 16 </div> 17 <div id="t"></div> 18 <audio src="audio/1.mp3" id="a1"></audio> 19 <audio src="audio/2.mp3" id="a2"></audio> 20 </body> 21 </html>
CSS代码：
1 * { 2 padding: 0px; 3 margin: 0px; 4 } 5 #eggs { 6 margin-left: 200px; 7 margin-top: 300px; 8 } 9 .egg { 10 width: 158px; 11 height: 187px; 12 background-image: url("../image/egg_1.png"); 13 float: left; 14 margin-right: 30px; 15 cursor: pointer; 16 } 17 #t { 18 width: 74px; 19 height: 87px; 20 background-image: url("../image/egg_3.png"); 21 cursor: pointer; 22 position: absolute; 23 top: 285px; 24 left: 318px; 25 }
JS代码：
1 //var iTimes = 0; 2 $(function () { 3 var iRandom = Math.floor(Math.random() * 4 + 1); 4 5 $(".egg").mouseover(function() { 6 $("#t").animate({ "left": $(this).offset().left+120 }, 10); 7 }); 8 9 $(".egg").click(function () { 10 /*iTimes++; 11 if (iTimes > 1) { 12 alert("只有一次砸蛋机会"); 13 return; 14 }*/ 15 if ($(this).attr("data-isbreak") == "false") { 16 $(this).css("background-image","url(../image/egg_2.png)"); 17 18 var iNum = $(".egg").index($(this)) + 1; 19 if (iNum == iRandom) { 20 alert("中奖了"); 21 document.getElementById("a2").play(); 22 } 23 else { 24 alert("没有中奖"); 25 document.getElementById("a1").play(); 26 } 27 $(this).attr("data-isbreak", "true"); 28 } 29 else { 30 alert("这个蛋砸过了"); 31 } 32 }); 33 });
效果图：
4.图片交换位置：
HTML代码：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <link href="css/demo2.css" rel="stylesheet" /> 7 <script src="js/jquery-1.10.2.min.js"></script> 8 <script src="js/demo2.js"></script> 9 </head> 10 <body> 11 <div class="p1"><img src="image/1.jpg"/></div> 12 <div class="p2"><img src="image/2.jpg"/></div> 13 <div class="p3"><img src="image/3.jpg"/></div> 14 <div class="p4"><img src="image/4.jpg"/></div> 15 <div class="p5" title=""><img src="image/5.jpg"/></div> 16 </body> 17 </html>
CSS代码：
1 * { 2 padding: 0px; 3 margin: 0px; 4 } 5 div { 6 position: absolute; 7 cursor: pointer; 8 padding: 5px; 9 background-color: #ffffff; 10 box-shadow: 10px 10px 10px #cccccc; 11 border-radius: 5px; 12 } 13 .p1 { 14 top: 50px; 15 left: 50px; 16 z-index: 1; 17 } 18 .p2 { 19 top: 50px; 20 left: 690px; 21 z-index: 1; 22 } 23 .p3 { 24 top: 100px; 25 left: 210px; 26 z-index: 2; 27 } 28 .p4 { 29 top: 100px; 30 left: 530px; 31 z-index: 2; 32 } 33 .p5 { 34 top: 152px; 35 left: 370px; 36 z-index: 3; 37 }
JQ代码：
1 $(function() { 2 $("div").click(function() { 3 $(this).stop(true, true); 4 $("div[title=selected]").stop(true, true); 5 var left1 = $(this).css("left"); 6 var top1 = $(this).css("top"); 7 var zindex1 = $(this).css("z-index"); 8 9 var left2 = $("div[title=selected]").css("left"); 10 var top2 = $("div[title=selected]").css("top"); 11 var zindex2 = $("div[title=selected]").css("z-index"); 12 13 $("div[title=selected").animate({ "left": left1, "top": top1 }).css("z-index", zindex1).removeAttr("title"); 14 $(this).animate({ "left": left2, "top": top2 },1000).css("z-index", zindex2).attr("title","selected"); 15 }); 16 });
效果图：
着重理解JQ中的代码。
后记：勤加练习。