批量显示25个图片并延迟隐藏
步骤
先显示25张图片点击事件设定动画
显示25张图片
准备工作1
结构/样式
<input id=
"btnHide" type="button" value=
"btnHide">
<ul
class=
"box center">
</ul>
准备工作2
引入js文件
<script type="text/javascript" src="js/jquery-3.1.0.js"></script>
准备工作3
js脚本
25个图片，分5行5列，for循环插入li，每个li包含一个div，设置背景图片
var collum =
5;
var box=$(
".box");
for(
var i=
0;i<
25;i++){
$(
'<li><div class="item"></div></li>')
.find(
"div")
.css(
"background-image",
"url(images/"+i+
".jpg)")
.end()
.appendTo(box)
}
点击事件
设置一个按钮并绑定点击事件：
$(
"#btnHide").click(
function () {
}）
绑定动画
遍历25个div并随机动画隐藏和显示方式：
$(
".box .item").each(
function (i) {
$(
this)
.animate({
"opacity":
"0.05"},
Math.random()*
3000,
"swing")
.delay(
3000)
.animate({
"opacity":
"1"},
Math.random()*
3000,
"swing")
});
当前item隐藏，设置透明度为0.05，时间为0~3秒的随机数，类型方式为“swing”，延迟3秒后执行显示（设置透明度为1，时间为0~3秒的随机数，类型方式为“swing”）； 可以使用冒号来定义对齐方式：
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style type="text/css">
*{margin:0;padding:0}
ul{list-style: none}
.box{width:980px;height:500px;}
.box li{float:left;}
.item{width:196px;height:100px;background-size:cover;}
.center{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}
</style>
<script type="text/javascript" src="js/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(function () {
var collum = 5;
var box=$(".box");
for(var i=0;i<25;i++){
$('<li><div class="item"></div></li>')
.find("div")
.css("background-image","url(images/"+i+".jpg)")
.end()
.appendTo(box)
}
$("#btnShowPic").click(function () {
$(".box .item")
.css({"background-image":"url(images/7.jpg)",
"background-size":"auto"})
.each(function (i) {
var r=parseInt(i/collum);
var c=i%collum;
var rate = 100 / (collum - 1);
var x=rate*c;
var y=rate*r;
$(this).css("background-position",x+"%"+y+"%")
})
});
$("#btnHide").click(function () {
$(".box .item").each(function (i) {
$(this)
.animate({"opacity": "0.05"}, Math.random()*3000, "swing")
.delay(3000)
.animate({"opacity": "1"}, Math.random()*3000, "swing")
});
})
});
</script>
</head>
<body>
<input id="btnShowPic" type="button" value="showBigPicture">
<input id="btnHide" type="button" value="btnHide">
<ul class="box center">
</ul>
</body>
转载请注明原文地址: https://ju.6miu.com/read-969789.html
