聊一下心得:CSS写得好,真的可以省很多js代码哈,写起来也简单很多,所以要好好掌握js哈,所以这里也提供了CSS代码,如果您觉得您的CSS写得不错,可以直接看js代码哦
<>强效果:
1,点击视图开始进入照片墙
2,只有一张图片是在中间显示,其他图片在中间的图片两侧随机排序,并且随机旋转一定的角度,层级也是随机的哦
3点击上面的导航条,可以让对应的图片在中间显示
4点击中间的图片该照片翻转,显示背面(照片的描述信息)
<>强实现过程:
1,用数据生成结构(模拟的数据,此处不再提供)
2,对所有图片进行排序
3,计算两侧图片的随机范围
4,控制图片翻转
5,控制导航按钮切换图片
6,遮罩层动画实现
<强> HTML代码:
& lt; body>
& lt; div类=皃hoto_wall”比;
& lt; div类="照片"比;
& lt; !——每张图片的最外层,用来控制图片的旋转和位移——比;
& lt; div类=" photo_i前面" id=" photo_ {{id}}”在
& lt; !——内层用来控制图片的3 d翻转——比;
& lt; div类=皃hoto_3d”比;
& lt; !——每个照片的正面——比;
& lt; div class=" photo_side photo_front”比;
& lt; p> & lt; img {{src}}={{img}}“祝辞& lt;/p>
& lt; h4>{{标题}}& lt;/h4>
& lt;/div>
& lt; !——每个照片的反面——比;
& lt; div class=" photo_side photo_back”比;
& lt; p class=" desc”在{{desc}} & lt;/p>
& lt;/div>
& lt;/div>
& lt;/div>
{{分裂}}
& lt;/div>
& lt; div类=耙跤啊北?
& lt; div类="开始"祝辞开始View 
