前端学习之路之图片(魔方旋转)

前面实现了图片的轮播,同时实现了自动轮播图片.图片轮播的就是通过js监听通过改变css样式实现图片轮播的.改文章也是图片的轮播不过是增加了一些css样式,是的旋转的时候更像是一个魔方

html代码块

<!-- 魔方 --><div class="square"><ul class="s-img"><li><img src="../images/pic.png"></li><li><img src="../images/pic2.png"></li><li><img src="../images/pic3.png"></li><li><img src="../images/pic4.png"></li><li><img src="../images/pic2.png"></li><li><img src="../images/pic3.png"></li></ul></div><!-- 手动点击旋转 --><div class="toc"><span class="img_1"></span><span class="img_2"></span><span class="img_3"></span><span class="img_4"></span><span class="img_5"></span><span class="img_6"></span></div>

CSS样式设置

/* 魔方样式设置部分 */.square{width: 200px;height: 200px;margin: 200px auto;margin-bottom: 100px;}ul{position: relative;transform-style: preserve-3d;transition: all .7s cubic-bezier(0.175, 0.885, 0.32, 1.275);width: 100%;height: 100%;}li{position: absolute;top: 0;left: 0;list-style: none;width: 100%;height: 100%;border: 1px solid pink;}img{width: 200px;height: 200px;}/* 图片的子折叠板块，形成可以旋转的魔方 */ul li:nth-child(1) {transform: translateZ(100px);}ul li:nth-child(2) {transform: rotateY(180deg)  translateZ(0) ;}ul li:nth-child(3) {transform: rotateY(90deg) translateZ(100px);}ul li:nth-child(4) {transform: rotateY(-90deg) translateZ(100px);}ul li:nth-child(5) {transform: rotateX(90deg) translateZ(100px);}ul li:nth-child(6) {transform: rotateX(-90deg) translateZ(100px);}/* 用于点击方块的模式 */.img_1{background-image: url(../images/pic.png);}.img_2{background-image: url(../images/pic2.png);}.img_3{background-image: url(../images/pic3.png);}.img_4{background-image: url(../images/pic4.png);}.img_5{background-image: url(../images/pic2.png);}.img_6{background-image: url(../images/pic3.png);}span{display: inline-block;width: 45px;height: 30px;background-size: contain;border: 1px solid white;}.toc{width: 350px;margin: 0 auto;}/* 辅助JS块样式设置 */.square .img_1 {transform: translateZ(-100px);}.square .img_2 {transform: translateZ(-100px) rotateX(-90deg) ;}.square .img_3 {transform:  translateZ(-100px) rotateY(-90deg) ;}.square .img_4 {transform: translateZ(-100px) rotateY(90deg) ;}.square .img_5 {transform: translateZ(-100px) rotateX(-90deg) ;}.square .img_6 {transform: translateZ(-100px) rotateX(90deg) ;}</style>

window.onload = function(){//toc目录设置var toc_img = document.querySelector('.toc');var square = document.querySelector('ul');var p_img = square.classList;var img_button = toc_img.querySelectorAll('span');var flage = '';// 每个板块添加点击事件img_button[0].onclick = function(e) {flage = img_button[0].className;square.setAttribute('class', flage);}img_button[1].onclick = function(e) {flage = img_button[1].className;square.setAttribute('class', flage);}img_button[2].onclick = function(e) {flage = img_button[2].className;square.setAttribute('class', flage);}img_button[3].onclick = function(e) {flage = img_button[3].className;square.setAttribute('class', flage);}img_button[4].onclick = function(e) {flage = img_button[4].className;square.setAttribute('class', flage);}img_button[5].onclick = function(e) {flage = img_button[5].className;square.setAttribute('class',flage);}
}

前端学习之路之图片(魔方旋转)相关推荐

前端学习之路之图片轮播(已实现自动轮播)
前端学习之路之图片轮播近期学习了不少的前端知识和前端的一些应用,今天呢就实现了一下图片的轮播效果,话不多说. 图片轮播的本质就是类似走马灯,当用户点击指示器的时候,需要轮播的图片发生偏移就行了. 使 ...
前端开始学java_[Java教程]开启前端学习之路
[Java教程]开启前端学习之路 0 2014-06-10 17:00:06 前言第一次在博客园写博客,写写自己开启前端学习之路.应该是受邢师兄的影响吧,不得不说邢师兄人很好,学习也很认真,师兄的前 ...
【转】一个40岁老程序员的前端学习之路｜2021 年中总结
40岁的老程序员感言时光给我留下了什么? 不知不觉间虚度了40年光阴,看着父母逐渐的苍老和孩子逐渐长大,看着自己发福的身材,已知道自己在这个陌生的城市里已经扎根,估计是很难再去哪里了.回首故里似乎和 ...
一个普通本科在校生的前端学习之路
原创西安前端交流会: 卡农 ovenzeze@qq.com 本文章同步发表在wdShare西安前端交流会网站.我的个人博客以及segmentFault和掘金. 转载请注明出处这是西安初级前端群里边 ...
前端学习之路---CSS
CSS学习内容下一篇 javascript基础(1) 1. 学会使 ...
前端从入门到精通（记录自己的前端学习之路）都是一些自己做的笔记
一.网页界面的基础认知 ①网页由哪些组成:音频.视频.超链接.图片.文字 ②我们看到的网页背后的本质是:(右击查看网页源代码)前端程序员写的代码 ③前端的代码是通过什么软件转换成用户眼中的页面的:通过 ...
初学者最系统的前端学习之路
前端系统的学习网页=HTML(结构)+CSS(表现)+JavaScript(行为) HTML 1.我们的软件是包含了客户端和服务器端的,现在我们要学习的就是客户端的知识,客户端又包含了C/S和B/S ...
前端学习：jQuery--轮播图，旋转缩放平移动画，仿华为商城案例
1.火狐浏览器超好用的网页翻译插件火狐浏览器超好用的网页翻译插件_m0_59805351的博客-CSDN博客_火狐翻译插件哪个好学习目标:自主安装火狐浏览器网页翻译插件学习内容:提示:这里可以添加要 ...
一个40岁老程序员的前端学习之路｜2021 年中总结
40岁的老程序员感言时光给我留下了什么? 不知不觉间虚度了40年光阴,看着父母逐渐的苍老和孩子逐渐长大,看着自己发福的身材,已知道自己在这个陌生的城市里已经扎根,估计是很难再去哪里了.回首故里似乎和 ...

前端学习之路之图片(魔方旋转)

前端学习之路之图片(魔方旋转)

前端学习之路之图片(魔方旋转)相关推荐

最新文章

热门文章