仿天猫商品品牌图片墙换一批动画特效

查看演示立即下载

插件描述：这是一款使用纯js和CSS3来制作的仿天猫商品品牌图片墙换一批动画特效。该特效中，当用户点击了品牌图片墙上右下角的按钮时，所有的品牌图片会水平翻转360度，然后显示另外一批品牌图片。

2017-01-14更新（修复火狐翻浏览器转后，还是同一张图片问题，感谢heroes7提供的方法）

使用方法

在页面中引入jquery和样式文件style.css。

<script src="path/to/jquery.min.js"></script>
<link href="path/to/style.css" rel="stylesheet">

HTML结构

该品牌图片使用一个无序列表作为HTML结构：

<ul id="iconWall">
  <li>
    <div class="img-3d">
      <div class="img-back"> <img src="img/icon1.jpg" alt=""> </div>
      <div class="img-front"> <img src="img/icon11.jpg" alt=""> </div>
    </div>
    <div class="mask"> <img src="img/heart.png" alt="">
      <p>关注人数 323.4万</p>
      <a href="javascript:">点击进入</a> </div>
  </li>
  <li>
    <div class="img-3d">
      <div class="img-back"> <img src="img/icon2.jpg" alt=""> </div>
      <div class="img-front"> <img src="img/icon12.jpg" alt=""> </div>
    </div>
    <div class="mask"> <img src="img/heart.png" alt="">
      <p>关注人数 323.4万</p>
      <a href="javascript:">点击进入</a> </div>
  </li>
  ......
  <li id="btnRefresh">
    <div class="iconRefresh"></div>
    <span>换一批</span> </li>
</ul>

JavaScript

在页面DOM元素加载完毕之后，通过下面的js代码来完成按钮的点击事件，以及品牌图片的翻转动画。

window.onload = function() {
    var clickTimes = 1;
    //总列数  
    var lineCount = 6;
    var btnRefresh = document.querySelector("#btnRefresh");
    var iconRefresh = document.querySelector(".iconRefresh") var img3DList = document.querySelectorAll(".img-3d");
    var len = img3DList.length;
    btnRefresh.onclick = function() {
        iconRefresh.style.transition = ".3s linear";
        iconRefresh.style.transform = "rotate(" + 360 * clickTimes + "deg)";
        for (var i = 0; i < len; i++) {
            var colNum = parseInt(i / lineCount);
            var rowNum = i % lineCount;
            var delayTime = (colNum + rowNum) * 100;
            img3DList[i].style.transition = ".3s " + delayTime + "ms linear";
            img3DList[i].style.transform = "rotateY(" + 180 * clickTimes + "deg)";
        }
        clickTimes++;
    }
}

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery列表选择美化插件uichoose
下一个特效： jQuery实现弹幕实例