js手风琴图片切换实现原理及函数分析
关键词： 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]
}
}
js手风琴图片切换实现原理及函数分析的更多相关文章
- 前端设计——js实现图片切换的淡入淡出
1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...
- jquery实现图片切换和js实现图片切换
jquery实现图片切换: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- JS制作图片切换
<!DOCTYPE html> <html> <head> <title>纯JS制作简单的图片切换</title> <meta cha ...
- JS美女图片切换带视觉差
使用JS实现,多张图片动态切换查看效果:http://hovertree.com/texiao/js/21/ 效果图: 转自:http://hovertree.com/h/bjaf/iamhxcyk. ...
- js 插入图片切换，innerHTML
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
- js简单图片切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
- js 图片切换效果
效果如下: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&quo ...
- js应用之实现图片切换效果
数组的操作与应用 数组的定义 var 数组名=new Array(); //创建空数组 var 数组名=new Array(size);//创建指定数组长度的数组 var 数组名=new Array( ...
- atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js
atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js 1. 图片按钮的效果总结 1 1.1. 按钮图片自动缩放的. 1 1.2. 不要 ...
随机推荐
- Linq查询数据集取得排序后的序列号(行号)
今天群里有同学问如何用linq取结果集的行号,查了一下资料,发现linq有很简单的方法可以实现,花了几分钟写了一个测试用例,现记录下来,以备参考: /// <summary> /// 测试 ...
- 防止刷新/后退引起的重复提交问题的Java Token代码，非Struts
贴子转自http://hi.baidu.com/bobylou,转之前并没有验证文章里的方法是不是有效,估计原作者把它放到blog之前应该做过测试了吧. Struts本身有一套完善的防止重复提交表单的 ...
- oracle备忘
一.explain plan a)explain plan for select ... select * from table(dbms_xplan.display()); function dis ...
- CSS透明属性详解
.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; ...
- Azure IOT (EventHub + Stream Analytics + Table Storage)的使用
最近研究利用Azure的 Event hub ,Stream Analytics和TableStorage来实现IOT的一个方案, 利用Event hub来采集传感器设备数据值,然后输入到Stream ...
- UICollectionCell可移动的逻辑
- 计算机图形学——OpenGL开发库开发库
vc++6.0 有 OpenGL 的东西.有头文件 GL.H, GLAUX.H, GLU.H 但没有 GLUT 软件包/工具包 如果想使用glut.h的话必须自己添加. 首先下载 OpenGL开发库, ...
- js之函数
1.倒计时定时器 timename=setTimeout("function()",delaytime); clearTimeout(timename); 2.循环定时器 time ...
- oracle 游标使用大全
转:http://www.cnblogs.com/fjfzhkb/archive/2007/09/12/891031.html oracle的游标和例子! 游标-----内存中的一块区域,存放的是se ...
- 使用jquery的trigger方法优化页面代码
我们做页面级联的时候经常会用到ajax处理数据,会为下拉菜单编写change事件. //城市和区域联动 $("#City").change(function () { var ci ...