关键词： js手风琴 js百叶窗 js百页窗
(附件)
实现原理解读
使用两层for循环实现，
第一层有三个功能，分别给第个li：
添加索引
预设位置
添加事件
第二层有两个功能，整理图片位置：
鼠标的li，以及前面那些li的位置
鼠标后面那些li的位置
HTML/CSS 解读：略
HTML/CSS代码：
<!-- Author: XiaoWen Create a file: 2016-12-14 09:41:11 Last modified: 2016-12-15 12:56:23 Start to work: Finish the work: Other information: --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴2</title> <style> *{ margin: 0; padding: 0; } body{ background: #ccc; } div{ width: 1100px; height: 300px; margin: auto; background: #ddd; margin-top: 40px; border-radius:10px; border: 10px solid #fff; box-shadow:0 0 20px #eee; } ul,li{ list-style:none; } img{ vertical-align: bottom; width: 600px; height: 300px; } ul{ position: relative; overflow: hidden; width: 1100px; height: 300px; } ul li{ position: absolute; width: 600px; height: 300px; overflow: hidden; } </style> </head> <body> <div> <ul> <li><img src="1.jpg" alt="图片1"></li> <li><img src="2.jpg" alt="图片2"></li> <li><img src="3.jpg" alt="图片3"></li> <li><img src="4.jpg" alt="图片4"></li> <li><img src="5.jpg" alt="图片5"></li> <li><img src="6.jpg" alt="图片6"></li> </ul> </div> </body> </html>
实现原理的代码分析
两个for循环的js代码： 无分析的代码：
for(var i=0;i<aLi.length;i++){ aLi[i].index=i; if(i!=0){ aLi[i].style.left=600+100*(i-1)+'px'; } aLi[i].onmouseover=function(){ for(var j=0;j<aLi.length;j++){ if(j<=this.index){ move(aLi[j],'left',100*j) }else{ move(aLi[j],'left',600+100*(j-1)) } } } }
有分析的代码:
for(var i=0;i<aLi.length;i++){ //给每个li添加自定义属性 index ，用来保存i供鼠标函数使用 aLi[i].index=i; //预置图片位置 if(i!=0){ //其他图片位置，在第一张图片后面。 //第一张宽度+后面每张图片显示出来的距离*(后面图片的下标-1)。 //为什么-1 //因为第2张图离第1张图0单位距离，第3张离第1张1单位距离…… aLi[i].style.left=600+100*(i-1)+'px'; } //给每张图片添加鼠标移入事件 aLi[i].onmouseover=function(){ for(var j=0;j<aLi.length;j++){ //若鼠标在第1张图片上时 //第1次循环， j=0 ；index=0 ；j <= this.index 是；执行 move(aLi[0],'left',100*0) ；第1张图片位置0不动 //第2次循环， j=1 ；index=0 ；j <= this.index 否；执行 move(aLi[1],'left',600+100*(1-1)) ；第2张图片位置600不动 //第3次循环， j=2 ；index=0 ；j <= this.index 否；执行 move(aLi[2],'left',600+100*(2-1)) ；第3张图片位置700不动 //直到循环完成，都不动... //若鼠标在第2张图片上时 //第1次循环， j=0 ；index=1 ；j <= this.index 是；执行 move(aLi[0],'left',100*0) ；第1张图片位置0不动 //第2次循环， j=1 ；index=1 ；j <= this.index 是；执行 move(aLi[1],'left',100*1) ；第2张图片动，left从600变到100 //第3次循环， j=2 ；index=1 ；j <= this.index 否；执行 move(aLi[2],'left',600+100*(2-1)) ；第3张图片位置700不动 //直到循环完成，都不动... if(j<=this.index){ //鼠标所在图片前面那些图片的位置 move(aLi[j],'left',100*j) }else{ //鼠标所在图片后面那些图片的位置，j-1是为了规律100*0【1-1】，100*1【2-1】...的体现 //也就是后面的图片距离鼠标所在图片的位置倍数。 move(aLi[j],'left',600+100*(j-1)) } } } }
单属性运动函数
无分析的代码：
function move(obj,attr,iTarget){ clearInterval(obj.timer) obj.timer=setInterval(function(){ var speed=(iTarget-parseInt(getStyle(obj,attr)))/10; speed=speed>0 ? Math.ceil(speed) : Math.floor(speed); if(iTarget==parseInt(getStyle(obj,attr))){ clearInterval(obj.timer); }else{ obj.style[attr]=parseInt(getStyle(obj,attr))+speed+'px'; } },10) }
多属性运动函数
有分析的代码：
function startMove(obj,json,fnEnd){ //每次调用时，需要只有一个定时器在工作，在开始运动时关闭所有定时器 //并且关闭或开启都是当前物体的定时器，防止与页面上其他定时器冲突，使每个定时器互不干扰 clearInterval(obj.timer); obj.timer=setInterval(function(){ var bStop=true; //假设所有值都已经到达目标值 for(var name in json){ var iTarget=json[name]; //所有的目标值 if(name == 'opacity'){ // opacity 比较特殊，值是0到1之间 var cur=parseInt(parseFloat(getStyle(obj,name))*100); //转小数为整数，让下面的代码容易计算 }else{ var cur=parseInt(getStyle(obj,name)); //cur是物体当前数值 } var speed=(iTarget-cur)/10; //整体的速度，数字越小运动越慢 speed=speed>0?Math.ceil(speed):Math.floor(speed); if(name=='opacity'){ obj.style.opacity=(cur+speed)/100; }else{ obj.style[name]=cur+speed+'px'; //除了opacity之外其他都需要px }; //当某个值没有到目标值时 if(cur!=iTarget){ bStop=false; }; }; if(bStop){ clearInterval(obj.timer); //当前运动结束后的操作，也就是第三个参数 if(fnEnd){ //如果有这个参数，就执行 fnEnd(); } } },20) }
完整效果代码
<!-- Author: XiaoWen Create a file: 2016-12-14 09:41:11 Last modified: 2016-12-15 13:23:08 Start to work: Finish the work: Other information: --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴2</title> <style> *{ margin: 0; padding: 0; } body{ background: #ccc; } div{ width: 1100px; height: 300px; margin: auto; background: #ddd; margin-top: 40px; border-radius:10px; border: 10px solid #fff; box-shadow:0 0 20px #eee; } ul,li{ list-style:none; } img{ vertical-align: bottom; width: 600px; height: 300px; } ul{ position: relative; overflow: hidden; width: 1100px; height: 300px; } ul li{ position: absolute; width: 600px; height: 300px; overflow: hidden; } </style> </head> <body> <div> <ul> <li><img src="1.jpg" alt="图片1"></li> <li><img src="2.jpg" alt="图片2"></li> <li><img src="3.jpg" alt="图片3"></li> <li><img src="4.jpg" alt="图片4"></li> <li><img src="5.jpg" alt="图片5"></li> <li><img src="6.jpg" alt="图片6"></li> </ul> </div> <script> var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ //给每个li添加自定义属性 index ，用来保存i供鼠标函数使用 aLi[i].index=i; //预置图片位置 if(i!=0){ //其他图片位置，在第一张图片后面。 //第一张宽度+后面每张图片显示出来的距离*(后面图片的下标-1)。 //为什么-1 //因为第2张图离第1张图0单位距离，第3张离第1张1单位距离…… aLi[i].style.left=600+100*(i-1)+'px'; } //给每张图片添加鼠标移入事件 aLi[i].onmouseover=function(){ for(var j=0;j<aLi.length;j++){ //若鼠标在第1张图片上时 //第1次循环， j=0 ；index=0 ；j <= this.index 是；执行 move(aLi[0],'left',100*0) ；第1张图片位置0不动 //第2次循环， j=1 ；index=0 ；j <= this.index 否；执行 move(aLi[1],'left',600+100*(1-1)) ；第2张图片位置600不动 //第3次循环， j=2 ；index=0 ；j <= this.index 否；执行 move(aLi[2],'left',600+100*(2-1)) ；第3张图片位置700不动 //直到循环完成，都不动... //若鼠标在第2张图片上时 //第1次循环， j=0 ；index=1 ；j <= this.index 是；执行 move(aLi[0],'left',100*0) ；第1张图片位置0不动 //第2次循环， j=1 ；index=1 ；j <= this.index 是；执行 move(aLi[1],'left',100*1) ；第2张图片动，left从600变到100 //第3次循环， j=2 ；index=1 ；j <= this.index 否；执行 move(aLi[2],'left',600+100*(2-1)) ；第3张图片位置700不动 //直到循环完成，都不动... if(j<=this.index){ //鼠标所在图片前面那些图片的位置 move(aLi[j],'left',100*j) }else{ //鼠标所在图片后面那些图片的位置，j-1是为了规律100*0【1-1】，100*1【2-1】...的体现 //也就是后面的图片距离鼠标所在图片的位置倍数。 move(aLi[j],'left',600+100*(j-1)) } } } } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr] }else{ return getComputedStyle(obj)[attr] } } function move(obj,attr,iTarget){ clearInterval(obj.timer) obj.timer=setInterval(function(){ var speed=(iTarget-parseInt(getStyle(obj,attr)))/10; speed=speed>0 ? Math.ceil(speed) : Math.floor(speed); if(iTarget==parseInt(getStyle(obj,attr))){ clearInterval(obj.timer); }else{ obj.style[attr]=parseInt(getStyle(obj,attr))+speed+'px'; } },10) } function startMove(obj,json,fnEnd){ //每次调用时，需要只有一个定时器在工作，在开始运动时关闭所有定时器 //并且关闭或开启都是当前物体的定时器，防止与页面上其他定时器冲突，使每个定时器互不干扰 clearInterval(obj.timer); obj.timer=setInterval(function(){ var bStop=true; //假设所有值都已经到达目标值 for(var name in json){ var iTarget=json[name]; //所有的目标值 if(name == 'opacity'){ // opacity 比较特殊，值是0到1之间 var cur=parseInt(parseFloat(getStyle(obj,name))*100); //转小数为整数，让下面的代码容易计算 }else{ var cur=parseInt(getStyle(obj,name)); //cur是物体当前数值 } var speed=(iTarget-cur)/10; //整体的速度，数字越小运动越慢 speed=speed>0?Math.ceil(speed):Math.floor(speed); if(name=='opacity'){ obj.style.opacity=(cur+speed)/100; }else{ obj.style[name]=cur+speed+'px'; //除了opacity之外其他都需要px }; //当某个值没有到目标值时 if(cur!=iTarget){ bStop=false; }; }; if(bStop){ clearInterval(obj.timer); //当前运动结束后的操作，也就是第三个参数 if(fnEnd){ //如果有这个参数，就执行 fnEnd(); } } },20) } </script> </body> </html>
附：CSS值获取函数
关于JS获取CSS值的研究请移步：
《JS获取元素CSS值的各种方法分析》
http://www.cnblogs.com/daysme/p/6117174.html
function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr] }else{ return getComputedStyle(obj)[attr] } }