前言：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中的代码。
后记：勤加练习。
时间： 2024-11-08 03:46:27