前言：jq的最后一节课，主要讲解应用，

内容：

　　1.会飞的li：

HTML代码：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>会飞的li</title>

     <script src="js/jquery-1.10.2.min.js"></script>

     <script src="js/demo1.js"></script>

     <link href="css/css1.css" rel="stylesheet" />

 </head>

 <body>

     <ul id="u1">

         <li>Google</li>

         <li>Facebook</li>

         <li>Yahoo</li>

         <li>Amazon</li>

         <li>MSN</li>

         <li>eBay</li>

     </ul>

     <ul id="u2"></ul>

 </body>

 </html>

CSS代码：

 * {

     padding: 0px;

     margin: 0px;

     font-family: "微软雅黑";

 }

 ul {

     list-style-type: none;

     height: 210px;

     width: 160px;

     border: dashed 2px #00bfff;

     line-height: 33px;

     margin-top: 100px;

     margin-left: 150px;

 }

 li {

     margin-left: 45px;

 }

 #u1 {

     float: left;

 }

 #u2 {

     margin-right: 150px;

     float: right;

 }

JS代码：

 $(function() {

     $("li").click(function() {

         if ($(this).parent().attr("id")=="u1") {

             $(this).css("position", "absolute").animate({ "left": document.body.clientWidth - 265 }, 2000,function() {

                 $(this).appendTo($("#u2")).css("position","static");

             });

         }

         else {

             $(this).css("position", "absolute").animate({ "left": 150 }, 2000, function () {

                 $(this).appendTo($("#u1")).css("position", "static");

             });

         }

     });

 });

效果图：

　　2.消息弹框：

HTML代码：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>消息弹框</title>

     <script src="js/jquery-1.10.2.min.js"></script>

     <script src="js/demo2.js"></script>

     <link href="css/demo2.css" rel="stylesheet" />

 </head>

 <body>

     <div id="message"><img src="data:image/message.jpg"/></div>

 </body>

 </html>

CSS代码：

 * {

     padding: 0px;

     margin: 0px;

 }

 #message {

     position: fixed;

     right: 0px;

     bottom: -203px;

 }

JQ代码：

 $(function() {

     $("#message").animate({ "bottom": "0px" }, 2000,function() {

         setTimeout(function() {

             $("#message").animate({ "bottom": "-203px" }, 2000);

         }, 5000);

     });

 });

效果图：

　　3.砸金蛋：

HTML代码：

 <!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="css/demo1.css" rel="stylesheet" />

     <script src="js/jquery-1.10.2.min.js"></script>

     <script src="js/demo1.js"></script>

 </head>

 <body>

 <div id="eggs">

     <div class="egg" data-isbreak="false"></div>

     <div class="egg" data-isbreak="false"></div>

     <div class="egg" data-isbreak="false"></div>

     <div class="egg" data-isbreak="false"></div>

 </div>

     <div id="t"></div>

     <audio src="audio/1.mp3" id="a1"></audio>

     <audio src="audio/2.mp3" id="a2"></audio>

 </body>

 </html>

CSS代码：

 * {

     padding: 0px;

     margin: 0px;

 }

 #eggs {

     margin-left: 200px;

     margin-top: 300px;

 }

 .egg {

     width: 158px;

     height: 187px;

     background-image: url("../image/egg_1.png");

     float: left;

     margin-right: 30px;

     cursor: pointer;

 }

 #t {

     width: 74px;

     height: 87px;

     background-image: url("../image/egg_3.png");

     cursor: pointer;

     position: absolute;

     top: 285px;

     left: 318px;

 }

JS代码：

 //var iTimes = 0;

 $(function () {

     var iRandom = Math.floor(Math.random() * 4 + 1);

     $(".egg").mouseover(function() {

         $("#t").animate({ "left": $(this).offset().left+120 }, 10);

     });

     $(".egg").click(function () {

         /*iTimes++;

         if (iTimes > 1) {

             alert("只有一次砸蛋机会");

             return;

         }*/

         if ($(this).attr("data-isbreak") == "false") {

             $(this).css("background-image","url(../image/egg_2.png)"); 

             var iNum = $(".egg").index($(this)) + 1;

             if (iNum == iRandom) {

                 alert("中奖了");

                 document.getElementById("a2").play();

             }

             else {

                 alert("没有中奖");

                 document.getElementById("a1").play();

             }

             $(this).attr("data-isbreak", "true");

         }

         else {

             alert("这个蛋砸过了");

         }

     });

 });

效果图：

　　4.图片交换位置：

HTML代码：

 <!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="css/demo2.css" rel="stylesheet" />

     <script src="js/jquery-1.10.2.min.js"></script>

     <script src="js/demo2.js"></script>

 </head>

 <body>

     <div class="p1"><img src="data:image/1.jpg"/></div>

     <div class="p2"><img src="data:image/2.jpg"/></div>

     <div class="p3"><img src="data:image/3.jpg"/></div>

     <div class="p4"><img src="data:image/4.jpg"/></div>

     <div class="p5" title=""><img src="data:image/5.jpg"/></div>

 </body>

 </html>

CSS代码：

 * {

     padding: 0px;

     margin: 0px;

 }

 div {

     position: absolute;

     cursor: pointer;

     padding: 5px;

     background-color: #ffffff;

     box-shadow: 10px 10px 10px #cccccc;

     border-radius: 5px;

 }

 .p1 {

     top: 50px;

     left: 50px;

     z-index:;

 }

 .p2 {

     top: 50px;

     left: 690px;

     z-index:;

 }

 .p3 {

     top: 100px;

     left: 210px;

     z-index:;

 }

 .p4 {

     top: 100px;

     left: 530px;

     z-index:;

 }

 .p5 {

     top: 152px;

     left: 370px;

     z-index:;

 }

JQ代码：

 $(function() {

     $("div").click(function() {

         $(this).stop(true, true);

         $("div[title=selected]").stop(true, true);

         var left1 = $(this).css("left");

         var top1 = $(this).css("top");

         var zindex1 = $(this).css("z-index");

         var left2 = $("div[title=selected]").css("left");

         var top2 = $("div[title=selected]").css("top");

         var zindex2 = $("div[title=selected]").css("z-index");

         $("div[title=selected").animate({ "left": left1, "top": top1 }).css("z-index", zindex1).removeAttr("title");

         $(this).animate({ "left": left2, "top": top2 },1000).css("z-index", zindex2).attr("title","selected");

     });

 });

效果图：

　　  着重理解JQ中的代码。

后记：勤加练习。

ASP.NET动态网站制作（13）-- JQ（5）的更多相关文章

  1. ASP.NET动态网站制作（3）--css（2）

    前言:css分为四次课讲完,第一节课内容见ASP.NET动态网站制作(2)--css(1),接下来的内容会涉及到定位.浮动.盒子模型(第二次课).css的具体应用(第三次课).css3(第四次课).今 ...

  2. ASP.NET动态网站制作（18）-- jq作业讲解及知识补充

    前言:这节课主要讲解js及jq作业,并在作业讲解完后补充关于jQuery的一些知识点. 内容: 1.作业讲解:计算器那一块考虑的各种情况还不算完善,只实现了基本的功能,还需多多练习使用jQuery. ...

  3. ASP.NET动态网站制作（11）-- JQ（3）

    前言:这节课主要是讲CSS作业,然后继续讲jQuery. 内容: 1.css作业讲解. 2.jq设置元素样式:  (1)添加.删除css类别:$("div").addClass(& ...

  4. ASP.NET动态网站制作（12）-- JQ（4）

    前言:这节课接着上次课的继续讲. 内容:接上--> 1.jq元素样式设置:  (4)某个元素中是否含有某个css类别,返回布尔型:$("li:last").hasClass( ...

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

    前言:jq的第二节课. 内容: 1.管理选择结果:  (1)获取元素个数:$("img").size():获取页面中所有“img”个数:  (2)提取元素:$("img[ ...

  6. ASP.NET动态网站制作（9）-- JQ（1）

    前言:从这节课开始讲jQuery的相关内容,这节课主要围绕jQuery的选择器展开. 内容: 1.jQuery是一个优秀的js框架,目前企业里大多数都是用jQuery(以下简称jq).jq是对js里一 ...

  7. ASP.NET动态网站制作（1）--html

    前言:正式上课的第一课,讲的是前端部分的最基础内容:html. 前端:html,css,js 数据库:sql server 动态部分:.net,c#... IIS(Internet Informati ...

  8. ASP.NET动态网站制作（20）-- C#（3）

    前言:C#的第三节课,继续上次课的内容,依旧围绕基础的只是讲解. 内容: 1.StringBuilder类:由于string类一旦创建,则不能更改.如果做字符串拼凑的话,将会非常耗费空间,如: str ...

  9. ASP.NET动态网站制作（0）

    前言:一直想系统地学习一下网站建设的相关内容,看过相关的书籍,也跟着视频学过,但总觉得效率不高,学过的东西印象不深刻,或许还是自己动手实践的少.无意中免费听了一堂讲ASP.NET网站建设的课,觉得性价 ...

随机推荐

  1. 修复Kaos的中文显示

    前段时间为了尝鲜KDE5,于是安装了Kaos 2015.2,默认的kde5桌面,速度也不错,软件更新很及时,计划淘汰掉chakra算了,一直中文在终端下显示为乱码,经网上搜索整理记录如下: (1)使用 ...

  2. 学习good taste代码

    Linux 的创始人,在采访中提及了关于代码的 “good taste”.Linus Torvalds 展示了一一些代码: void remove_list_entry(entry){ prev = ...

  3. layui 的单选框

    <div class="layui-form-item"> <label class="layui-form-label">是否通过&l ...

  4. LeetCode OJ--Combinations *

    https://oj.leetcode.com/problems/combinations/ 给一个集合,求个数为k的所有子集 递归调用,深搜 class Solution { public: vec ...

  5. (2)Django-pycharm部署

    pycharm 1.新建一个Django工程 2.部署 在pycharm下方的terminal终端中输入命令: python manage.py startapp app1 生成“app1”文件夹 3 ...

  6. Codeforces 583 DIV2 Robot's Task 贪心

    原题链接:http://codeforces.com/problemset/problem/583/B 题意: 就..要打开一个电脑,必须至少先打开其他若干电脑,每次转向有个花费,让你设计一个序列,使 ...

  7. 记录一次(xheditor-1.1.6-zh-cn.min.js)的错误：Cannot read property 'match' of undefined的问题解决

    由于使用了xheditor富文本框,且这个版本是2011年开发的系统,当时只有IE8,所以一切正常. 但是问题来了,今天使用IE11测试和谷歌浏览器测试,发现一直报这个错误: 且google了一下,没 ...

  8. 序列文件(seq_file)接口

    转载:http://blog.csdn.net/gangyanliang/article/details/7244664 内容简介: 本文主要讲述序列文件(seq_file)接口的内核实现,如何使用它 ...

  9. http://blog.csdn.net/LANGXINLEN/article/details/50421988

    GitHub上史上最全的Android开源项目分类汇总 今天在看博客的时候,无意中发现了 @Trinea在GitHub上的一个项目 Android开源项目分类汇总, 由于类容太多了,我没有一个个完整地 ...

  10. ArcGIS教程：面积制表

    摘要 计算两个数据集之间交叉制表的区域并输出表. 插图 使用方法 · 区域定义为输入中具有同样值的全部区.各区无需相连. 栅格和要素数据集都可用于区域输入. · 假设区域输入和类输入均为具有同样分辨率 ...