js仿天猫换一换图片墙~~

最新推荐文章于 2022-03-17 16:45:27 发布
最新推荐文章于 2022-03-17 16:45:27 发布
阅读量1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MayJay517/article/details/78230789
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>仿天猫图片墙</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<style type="text/css">
*{margin: 0;padding: 0;}
</style>
</head>
<body>
<div class="htmleaf-content">
<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>
       <div class="img-3d">
           <div class="img-back">
               <img src="img/icon3.jpg" alt="">
           </div>
           <div class="img-front">
               <img src="img/icon13.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/icon4.jpg" alt="">
           </div>
           <div class="img-front">
               <img src="img/icon14.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/icon5.jpg" alt="">
           </div>
           <div class="img-front">
               <img src="img/icon15.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/icon6.jpg" alt="">
           </div>
           <div class="img-front">
               <img src="img/icon16.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/icon7.jpg" alt="">
           </div>
           <div class="img-front">
               <img src="img/icon17.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/icon8.jpg" alt="">
           </div>
           <div class="img-front">
               <img src="img/icon18.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/icon9.jpg" alt="">
           </div>
           <div class="img-front">
               <img src="img/icon19.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/icon10.jpg" alt="">
           </div>
           <div class="img-front">
               <img src="img/icon20.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/icon21.jpg" alt="">
           </div>
           <div class="img-front">
               <img src="img/icon31.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/icon22.jpg" alt="">
           </div>
           <div class="img-front">
               <img src="img/icon32.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/icon23.jpg" alt="">
           </div>
           <div class="img-front">
               <img src="img/icon33.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/icon24.jpg" alt="">
           </div>
           <div class="img-front">
               <img src="img/icon34.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/icon25.jpg" alt="">
           </div>
           <div class="img-front">
               <img src="img/icon35.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/icon26.jpg" alt="">
           </div>
           <div class="img-front">
               <img src="img/icon36.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/icon27.jpg" alt="">
           </div>
           <div class="img-front">
               <img src="img/icon37.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/icon28.jpg" alt="">
           </div>
           <div class="img-front">
               <img src="img/icon38.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/icon29.jpg" alt="">
           </div>
           <div class="img-front">
               <img src="img/icon39.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/icon30.jpg" alt="">
           </div>
           <div class="img-front">
               <img src="img/icon41.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/icon42.jpg" alt="">
           </div>
           <div class="img-front">
               <img src="img/icon43.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/icon44.jpg" alt="">
           </div>
           <div class="img-front">
               <img src="img/icon45.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/icon22.jpg" alt="">
           </div>
           <div class="img-front">
               <img src="img/icon13.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>
</div>
<script type="text/javascript">
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++;
}
}
</script>
</body>
</html>
MayJay517
关注
利用js简单完成度娘换一换
m0_63922807的博客
11-28 750
css部分 <style> * { margin: 0; padding: 0; } .bigbox { width: 700px; height: 200px; padding: 50px; border: 1px solid #000; margin: 1...
js css3仿天猫品牌图片墙翻转换一换代码
11-01
js css3仿天猫品牌图片墙翻转换一换代码
换一换js
weixin_34037515的博客
08-12 305
(function(){ var tit = $("#changes"), con = $("#wday>ul"), page = con.length, index = 0; tit.click(function(){ if(index < page){ ...
仿天猫商品品牌图片墙换一批动画特效
07-06
仿天猫商品品牌图片墙换一批动画特效
jQuery仿天猫商品品牌图片墙换一批动画特效
06-11
【jQuery仿天猫商品品牌图片墙换一批动画特效】 在网页设计和开发中，引入动态效果可以极大地提升用户体验，使得网站更具吸引力。天猫商品品牌图片墙的换一批动画特效就是一个很好的例子，它通过jQuery库实现，使得...
仿天猫商品品牌图片墙换一批动画特效特效代码
03-20
这是一款使用纯js和CSS3来制作的仿天猫商品品牌图片墙换一批动画特效。该特效中，当用户点击了品牌图片墙上右下角的按钮时，所有的品牌图片会水平翻转360度，然后显示另外一批品牌图片。 使用方法 在页面中引入...
仿天猫商品品牌图片墙换一批动画特效.zip
07-04
这是一款使用纯js和CSS3来制作的仿天猫商品品牌图片墙换一批动画特效。该特效中，当用户点击了品牌图片墙上右下角的按钮时，所有的品牌图片会水平翻转360度，然后显示另外一批品牌图片。 使用方法 在页面中引入...
js实现列表换一换（如招聘网站职位的换一换）
motian06的专栏
09-21 6456
后端数据 后端传递一个职位的数组，假定数组长度100   前端处理 循环这个数组 普通循环 列表长度100   添加js $('tr').slice(0, 5).show() //默认显示长度5$('a.change').click(function(){ $('tr').slice(5, 10).show(); $('tr').slice(0, 5).hide().app
JS 转换效果
weixin_44081699的博客
12-24 142
var arrLi= document.getElementById(“ul”).getElementsByTagName(“li”); var arrDiv=document.getElementsByClassName(“box”)[0].getElementsByTagName(“div”); for(var i=0;i&lt;arrLi.length;i=i+1){ arrLi[i...
js图片相册随机换一换代码
04-25
js网格图片相册换一换代码是一款可以点击换图，随机生成喵星人图，点击预览原图效果等。
js图片相册随机换一换特效代码
03-20
js网格图片相册换一换代码是一款可以点击换图，随机生成喵星人图，点击预览原图效果等。
点击换一组图片或者文字的javascript
08-12
点击切换一组图片，淘宝类似的换一组javascript效果，代码简洁易懂
jquery换一批代码
10-15
jquery换一批代码是实现，点击换一批处，可查看另一批内容
仿天猫html5
11-30
仿天猫商城的html代码前端，可编译成android和ios
JS实现六个数据为一组换一换
m0_46364033的博客
03-17 2121
想要实现的效果如下：（此代码仅对数据总数＞6时做处理，具体情况具体分析，主要就是为了实现：点击换一换时数据6个为一组，如此往复循环展示，且此div在页面中位置保持不变） JS代码如下：（！！提示其中divHtml只是我自己项目需要的样式） let metaData = res.data; // 获取到的数据 let len = metaData.length; // 如果得到的关键词数据长度大于6 if(len > 6){ // 处理数组，六个一小组 let num = 0; let mul
jquery换一换效果
weixin_45846263的博客
05-20 858
页面部分 <div class="wrapper"> <div class="tit"> <div class="left">百度热榜</div> <div class="right"> <span title="百度热搜榜" class="btnhuan">换一换</span> .
CSS3实战开发:仿天猫首页图片展示动画特效实战开发
cikegroup的专栏
08-09 283
各位网友大家好，我是陌上花会开，人称陌陌。今天我带领大家开发一个仿天猫首页图片展示动画特效的案例。一如往常，我既不提供源码给大家，也不提供Demo给大家，只是希望大家能跟着我的讲解，然后将代码一步步复制到本地，本人可以保证，页面上的代码复制到本地，绝对百分百运行，且得到与陌陌一样的运行效果。我这么做只为激起大伙的动手能力，望大家能明白我的用心。 好了，不废话了，直接本篇的实战开发吧。 我们看...
仿天猫图片墙代码（只有一部分）~~~
MayJay517的博客
10-12 700
仿天猫图片墙 *{margin: 0;padding: 0;}                                                                                                                                关注人数 323.4万
仿天猫商城系统 tmall_262 压缩文件分析
- “仿天猫商城”这一标签表明该压缩包可能包含与天猫商城类似的设计、功能或界面，用于模拟或学习目的。在IT行业中，仿制其他网站或应用程序的界面和功能是一个常见的学习和研究方式，同时也可能用于开发相似的应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值