【实战】弹性菜单

实现源码：

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>

弹性菜单效果

JavaScript中的运动

原理

运动其实就是在一段时间内改变元素 width、height、top、right、bottom、left和opactiy的值，到达目的后停止。

基础运动

  • 匀速运动
  • 缓冲运动
  • 弹性运动

一.匀速运动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*
 * 公式：
 * 速度恒定
 * */
var iSpeed = 1;
function animate(ele, iTarget) {
    clearInterval(ele.timer);
    ele.timer = setInterval(function () {
        var curOffsetLeft = ele.offsetLeft;
        if (curOffsetLeft >= iTarget) {
            clearInterval(ele.timer);
            ele.style.left = iTarget + 'px';
        } else {
            ele.style.left = curOffsetLeft + iSpeed + 'px';
        }
    }, 20);
}

匀速运动效果

More...

侃侃--结局

【warning：本品未成年人请在父母陪同下观看，由于可能涉及**内容带来不良影响本人概不负责。另：手机用户慎入，土豪请无视！本故事纯属真实！】

【序】

距上次日志更新已经有4年多了，我们这代人离不开网络，特别是80、90后，像当初懵懂时期大家都爱玩QQZone，可是假如现在用它写点儿东西，可能大家都觉得矫情，不过在此声明po主是一个有浓厚情怀的人，也让侃侃篇序列文章画上一个圆满的句号。

【推荐歌曲】

1.《讲不出再见》（该曲目在张日天（老四）的车载CD中无意听到的，是在2013年大醉一场回汉口途中，返京后找了整整一天才找到歌名，谭校长的）
2.《Whataya Want From Me》 – Adam Lambert
3.《The Catalyst》 – Linkin Park（po主帝都见证Linkin Park精彩演绎，他的好歌太多，玩PC Game对他是很了解，就不用提In The End、Numb…）
4.《夜空中最亮的星》、《1987我不知会遇见你》（这算得上当下比较优秀的中文歌曲了，至少po主这样认为）
5.《一生所爱》（大话西游共看了3-5遍，也就记下了）
说明：这些可能不适合康日天（老大）《你的承诺》（粤语版比较耐听），叶日狗（老幺）《手心手背》等风格，请慎听！其实朱日天（老五）推荐的《皇后大道东》还是很不错。

More...