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 ...
- Nop源码分析一
从Global.asax文件开始逐层分析Nop的架构. Application_Start()方法作为mvc启动的第一个方法. 1,首先初始化一个引擎上下文,如下面的代码: EngineContext ...
- LeetCode OJ 274. H-Index
Given an array of citations (each citation is a non-negative integer) of a researcher, write a funct ...
- VS2010无法修改资源文件
最近,因为公司开发的需要,对开发环境进行全面的升级,在这其中也遇到了不少问题,在之后将陆续整理出来,以便以后查看. 之前开发环境:VS2008,ArcGIS9.3,ArcEngine9.3,Oracl ...
- chm手册显示已取消到该网页的导航
解决:在chm右键查看有没有解除锁定选项.1.右键单击chm文件,选择属性:2.在最下面点击“解除锁定”并确定后,再次打开chm,就正常了
- 浏览器对象模型BOM
第二章 浏览器对象模型BOM 1.作用:操作窗口:提供导航对象:提供定位对象:浏览器上方的地址栏:提供跟屏幕相关对象:提供对Cookie的支持 2.根元素:window:代表整个窗口:window,o ...
- （必看）ping值不代表网速
在下售卖美国.香港VPN服务器多年,在于客户的交流中,最多关心的就是ping值速度,认为ping速度越低速度越快,以此来评判一台VPN服务器的速度快慢,这其实是一个误区!现在来详细说明下. 1.pin ...
- 2227 邮票--FUoj(链接表+树的直径)
http://acm.fzu.edu.cn/problem.php?pid=2227 我感觉这道题可以随意搞 题目大意: 给你的一个图就是一条链,但是不知道起始点和结束点,而且每个点只会访问一次. 因 ...
- 数据模型类对比 反射c#
using System;using System.ComponentModel.DataAnnotations; public class LoginModel { ...
- 【转】让Chrome化身成为摸鱼神器，利用Chorme运行布卡漫画以及其他安卓APK应用教程
下周就是十一了,无论是学生党还是工作党,大家的大概都会有点心不在焉,为了让大家更好的心不在焉,更好的在十一前最后一周愉快的摸鱼,今天就写一个如何让Chrome(google浏览器)运行安卓APK应用的 ...