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网站建设的课,觉得性价 ...
随机推荐
- 初始化home目录
mkdir WORKM 公共资料 科学研究 临时文档 项目开发 正在学习 专职教学 自作文档
- why not ovp protection ?
HW MSM8917 PM8937 PMI8940 Question : Recently, I connect usb cable with 10V to the phone. Why does t ...
- hdu 2521 反素数(打表)
反素数 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- facebook architecture 2 【转】
At the scale that Facebook operates, a lot of traditional approaches to serving web content breaks d ...
- Hdoj 5181 numbers
numbers Time Limit: 12000/6000 MS (Java/Others) Memory Limit: 196608/196608 K (Java/Others)Total ...
- (入门SpringBoot)SpringBoot结合logback(六)
SpringBoot结合logback日志: 1.配置资源文件: #日志配置信息logbacklogging.config=classpath:logback-spring.xmllog.path=E ...
- Centos下添加用户组
近日,重新整理了下开发环境,重装了,nginx,但是这个时候却是报错了,报错信息如下: [root@hserver1 php-7.0.5]# nginx -t nginx: [emerg] getpw ...
- Ubuntu免安装配置MySQL
1.下载mysql http://cdn.mysql.com/Downloads/MySQL-5.6/mysql-5.6.21-linux-glibc2.5-x86_64.tar.gz 2.解压 ta ...
- FenceSyne, flush, wait
我看了下queue, command 的fence这个东西,它是做queque之间 queue和cpu之间同步用的 我理解下来就是这样 有两个condition ALL_GPU_COMMANDS_CO ...
- Usage of API documented as @since1.6+
Usage of API documented as @since1.6+ File ->Project Structure->Project Settings -> Modules ...