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. 不要 ...
随机推荐
- windows 系统下 Firefox hostadmin插件无法修改Host
firefox hostAdmin插件无法修改Host了,提示“ write hosts file failed check permissions”,肯定是权限出现了问题??? 使用管理员权限打开c ...
- 改进的SQL Express LocalDBB
介绍一种改进的SQL Express LocalDB LocalDB专门为开发商.它是非常容易安装,无需管理,但它提供了相同的T-SQL语言,编程表面和客户端供应商定期的SQL Server Expr ...
- [转载]Altium规则详解及设置
在Altium中进行PCB的设计时,经常会使用规则(Rule)来进行限定以确定线宽孔径等参数,此文将简要的介绍规则中的一些标量代表了什么. Electrical——电气规则.安全间距,线网连接等 Ro ...
- clang format 官方文档自定义参数介绍（中英文）
官方文档:http://clang.llvm.org/docs/ClangFormatStyleOptions.html 中文 在代码中配置样式 当使用 clang::format::reformat ...
- ubuntu搭建nfs网络文件系统
一.NFS服务简介 NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件系统的协定,由Sun公司开发,于1984年向外公布.功能是通过网络让不同的机器.不同的操 ...
- Asp.net MVC生命周期
Asp.net应用程序管道处理用户请求时特别强调"时机",对Asp.net生命周期的了解多少直接影响我们写页面和控件的效率.因此在2007年和2008年我在这个话题上各写了一篇文章 ...
- MongoDB数据库简介及安装
一.MongoDB数据库简介 简介 MongoDB是一个高性能,开源,无模式的,基于分布式文件存储的文档型数据库,由C++语言编写,其名称来源取自"humongous",是一种开源 ...
- jsAddress
demo.html <!DOCTYPE html><html><head> <title>纯JS省市区联动</title> <scri ...
- c# 调用分页（控制器端的）与时间的格式
1.在操作的model中: 2.在控制器中: , command.PageSize);//将从数据库获取到的集合进行分页 var gridModel = new DataSourceResult { ...
- IT人士感言2（转）
01. 自己的户口档案.养老保险.医疗保险.住房公积金一定要保管好.由于程序员行业每年跳槽一次,我不隐瞒大家,我至少换过5个以上的单位,这期间跳来跳去,甚至是城市都换过3个.还好户口没丢掉,其他都已经 ...