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网站建设的课,觉得性价 ...
随机推荐
- 终极CRUD-3-用Jackson解析json
目录 1 jackson json基本介绍和使用 2 jackson 常用的注解 2.1@JsonProperty 2.2 @JsonIgnore 2.3 @JsonIgnoreProperties ...
- vue开发小程序简介
开发环境搭建 nodejs 安装最新版的nodejs,同时安装cnpm包管理器 jdk1.8 apache-maven3.3.9 Intellij Idea2018 [后端开发工具] vscode[前 ...
- Java命令行的基本编译运行
1.编译 编写MyProgram.java文件,内容如下: public class MyProgram { public static void main(String[] args) { Syst ...
- JSONModel解析Dictionary To Model /JSON To Model
你在把字典转成object的时候还在按下面这样: self.id = [jsonDict objectForKey:@"id"]; self.name = [jsonDict ob ...
- 使用charles远程调试iOS移动应用
做iOS移动应用很多开发者会喜欢抓网络发包.回包来联调服务端借口以及定位其他网络问 题.如果在Windows系统可以使用fiddler来做iOS的远程代理,只要fiddler所在系统与iOS设备同时连 ...
- dedecms中的模版不解析dede:global
先安装dedecms,配置好各项内容,栏目,网站内容等. 最近在使用dedecms做后台开发一个手机网站的项目,前端设计都是用html5来设计.很多地方都需要使用dede:global标签来调取全局变 ...
- MFC中 用Static控件做超链接（可以实现变手形、下划线、字体变色等功能）
1.新建一个基于对话框的工程MyLink,在对话框中拖一个Static控件,ID可改为IDC_SLink. 2.在头文件中添加成员变量: private: CRect m_Rect; CFont* m ...
- ylb：SQL 表的高级查询-多表连接和子查询
ylbtech-SQL Server: SQL Server-表的高级查询-多表连接和子查询 SQL Server 表的高级查询-多表连接和子查询. 1,ylb:表的高级查询-多表连接和子查询 返回顶 ...
- Asp.net对文件夹和文件的操作类
using System; using System.IO; using System.Web; namespace SEC { /**//// /// 对文件和文件夹的操作类 /// public ...
- OSG+VS2010+win7环境搭建 （转）
OSG+VS2010+win7环境搭建 Win7下 osg+vs2010环境搭建 一．相关准备 a) Osg源码 当前最新版:OpenSceneGraph的3.0.0.zip 下载链接: http:/ ...