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网站建设的课,觉得性价 ...
随机推荐
- SQL存储过程基础
什么是存储过程呢?存储过程就是作为可执行对象存放在数据库中的一个或多个SQL命令. 通俗来讲:存储过程其实就是能完成一定操作的一组SQL语句. 那为什么要用存储过程呢?1.存储过程只在创造时进行编译, ...
- GCJ——Crazy Rows (2009 Round 2 A)
题意: 给定一个N*N的矩阵,由0,1组成,只允许交换相邻的两行,把矩阵转化为下三角矩阵(对角线上方全是0),最少需要多少次交换?(保证可以转化为下三角矩阵) Large: N<=40 解析: ...
- vs2013 x64 编译汇编代码
x64不再支持__asm, 只能单独放在一个.asm中. xxx.asm--------属性 应用 会出现 自定义生成工具. 下面黑体是我们修改的内容.
- my-> git使用笔记
要在本地新建分支test0227并切换到该分支,运行git checkoutout 并加上-b参数,如: git checkout -b test0227 这相当于执行下面这两条命令: git bra ...
- 各种优化方法总结比較（sgd/momentum/Nesterov/adagrad/adadelta）
前言 这里讨论的优化问题指的是,给定目标函数f(x),我们须要找到一组參数x.使得f(x)的值最小. 本文下面内容如果读者已经了解机器学习基本知识,和梯度下降的原理. SGD SGD指stochast ...
- mysql数据库查看各实例磁盘占用情况
1.总体查看: use information_schema; select TABLE_SCHEMA, concat(truncate(sum(data_length)/1024/1024,2),' ...
- 【AngularJS】【01】简介
※文件引自OneDrive,有些人可能看不到
- 应用设置Setting的实现
有非常多应用都在iOS设置中有相关的设置.例如以下图: 通过这个设置能够方便的相应用的一些主要的设置进行更改. 要完整的实现这个设置功能,有下面几方面问题须要解决: 1)设置的编写(实现设置的 ...
- metaq入门部署到实战
初识metaq zookeeper部署,这里单机zk为例. wget http://mirror.bit.edu.cn/apache/zookeeper/zookeeper-3.4.5/zookeep ...
- MySqlDataReader
本文讲述如何从SqlDataReader或MySqlDataReader中循环读取内容并输出 sqlserver和mysql的DataReader的用法完全一样,只是名字不同,以mysql为例 str ...