显示25个图片并隐藏显示

最新推荐文章于 2020-08-14 11:29:31 发布

VR46

最新推荐文章于 2020-08-14 11:29:31 发布

阅读量366

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_36913028/article/details/53444814

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

批量显示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>