天猫商品墙
- 网格状布局：
1. ul li 布局
2. float: left; 使得元素在一行。注意： 父元素解决高度塌陷
3. ul 设置固定宽，使得元素挤下去
4. 给父元素加一个 padding-left 和 padding-top 使得 背景色缝隙 充当 网格最左边的边线
5. 给 li 同意加 一个 margin-right 和 margin-bottom，使得 背景色缝隙 充当 网格线
- li 的结构
- 3D 空间
-
<div class="double_face"> <div class="img_nav_back"> <img src="./img/"/> </div> <div class="img_nav_front"> <img src="./img/"/> </div> </div>
- 加背景要给两张图片的 父元素 div 加
-
- mask 遮罩
- 1
- 切换按钮
- 鼠标进入，无过渡动画 #btn:hover { transition: 0; }
- 鼠标离开，有过渡动画
- 点击计次
- 翻转延迟差（斜线数组控制，取余获得列数）
-
- colNum = arrIndex % 总列数;
- rowNum = Math.floor(arrIndex / 总列数);
- 延时 arr[i] = (coLnum+rowNum)*100; 毫秒
-