手风琴图片浏览实现逻辑原理
定义页面整体结构
布局试图模型
采用absolute布局li元素,使li保存的图片能叠加错位显示在父元素div的固定范围内,超出位置设为隐藏
- 样式代码如下:
<style type="text/css">
body,ul {margin: 0; padding: 0;}
li {list-style: none;}
#box {
width: 800px;
height: 420px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
img { border: none; vertical-align: top; }
ul {
width: 800px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
ul li {
width: 800px;
position: absolute;
top: 0;
}
</style>
- 设置li位置的javaScript代码:
var oUl = document.getElementsByTagName('ul')[0];
var aLiUl = oUl.getElementsByTagName('li');
for(var i = 1; i<aLiUl.length;i++){
aLiUl[i].style.left = (800-160)+(i-1)*40+"px";
}
- 运动逻辑模型
- 为每个li即img图片设置onmouseover事件,当鼠标移入,让当前图片移动:
- 移动的限制:为每个li设置index,当鼠标移入时判断鼠标移入的li的index与当前展开的li的index比较,
- 若小于:让index大于鼠标移入图片index的图片向右移动到固定位置
- 若大于:让index小于鼠标移入图片index的图片向左移动到固定位置
- 控制逻辑运动代码:
- 移动的限制:为每个li设置index,当鼠标移入时判断鼠标移入的li的index与当前展开的li的index比较,
for(var i = 0;i<aLiUl.length;i++){
aLiUl[i].index = i;
aLiUl[i].onmouseover = function(){
for(var i = 0;i<aLiUl.length;i++){
if(i<= this.index){
startMove(aLiUl[i],{left:i*40});
}else{
startMove(aLiUl[i],{left:(800-160)+(i-1)*40});
}
}
}
- 效果图片