JavaScript - 手风琴 -

最新推荐文章于 2024-07-19 08:43:05 发布

赵羽珩

最新推荐文章于 2024-07-19 08:43:05 发布

阅读量323

点赞数

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style media="screen">
    ul {
list-style: none
}

* {
margin: 0;
padding: 0;
}

div {
width: 1150px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
}

div li {
width: 240px;
height: 400px;
float: left;
/*background-image: url(images/1.jpg);*/
}

div ul {
width: 1300px;

}
    </style>
</head>
<body>
<div id="box">
    <ul>
        <li style="background:red;">1</li>
        <li style="background:blue;">2</li>
        <li style="background:yellow;">3</li>
        <li style="background:green;">4</li>
        <li style="background:gray;">5</li>
    </ul>
</div>
<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++) {
lis[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";

//给每一个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";
        //if (leader === target) {
        //    clearInterval(obj.timer);
        //}
        console.log("代码还在运行");
        if (leader != target) {

            flag = false;//告诉标记 当前这个属性还没到达

        }
    }

    //如果此时仍然为true 就说明真的都到达了

    if (flag) {
        clearInterval(obj.timer);
    }
}, 15);
}

//全部属性都到达目标值才能清空

function getStyle(obj, attr) {
if (window.getComputedStyle) {
    return window.getComputedStyle(obj, null)[attr];
} else {
    return obj.currentStyle[attr];
}
}
</script>
</body>
</html>