ASP.NET动态网站制作（13）-- JQ（5）

前言：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>

View Code

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 }

View Code

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 });

View Code

效果图：

　　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>

View Code

CSS代码：

1 * {
2     padding: 0px;
3     margin: 0px;
4 }
5 #message {
6     position: fixed;
7     right: 0px;
8     bottom: -203px;
9 }

View Code

JQ代码：

1 $(function() {
2     $("#message").animate({ "bottom": "0px" }, 2000,function() {
3         setTimeout(function() {
4             $("#message").animate({ "bottom": "-203px" }, 2000);
5         }, 5000);
6     });
7 });

View Code

效果图：

　　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>

View Code

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 }

View Code

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 });

View Code

效果图：

　　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>

View Code

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 }

View Code

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 });

View Code

效果图：

　　着重理解JQ中的代码。

后记：勤加练习。