ASP.NET动态网站制作（13）-- JQ（5）
前言：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）的更多相关文章
- ASP.NET动态网站制作（3）--css（2）
前言:css分为四次课讲完,第一节课内容见ASP.NET动态网站制作(2)--css(1),接下来的内容会涉及到定位.浮动.盒子模型(第二次课).css的具体应用(第三次课).css3(第四次课).今 ...
- ASP.NET动态网站制作（18）-- jq作业讲解及知识补充
前言:这节课主要讲解js及jq作业,并在作业讲解完后补充关于jQuery的一些知识点. 内容: 1.作业讲解:计算器那一块考虑的各种情况还不算完善,只实现了基本的功能,还需多多练习使用jQuery. ...
- ASP.NET动态网站制作（11）-- JQ（3）
前言:这节课主要是讲CSS作业,然后继续讲jQuery. 内容: 1.css作业讲解. 2.jq设置元素样式: (1)添加.删除css类别:$("div").addClass(& ...
- ASP.NET动态网站制作（12）-- JQ（4）
前言:这节课接着上次课的继续讲. 内容:接上--> 1.jq元素样式设置: (4)某个元素中是否含有某个css类别,返回布尔型:$("li:last").hasClass( ...
- ASP.NET动态网站制作（10）-- JQ（2）
前言:jq的第二节课. 内容: 1.管理选择结果: (1)获取元素个数:$("img").size():获取页面中所有“img”个数: (2)提取元素:$("img[ ...
- ASP.NET动态网站制作（9）-- JQ（1）
前言:从这节课开始讲jQuery的相关内容,这节课主要围绕jQuery的选择器展开. 内容: 1.jQuery是一个优秀的js框架,目前企业里大多数都是用jQuery(以下简称jq).jq是对js里一 ...
- ASP.NET动态网站制作（1）--html
前言:正式上课的第一课,讲的是前端部分的最基础内容:html. 前端:html,css,js 数据库:sql server 动态部分:.net,c#... IIS(Internet Informati ...
- ASP.NET动态网站制作（20）-- C#（3）
前言:C#的第三节课,继续上次课的内容,依旧围绕基础的只是讲解. 内容: 1.StringBuilder类:由于string类一旦创建,则不能更改.如果做字符串拼凑的话,将会非常耗费空间,如: str ...
- ASP.NET动态网站制作（0）
前言:一直想系统地学习一下网站建设的相关内容,看过相关的书籍,也跟着视频学过,但总觉得效率不高,学过的东西印象不深刻,或许还是自己动手实践的少.无意中免费听了一堂讲ASP.NET网站建设的课,觉得性价 ...
随机推荐
- Qt5网络请求使用及WebRequest函数
Qt5模拟curl进行HTTP的head请求, curl -I <url> : #include <QtCore> #include <QNetworkReply> ...
- Web安全-XSS-SQL注入-CSRF
一.XSS 跨站脚本攻击(Cross Site Scripting): 1.指攻击者在网页中嵌入客户端脚本(例如JavaScript), 当用户浏览此网页时,脚本就会在用户的浏览器上执行,从而达到攻击 ...
- iptables之centos6版本详解
1 Linux防火墙概述 Linux防火墙实际指的是Linux下的Netfilter/Iptables.Netfilter/Iptables是2.4.x/2.6.x版本Linux内核集成的IP信息包过 ...
- Codeforces 158 B. Taxi[贪心/模拟/一辆车最多可以坐4人同一个群的小朋友必须坐同一辆车问最少需要多少辆车]
http://codeforces.com/problemset/problem/158/B B. Taxi time limit per test 3 seconds memory limit pe ...
- 洛谷——P2383 狗哥玩木棒
P2383 狗哥玩木棒 题目背景 狗哥又趁着语文课干些无聊的事了... 题目描述 现给出一些木棒长度,那么狗哥能否用给出的木棒(木棒全用完)组成一个正方形呢? 输入输出格式 输入格式: 输入文件中的第 ...
- 某考试 T1 str
一开始死磕sam,发现根本没法做...... 后来想了想,反正匹配子串的大部分不是sam就是 二分+hash啊,,,于是就想了想二分+hash,发现好像可以做啊! 就是假设我们要让 s1[1] 映射到 ...
- NOI模拟题4 Problem C: 填格子(board)
Solution 首先我们要有敏锐的直觉: 我们将每一列中不选哪种颜色看作是一个序列, 则我们发现这个序列要求相邻两位的颜色不同. 我们还发现, 一个这样的序列对应两种不同的合法的棋盘, 因此统计合法 ...
- 状态压缩DP常遇到的位运算
位操作一共有6种形式:<<,>>,&,|,^,~; 1.左移操作符<<:左移操作符将整数的二进制向左移若干位,将最高若干位挤掉,并在低位补0 如: ; // ...
- APNS push server端 SSL3.0 转 TLS （iPhone苹果推送服务）
(转载此文,请说明原文出处) 苹果的官方公布 Update to the Apple Push Notification Service October 22, 2014 The Apple Push ...
- cart算法