HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 资源下载 开发工具 查看内容

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

2016-12-27 10:15| 发布者: admin| 查看: 460| 评论: 0

摘要: 这是一款使用纯js和CSS3来制作的仿**商品品牌图片墙换一批动画特效。该特效中,当用户点击了品牌图片墙上右下角的按钮时,所有的品牌图片会水平翻转360度,然后显示另外一批品牌图片。 ...
简要教程

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

 使用方法

在页面中引入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++;
  }
}       


鲜花

握手

雷人

路过

鸡蛋

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-21 16:37

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部