详解vue+css3做交互特效的方法(3)
javascript方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <link rel="stylesheet" href="reset.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <style> .nav{ position: relative; } .nav li{ float: left; width: 100px; height: 40px; line-height: 40px; color: #fff; text-align: center; background: #09f; cursor: pointer; } .nav span{ position: relative; z-index: 2; } .nav .slider{ position: absolute; transition: all .5s cubic-bezier(0.4, -0.3, 0.57, 1.38); width: 100px; height: 40px; background: #f90; top: 0; left: 0; z-index: 1; } </style> <body> <div class="nav clear" id="nav"> <ul> <li><span>Tab One</span></li> <li><span>Tab Two</span></li> <li><span>Tab Three</span></li> <li><span>Tab four</span></li> <li><span>Tab five</span></li> <li><span>Tab six</span></li> </ul> <div class="slider"></div> </div> </body> <script type="text/javascript"> var oDiv=document.querySelector("#nav"),oLi=oDiv.querySelectorAll("li"),oSlider=document.querySelector(".slider"); oDiv.addEventListener("mouseleave",function () { oSlider.style.transform='translate3d(0,0,0)'; }) for(var i=0;i<oLi.length;i++){ oLi[i].index=i; oLi[i].addEventListener("mouseenter",function (e) { oSlider.style.transform='translate3d('+this.index*100+'px,0,0)'; }) } </script> </html>
4.轮播图运行效果
原理分析
蓝框的是li,黑框的是div
初始化状态
处于显示第二张图片的时候
看到上面,其实也就是控制ul的偏移量(transform:translate3d
)。计算公式和上面的滑块相似,索引(0|1|2|3
)*li
的宽度。不同的就是,ul的偏移量是取负数,因为ul是想左偏,上面的滑块是向右偏!
当第一张图片的时候,ul偏移量设置(transform: translate3d(0px, 0px, 0px)
)。
当第二张图片的时候,ul偏移量设置(transform: translate3d(-1000px, 0px, 0px)
)。
当第二张图片的时候,ul偏移量设置(transform: translate3d(-2000px, 0px, 0px)
)。以此类推,偏移量很简单的就能计算出来!