手风琴的原理及实现过程

xiaoxiao2021-03-25 123

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul { list-style: none } * { margin: 0; padding: 0; } div { position: relative; width: 1200px; height: 400px; margin: 50px auto; border: 1px solid red; overflow: hidden; } div li { width: 1200px; height: 400px; /*float: left;*/ position: absolute; } div ul { width: 1200px; } </style> </head> <body> <div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script> 手风琴主要是几个盒不触发事件时，会相同大小的排列在一排这里我们是通过定位的布局，每次移动鼠标改变他们的left值实现的；也可以用浮动改宽度的方式；

//1 获取元素 var box = document.getElementById("box"); var box = document.getElementById('box'); var lis = box.children[0].children;//操作的li var lis = box.children[0].children; for(var i =0; i < lis.length; i++){ lis[i].style.background = 'url(images/'+(i+1)+'.jpg)' animatess(lis[i], 'left', i*240); //鼠标不移入的时候，每个盒子的宽度相等 lis[i].index = i; lis[i].onmouseover = function(){ for(var j = 0; j < lis.length; j++){ if(lis[j].index <= this.index){ //当盒子移入时： animatess(lis[j],'left', j*100); //自身和之前的图片的left是i*100; }else{ animatess(lis[j], 'left', j*100+700); //自身之后的图片的left值是i*100+700; } } } lis[i].onmouseout = function(){ for(var j = 0; j < lis.length; j++){ animatess(lis[j], 'left', j*240); } } } // 还是那个运动函数 function animatess(tag,attr,target){ clearInterval(tag.timer); tag.timer = setInterval(function(){ var leader = parseInt(getStyle(tag,attr)) || 0; var step = (target - leader) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; tag.style[attr] = leader + 'px'; if(leader == target){ clearInterval(tag.timer); } },20) } function getStyle(tag,attr){ return tag.currentStyle ? tag.currentStyle[attr] : getComputedStyle(tag,null)[attr]; } </script> </body> </html>

转载请注明原文地址: https://ju.6miu.com/read-10925.html

技术

最新回复(0)