这是一款使用纯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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!