js实现元素宽度反弹的两种方法

浏览数：40 / 时间：2015年06月09日

方法一：此方法，不是我想的，但是超级喜欢，太漂亮了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02</title>
    <style>
        #outer{
            width:1400px;
            height:400px;
            background-color: pink;
        }
        #inner{
            width:200px;
            height:200px;
            border:6px solid #000;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner"></div>
    </div>
    <script>
        var inner = document.getElementById("inner");
        var speed = 10;
        var interval;
        inner.onmouseover = function(){
            clearInterval(interval);
            //如果没有这里的清除，那么每次触发mouseover事件的时候都会在原有的定时器上再增加一个定时器，速度回越来越快
            interval = setInterval(change,30);
        }
        function change(){
            inner.style.width = inner.clientWidth + speed + "px";
            if(inner.clientWidth>=688&&speed>0||inner.clientWidth<=0&&speed<0){
                speed = -speed;
            }
        }
    </script>
</body>
</html>

js实现元素宽度反弹

方法二：这个是我想的，但是相对于上边没那么好，但也算是一种方法吧，不喜勿喷……(*^__^*) 嘻嘻……

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02</title>
    <style>
        #outer{
            width:1400px;
            height:400px;
            background-color: pink;
        }
        #inner{
            width:200px;
            height:200px;
            border:6px solid #000;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner"></div>
    </div>
    <script>
        var inner = document.getElementById("inner");
        var interval01 = null;
        var interval02 = null;
        interval01 = setInterval(add,30);
        function add(){
            if(inner.clientWidth>=688){
                clearInterval(interval01);
                interval02 = setInterval(reduce,30);
            }else{
                inner.style.width = inner.clientWidth + 10 + "px";
            }
        }
        function reduce(){
            if(inner.clientWidth<=0){
                clearInterval(interval02);
                interval01 = setInterval(add,30);
            }else{
                inner.style.width = (inner.clientWidth - 10) + "px";
            }
        }
    </script>
</body>
</html>