【实战】弹性菜单

实现源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>带透视效果的弹性菜单</title>
    <style>
        ul{width: 600px;height: 40px;background-color: #eee;padding: 0;margin: 0 auto;}
        li{list-style: none;float: left;width: 150px;height: 40px;line-height: 40px;text-align: center;cursor: pointer;}
        #ul1{position: relative;top: 100px;}
        #ul3{color: white;position: absolute;left: 0;top: 0;background-color: transparent;}
        #mark{width: 150px;position: absolute;top: 0;left: 0;background-color: pink;overflow: hidden;}
    </style>
</head>
<body>
<ul id="ul1">
    <ul id="ul2">
        <li>首页</li>
        <li>新闻中心</li>
        <li>产品列表</li>
        <li>关于我们</li>
    </ul>
    <li id="mark">
        <ul id="ul3">
            <li>首页</li>
            <li>新闻中心</li>
            <li>产品列表</li>
            <li>关于我们</li>
        </ul>
    </li>
</ul>
<script>
    var lis = document.getElementById('ul2').getElementsByTagName('li'),
        mark = document.getElementById('mark'),
        ul3 = document.getElementById('ul3'),
        iSpeed = 0,
        i = 0;

    for (; i < lis.length; i++) {
        lis[i].onmouseover = lis[i].onmouseout = function () {
            animate(this.offsetLeft);
        };
    }

    function animate(iTarget) {
        clearInterval(mark.timer);
        mark.timer = setInterval(function () {
            var curOffsetLeft = mark.offsetLeft;
            iSpeed += (iTarget - curOffsetLeft) / 7;
            iSpeed *= 0.75;

            if (Math.abs(iSpeed) < 1 && Math.abs(iTarget - curOffsetLeft) < 1) {
                clearInterval(mark.timer);
                mark.style.left = iTarget + 'px';
                ul3.style.left = -iTarget + 'px';
            } else {
                var tmpOL = curOffsetLeft + iSpeed;
                mark.style.left = tmpOL + 'px';
                ul3.style.left = -tmpOL + 'px';
            }
        }, 20);
    }
</script>
</body>
</html>

弹性菜单效果