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. 不要 ...
随机推荐
- phpmyadmin
下载地址:https://www.phpmyadmin.net/ 详情:http://baike.baidu.com/link?url=OIngLv0mpiYTZl_sCEmryWkHgUYqZeHr ...
- oracle job草稿
sa -- 声明job DECLARE job2014_12_16 NUMBER; BEGIN DBMS_JOB.SUBMIT(job2014_12_16, -- 这个参数是out类型 'syncv5 ...
- gcc编译时指定链接库的查找目录
gcc编译时,如果需要链接的库的目录不在标准目录,则需要通过将保护库的目录/aa/bb/cc通过-L/aa/bb/cc 添加到搜索路径中,如: gcc -o xmltest xml_test.cpp ...
- Selenium2+python自动化17-JS处理滚动条
前言 selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了. 常见场景: 当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到,会报元素不可见的. 这时候 ...
- Intellij Idea使用技巧、快捷键
1.Idea设置字体大小:file -> setting -> editor -> colors&font -> save as并自定义 -> font -> ...
- ORA-01439: column to be modified must be empty to change datatype
修改数据库字段类型,但是由于数据表已经存在数据,无法修改: 显示错误: 写道 ORA-01439: column to be modified must be empty to change dat ...
- Python：集合
set集合: 特点:无序,元素不重复 功能:关系测试,去重 集合创建: >>> s = set('python') >>> s {'p', 't', 'y', 'h ...
- RRDTool 三个命令的使用
要了解rrdtool如何使用就要先从rrd的数据存储方式开始,rrdtool就是为了操作这个数据库的工具,抄来下面一段文字解释. 0x01 什么是rrd数据库 所谓的“Round Robin” 其实是 ...
- sublime txt 设置在浏览器预览
1. 安装SideBarEnhancements插件 ctrl+shift+p —> Install Package —> 找到SideBarEnhancements 2. 配置预览快捷键 ...
- Daily Scrum 12.9
今日完成任务: 修复了提交回答,自动消除换行符,导致文本显示混乱的BUG.解决个人信息修改界面中,问题显示顺序不对的BUG.基本完成数据库接口webservice工作.但引入的异常还未修复. 遇到困难 ...