可以先看下效果:鼠标移上去之后图片会展开,移到上面的照片会遮住下面的图片
其实大体的原理是就是,让他们的宽度和长度一样,鼠标移动上之后,鼠标所在的图片拉长,并且将下面的图片遮住,依次这样轮番
具体的逻辑就是先找到这些图片信息,然后给个事件鼠标移上或是移除就改变图片的长度
(1)先建个div放这些图片
<div id="box"> <!--外面的框架-->
<ul>
<li><img src="l1.jpg" /></li> <!--图片-->
<li><img src="l2.jpg" /></li>
<li><img src="l3.jpg" /></li>
<li><img src="l4.jpg"/></li>
<li><img src="l5.jpg"/></li>
</ul>
</div>
(2)给这些div编写样式
<style type="text/css">
*{
margin:0px auto;
padding:0px;
}
ul {
list-style: none; /*去掉前面的点*/
}
div {
width: 1150px; /*div的长宽高,还有超出隐藏*/
height: 400px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
}
div li {
width: 240px;
height: 400px;
float: left;
}
div ul {
width: 1300px;
}
</style>
(3)js代码
<script type="text/javascript">
//找人
var box = document.getElementById("box");
var ul = box.children[0];
var lis = ul.children;
//循环遍历 lis 绑定背景图
for (var i = 0; i < lis.length; i++) {
//给每一个li注册鼠标经过事件 鼠标经过后要排他
lis[i].onmouseover = function () {
//干掉所有人 让所有人的宽度 渐渐地 变为100
for (var j = 0; j < lis.length; j++) {
animate(lis[j], {"width": 100});
}
//留下我自己 让我的宽度 渐渐地 变为800
animate(this, {"width": 800});
};
}
//鼠标离开box 所有的li宽度 渐渐地 变为240
box.onmouseout = function () {
for (var i = 0; i < lis.length; i++) {
animate(lis[i], {"width": 240});
}
};
//jQuery中有animate动画函数,下面是实现的原理,虽然没有jQ的强大,但是基本的效果实现还是没有问题的
function animate(obj, json) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
//先假设 这一次执行完 所有的属性都到达目标了
var flag = true;
for (var k in json) {
var leader = parseInt(getStyle(obj, k)) || 0;
var target = json[k];
var step = (target - leader) / 10; //位置
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style[k] = leader + "px";
console.log("代码还在运行");
if (leader != target) {
flag = false;//告诉标记 当前这个属性还没到达
}
}
//如果此时仍然为true 就说明真的都到达了
if (flag) {
clearInterval(obj.timer);
}
}, 15);
}
//全部属性都到达目标值才能清空
function getStyle(obj, attr) {
if (window.getComputedStyle) { //获得全部的style样式
console.log(window.getComputedStyle(obj, null));
return window.getComputedStyle(obj, null)[attr];
} else {
return obj.currentStyle[attr];
}
}
</script>
这样,手风琴特效就好了,js代码还是有不明白的地方,自己可以在屡一下