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

所属分类:媒体-图片展示

 8634  109  查看评论 (12)
仿天猫商品品牌图片墙换一批动画特效 ie兼容8

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++;
	}
}
相关插件-图片展示

Intense Images―Javascript库在全屏查看图像

Intense Images是一个独立的javascript库用于查看全屏下超出屏幕大小的图片。使用触摸/鼠标位置的平移或垂直移动。
  图片展示
 10389  32

仿微信朋友圈图片展示效果

仿微信朋友圈图片展示效果
  图片展示
 23700  134

css3控制遮罩层

css3控制图片遮罩层
  图片展示
 11223  28

jQuery仿京东商品放大镜

jQuery重写仿京东商品放大镜,使用更简单
  图片展示
 7844  145

讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币

    飘逸影 0
    2017/8/3 14:57:45
    狂点有鬼畜效果get√,有点爽!
        醉氧白沙0
        2017/9/7 14:28:13

        还行吧

    回复
    川之舞 0
    2017/7/13 17:32:54

    怎么解决连续点击问题,我想点击一次执行完才会重新执行

        醉氧白沙0
        2017/9/7 14:28:49
        看下插件里面点击事件异步的
    回复
    彦小石 0
    2017/7/6 10:14:00

    在ie中旋转之后就没图片了,再旋转一次才有。怎么解决

    回复
    此生只有他 0
    2017/6/2 10:39:40
    最晴天 0
    2017/1/13 15:01:15

    我也要试着做一下

    回复
    heroes7 3
    2017/1/11 11:01:28

    兼容火狐的解决方案 :

    修改CSS3 

    .img-3d{
        transform-style: preserve-3d;
        backface-visibility: hidden;
    }
        醉氧白沙0
        2017/9/7 14:29:32
        thank s
    回复
    heroes7 0
    2017/1/11 11:01:25

    火狐翻转后,还是同一张图片。。。

    回复
    SiriBen 0
    2017/1/11 10:01:30

    效果不错,估计需要调整一下浏览器的兼容问题,不过在360上的确挺流畅的

    回复
    cupcake 0
    2017/1/10 17:01:38
    这个东西放在firefox里会有兼容性问题耶 回复
取消回复