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网站建设的课,觉得性价 ...
随机推荐
- 当前标识(IIS APPPOOL\ASP.NET v4.0)没有对“C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files”的写访问权限 解决方案
今天搭环境的时候遇到这个问题,折腾了一阵子,最后在微软官方论坛上找到了解决方案. https://forums.asp.net/t/1566987.aspx?Current+Identity+does ...
- Springboot如何优雅的解决ajax+自定义headers的跨域请求
1.什么是跨域 由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.),凡是发 ...
- (入门SpringBoot)SpringBoot结合拦截器(七)
SpringBoot拦截器: 拦截器还是照旧和springmvc一样: @Componentpublic class MyInterceptor implements HandlerIntercept ...
- 基于Bootstrap的页面排版知识
标题: Bootstrap定义了所有HTML的标题样式,<h1>...<h6>标签或者在标签内加入.h1 class等可以得到一样的效果 效果: 副标题: 标签<smal ...
- #pragma预处理命令【转】
原文 : http://www.cnblogs.com/qinfengxiaoyue/archive/2012/06/05/2535524.html #pragma可以说是C++中最复杂的预处理指令了 ...
- 【前端GUI】—— 网站美工必须掌握的PS知识点&思维导图
前言:前端离不开与设计的沟通,有时候还需要自己上手改动甚至设计网页,所以这里简单梳理一下近期学习的“网站美工”相关知识及练习.(工作用不上的时候,自己玩儿着也蛮有意思的,哈哈(*ﾟ∀ﾟ*)~) 一.P ...
- 2017.2.16 开涛shiro教程-第十七章-OAuth2集成（一）服务器端
原博客地址:http://jinnianshilongnian.iteye.com/blog/2018398 根据下载的pdf学习. 开涛shiro教程-第十七章-OAuth2集成 1.OAuth2介 ...
- Python setup.py和MANIFEST.in文件
Setup.py文件 from setuptools import setup from codecs import open # 第三方依赖包及版本号 requires = ['beautifuls ...
- 【APT】NodeJS 应用仓库钓鱼,大规模入侵开发人员电脑,批量渗透各大公司内网
APT][社工]NodeJS 应用仓库钓鱼,大规模入侵开发人员电脑,批量渗透各大公司内网 前言 城堡总是从内部攻破的.再强大的系统,也得通过人来控制.如果将入侵直接从人这个环节发起,那么再坚固的防线, ...
- 我用select做多路复用踩到的坑
既然说是用select踩到的坑,那么就先直接贴一段使用select的代码上来瞅一下: bool SocketAction(int fd, const char* buf, size_t len, ui ...