您的位置：首页 > Web前端 > JQuery

2015-10-13 jQuery5实例

2015-10-16 17:04 627 查看

[b]jQuery(5) [/b]

一.扑克牌切换

<body>
<div class="ig ig1"><img src="image/1.jpg" /></div>
<div class="ig ig2"><img src="image/2.jpg" /></div>
<div class="ig ig3"><img src="image/3.jpg" /></div>
<div class="ig ig4"><img src="image/4.jpg" /></div>
<div class="ig ig5" title=""><img src="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="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;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航