2015-10-13 jQuery5实例
jQuery(5)
一.扑克牌切换
<body>
<div class="ig ig1"><img src="data:image/1.jpg" /></div>
<div class="ig ig2"><img src="data:image/2.jpg" /></div>
<div class="ig ig3"><img src="data:image/3.jpg" /></div>
<div class="ig ig4"><img src="data:image/4.jpg" /></div>
<div class="ig ig5" title=""><img src="data:image/5.jpg" /></div>
</body> .ig {
position: absolute;
cursor: pointer;
padding: 5px;
background-color: #ffffff;
box-shadow: 10px 10px 10px #cccccc;
border-radius: 5px;
} .ig1 {
top: 50px;
left: 50px;
z-index: 1;
} .ig2 {
top: 50px;
left: 690px;
z-index: 1;
} .ig3 {
top: 100px;
left: 210px;
z-index: 2;
} .ig4 {
top: 100px;
left: 530px;
z-index: 2;
} .ig5 {
top: 152px;
left: 370px;
z-index: 3;
}
$(function () {
$(".ig").click(function () {
$(this).stop(true, true);
$(".ig[title]").stop(true, true);
var left1 = $(this).css("left");
var top1 = $(this).css("top");
var zindex1 = $(this).css("z-index");
var left2 = $(".ig[title]").css("left");
var top2 = $(".ig[title]").css("top");
var zindex2 = $(".ig[title]").css("z-index");
$(".ig[title]").animate({ "left": left1, "top": top1 }, 1000).css("z-index", zindex1).removeAttr("title");
$(this).animate({ "left": left2, "top": top2 }, 1000).css("z-index", zindex2).attr("title", "");
});
});
二.砸金蛋
<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="file/1.mp3" id="a1"></audio> //添加音效
<audio src="file/2.mp3" id="a2"></audio> #eggs {
margin-top: 200px;
margin-left: 100px;
} .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: 185px;
left: 220px;
}
$(function () {
var iNum = Math.floor(Math.random() * 4 + 1);
$(".egg").mouseover(function () {
$("#t").animate({ "left": $(this).offset().left + 116 }, 10); //获取当前对象的方位，offset（）.left表示距离左边的距离
});
$(".egg").click(function () {
j++;
if (j > 1)
{
alert("只有一次砸蛋的机会");
return;
}
if ($(this).attr("data-isbreak") == "false") {
$(this).css("background-image", "url('../image/egg_2.png')");
var i = $(".egg").index($(this)) + 1;//表示当前砸的蛋是第几个蛋
if (i == iNum) {
document.getElementById("a2").play(); //调用音效的对象只能是js对象
}
else {
document.getElementById("a1").play();
}
$(this).attr("data-isbreak", "true");
}
else {
alert("这个蛋砸过了");
}
});
});
三.制造qq弹框效果
<div id="dmessage"><img src="data:image/message.jpg" /></div>
#dmessage {
position:fixed; //图片固定
bottom:0px;
right: -305px;
/*bottom: -203px;*/
}
$(function () {
$(":checkbox").attr("title", "nihao");
//$("#dmessage").animate({ "bottom": "0px" }, 2000, function () {
// setTimeout(function () {
// $("#dmessage").animate({ "bottom": "-203px" }, 2000);
// }, 5000);
//});
$("#dmessage").animate({ "right": "0px" }, 2000, function () {
setTimeout(function () {
$("#dmessage").animate({ "right": "-305px" }, 2000);
}, 5000);
});
});
四.会飞的li
<ul id="u1">
<li>奥巴马</li>
<li>习大大</li>
<li>金正恩</li>
<li>普京</li>
<li>奥朗德</li>
<li>安倍狗狗</li>
</ul>
<ul id="u2"></ul> ul {
list-style-type: none;
height: 210px;
width: 160px;
border: dashed 2px #0094ff;
line-height: 33px;
} li {
margin-left: 30px;
} #u1 {
float: left;
} #u2 {
float: right;
}
$("li").click(function () {
if ($(this).parent().attr("id") == "u1")
{
$(this).css("position", "absolute").animate({ "left": document.body.clientWidth - 70 }, 2000, function () {
$(this).appendTo($("#u2")).css("position", "static");
});
}
else
{
$(this).css("position", "absolute").animate({ "left":70 }, 2000, function () {
$(this).appendTo($("#u1")).css("position", "static");
});
}
});
五.轮播图效果
var i = 0;
function Show()
{
$(".ig").eq(i).show();
$(".ig").eq(i).siblings().hide();
$(".tab").eq(i).addClass("bg");
$(".tab").eq(i).siblings().removeClass("bg");
}
$(function () {
$(".tab").click(function () {
i = $(".tab").index($(this));
Show();
}); $(".ig").eq(0).siblings().hide();
setInterval(function () {
i++;
if (i == 6)
{
i = 0;
}
Show();
}, 4000);
<div>
<div class="ig"><img src="..." /></div>
<div class="ig"><img src="..." /></div>
<div class="ig"><img src="..." /></div>
<div class="ig"><img src="..." /></div>
<div class="ig"><img src="..." /></div>
<div class="ig"><img src="..." /></div>
</div>
<div id="tabs">
<div class="tab bg">1</div>
<div class="tab">2</div>
<div class="tab">3</div>
<div class="tab">4</div>
<div class="tab">5</div>
<div class="tab">6</div>
</div>
#tabs {
position: absolute;
top: 290px;
left: 270px;
}
.tab {
height: 24px;
width: 24px;
text-align: center;
line-height: 24px;
background-color: #0094ff;
float: left;
color: #fff;
margin-right: 5px;
cursor: pointer;
border-radius: 50%;
}
.bg {
background-color: #ff6a00;
}
2015-10-13 jQuery5实例的更多相关文章
- OpenGL学习日记-2015.3.13——多实例渲染
实例化(instancing)或者多实例渲染(instancd rendering)是一种连续运行多条同样渲染命令的方法.而且每一个命令的所产生的渲染结果都会有轻微的差异. 是一种很有效的.有 ...
- Murano Weekly Meeting 2015.10.13
Meeting time: 2015.October.13th 1:00~2:00 Chairperson: Serg Melikyan, PTL from Mirantis Meeting sum ...
- macOS 10.13 High Sierra odoo11 开发配置--完整版
1.抹盘安装macOS Sierra 10.13: 制作macOS安装启动盘参见:http://www.iplaysoft.com/macos-usb-install-drive.html 2.安装g ...
- Java-Runoob-高级教程-实例-字符串：13. Java 实例 - 字符串格式化
ylbtech-Java-Runoob-高级教程-实例-字符串:13. Java 实例 - 字符串格式化 1.返回顶部 1. Java 实例 - 字符串格式化 Java 实例 以下实例演示了通过 f ...
- 背水一战 Windows 10 (13) - 绘图: Stroke, Brush
[源码下载] 背水一战 Windows 10 (13) - 绘图: Stroke, Brush 作者:webabcd 介绍背水一战 Windows 10 之 绘图 Stroke - 笔划 Brush ...
- 4分钟apache自带ab压力测试工具使用： 2015.10.4
2015.10.44分钟apache自带ab压力测试工具使用:win8.1 wampserver2.5 -Apache-2.4.9-Mysql-5.6.17-php5.5.12-64b 可以参考一下部 ...
- macOs升级到10.13.1Beta || JAVA升级到最新版之后PhpStorm菜单栏问题
macOs升级到10.13.1Beta || JAVA升级到最新版之后PhpStorm菜单栏会消失,估计不止出现在PhpStorm,一系列jetbrains的产品可能都会有这个问题,包括eclipis ...
- 关于MacOS升级10.13系统eclipse菜单灰色无法使用解决方案
最近,苹果发布了macOS High Sierra,版本为10.13,专门针对mac pro的用户来着,至于好处大家到苹果官网看便是,我就是一个升级新版本系统的受益者,同时也变成了一个受害者:打开ec ...
- 解锁 vmware esxi 6.7 并安装 mac os 10.13
1.安装 esxi 6.7 2.下载 unlocker 2.1.1.zip 3.上传 unlocker 2.1.1.zip esxi的磁盘中 4.开启esxi的ssh登录 5.使用 ssh 登录 es ...
- MacOS 10.13.6 下装xcode 流程
1.最好先安装brew https://github.com/Homebrew/brew/releases 自动安装脚本 /usr/bin/ruby -e "$(curl -fsSL htt ...
随机推荐
- ZooKeeper之service discovery
Zookeeper整体介绍 ZooKeeper is a centralized service for maintaining configuration information, naming, ...
- 八、UIViewController们之间的协作——Segue
概述 正所谓“一生二,二生三,三生万物”,1个UIViewController没什么花样,多个UIViewController相互协作就有了各式各样丰富多彩的APP.但是UIViewControlle ...
- Linux VNC server 安装配置
1.安装vnc server [root@pxe ~]# yum install tigervnc-server -y 2.设置 vnc server 开机启动 [root@pxe ~]# chk ...
- JavaScript Dom 绑定事件
JavaScript Dom 绑定事件 // 先获取Dom对象,然后进行绑定 document.getElementById('xx').onclick document.getElementByI ...
- jQuery 查找元素2
jQuery 查找元素2 :first <ul> <li>list item 1</li> <li>list item 2</li> < ...
- Netbeans and Remote Host for C/C++ Developing
Netbeans and Remote Host for C/C++ Developing 很久以来,因为我不适应在 Linux 下使用 Vim, GCC, GDB 开发 C/C++ 程序,所以我一直 ...
- docker之Dockerfile实践
上一篇介绍了Dockerfile中使用的指令,现在开始进行指令实践 先查看下本地的镜像,选一个作为base image: [root@docker ~]# docker images REPOSITO ...
- JS设计模式（11）中介者模式
什么是中介者模式? 中介者模式:对象和对象之间借助第三方中介者进行通信. 定义:用一个中介对象来封装一系列的对象交互,中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的 ...
- Linux系统组成
1 系统组成 BootLoader:操作系统引导程序 内核: 文件系统:应用程序(用户开发的.网上下载的) 2 安装USB驱动 dongry@d-linux:~$ insmod usb_dnw.ko ...
- (转载)Unity UGUI点击不同Button执行不同的方法(无参方法)
将脚本随意挂在任何位置 但是这个btnParent一定是 按钮的父节点 脚本很简单自己敲一遍就全都明白了 上脚本 OnClickTest using UnityEngine; using Un ...