第九节 JS运动应用

多物体运动框架

　　多个物体同时运动

　　　　例子：多个Div，鼠标移入变宽

　　　　　　单定时器，存在问题

　　　　　　每个Div一个定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个div变宽</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            background: red;
            margin: 10px;
        }
        /*鼠标移入时宽度变宽；鼠标移除，恢复原状*/
    </style>
    <script>
        // window.onload = function () {
        //     var aDiv = document.getElementsByTagName(‘div‘);
        //     for (var i=0; i<aDiv.length; i++){
        //         aDiv[i].onmouseover = function(){
        //             startMove(this, 400)
        //         };
        //         aDiv[i].onmouseout = function(){
        //             startMove(this, 100)
        //         };
        //     }
        // };
        //
        // var timer = null;
        // function startMove(obj, iTarget){
        //     clearInterval(timer);
        //     timer = setInterval(function () {
        //         var speed = (iTarget - obj.offsetWidth)/6;
        //         speed = speed>0?Math.ceil(speed):Math.floor(speed);
        //         if (obj.offsetWidth==iTarget) {
        //             clearInterval(timer);
        //         } else {
        //             obj.style.width = obj.offsetWidth+speed+‘px‘;
        //         }
        //     }, 30);
        // }

        //问题是，当我们把鼠标移入一个div，并快速移出，然后快速移入下一个div时，鼠标移入的第一个div有可能不能恢复原状，
        //其实问题的根源就是 整个程序就只有一个“定时器”，当第一个div在动的时候，还没有完全恢复，第二个div的定时器已经把
        // 上一个的定时器覆盖掉，所以出现这种情况，解决办法如下：
        window.onload = function () {
            var aDiv = document.getElementsByTagName(‘div‘);
            for (var i=0; i<aDiv.length; i++){
                aDiv[i].timer = null;   //自定义属性，给每个div都加一个定时器

                aDiv[i].onmouseover = function(){
                    startMove(this, 400)
                };
                aDiv[i].onmouseout = function(){
                    startMove(this, 100)
                };
            }
        };
        // var timer = null;
        function startMove(obj, iTarget){
            clearInterval(obj.timer);   //关闭相应div的定时器
            obj.timer = setInterval(function () {   //开启相应div的定时器
                var speed = (iTarget - obj.offsetWidth)/6;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);
                if (obj.offsetWidth==iTarget) {
                    clearInterval(obj.timer);   //关闭相应div的定时器
                } else {
                    obj.style.width = obj.offsetWidth+speed+‘px‘;
                }
            }, 30);
        }
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

多物体运动框架

　　定时器作为物体的属性

　　参数传递：物体、目标值

　　例子：多个Div淡出淡入

　　　　所有东西都不能共用

　　　　属性与运动对象：速度、其他属性值（如透明度）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个div淡入淡出</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 20px;
            float: left;
            background: red;
            filter: alpha(opacity: 30);
            opacity: 0.3;
        }
    </style>
    <script>
        window.onload=function () {
            var aDiv = document.getElementsByTagName(‘div‘);

            for (var i=0; i<aDiv.length;i++){
                aDiv[i].alpha = 30;     //把每个div的alpha分开

                aDiv[i].onmouseover = function () {
                    startMove(this, 100);
                };
                aDiv[i].onmouseout = function (){
                    startMove(this, 30);
                };
            }
        };
        // var alpha = 30;     //虽然把alpha分开了不同的div，但是任然存在鼠标快速由一个div移入到另一个div时，透明度变化较慢的情况
        // 所以我们的解决办法是，把每个div的alpha也分开，
        function startMove(obj, iTarget) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var speed = (iTarget-obj.alpha)/6;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);

                if (obj.alpha==iTarget) {
                    clearInterval(obj.timer);
                } else {
                    obj.alpha+=speed;
                    obj.style.filter = ‘alpha(opacity: ‘+obj.alpha+‘)‘;
                    obj.style.opacity = obj.alpha/100;
                }
            }, 30);
        }
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

任意值的运动框架

　　offset属性的Bug

　　　　有边框的Div变宽

　　　　　　用currentSty代替offset

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a_bug_of_offset</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background: red;
            border: 1px solid black;
        }
        #div2{
            height: 200px;
            background: red;
            border: 1px solid black;
        }
        #div3{
            width: 200px;
            height: 200px;
            background: red;
            border: 1px solid black;
        }
    </style>
    <script>
        setInterval(function () {
            var oDiv1 = document.getElementById(‘div1‘);

            oDiv1.style.width = oDiv1.offsetWidth-1+‘px‘;
            //问题来了，样式表中未加“border”之前，div确实在一直变窄，直至消失，而加入“border”之后div就开始慢慢变宽了，
            //原因是，offsetwidth获得的是div的“盒模型”（其中包括：border、padding、width等等）尺寸，究其根本原因是
            //因为width=200 左右border为2 offsetWidth=200+2=202，202-1=201px赋值给Width；
            //现在offsetWidth=201+2=203px 203-1=202px再赋值给Width；
            //offsetWidth=202+2=204px 204-1=203px再赋值给Width；如此继续，Width会越来越大，div的宽度也就越来越宽
            //
            //另外，同理，当改为：“oDiv.style.width = oDiv.offsetWidth-2+‘px‘;”时，原先offsetWidth=200+2=202px，
            //offsetWidth-2=200px赋值给width，offsetWidth有等于200+2px，如此反复，width始终等于200px，
            //offsetWidth始终等于202px，所以当“-2”时，div不发生任何变化，
        }, 30);

        //解决办法是不使用offsetWidth 如下，把div2的width放到行间
        setInterval(function () {
            var oDiv2 = document.getElementById(‘div2‘);
            oDiv2.style.width = parseInt(oDiv2.style.width)-1+‘px‘;
        }, 30);

        //上述解决办法，又存在一个局限性，因为“a.style.b”只能获取行间样式，而不能获取样式表中的样式，解决办法是：
        function getStyle(obj, name){   //该方法帮助我们获取非行间（样式表里的）样式
            if(obj.currentStyle){
                return obj.currentStyle[name];
            } else {
                return getComputedStyle(obj, false)[name];
            }
        }
        setInterval(function () {
            var oDiv3 = document.getElementById(‘div3‘);
            oDiv3.style.width = parseInt(getStyle(oDiv3, ‘width‘))-1+‘px‘;
        }, 30);
    </script>
</head>
<body>
    <div id="div1"></div>
    <div id="div2" style="width: 200px"></div>
    <div id="div3"></div>
</body>
</html>

　　　　

　　原有运动框架的问题：只能让某个值运动起来，如果想让其他值运动起来，要修改程序

　　　　由上述代码我们可以看出，offset...存在相应的bug，所以之前用过offset...的相关代码也会有同样的错误出现，开始用“offset...”仅仅是因为它比较简单，而且很容易让人们理解运动的概念，但是之后为了避免此类错误的出现，我们就不再优先考虑offset...了，所以下面改进版的“任意值的运动框架-改进版”如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任意值变化框架-改进版</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 20px;
            float: left;
            background: red;
            font-size: 14px;
            border: 1px solid blue;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv1 = document.getElementById(‘div1‘);
            oDiv1.onmouseover = function () {
                startMove(this, ‘height‘, 400);
            };
            oDiv1.onmouseout = function (){
                startMove(this, ‘height‘, 200);
            };

            var oDiv2 = document.getElementById(‘div2‘);
            oDiv2.onmouseover = function () {
                startMove(this, ‘width‘, 400);
            };
            oDiv2.onmouseout = function (){
                startMove(this, ‘width‘, 200);
            };

            var oDiv3 = document.getElementById(‘div3‘);
            oDiv3.onmouseover = function () {
                startMove(this, ‘font-size‘, 24);   //font-size也可以写成fontSize
            };
            oDiv3.onmouseout = function () {
                startMove(this, ‘fontSize‘, 14);   //font-size也可以写成fontSize
            }

            var oDiv4 = document.getElementById(‘div4‘);
            oDiv4.onmouseover = function () {
                startMove(this, ‘border-width‘, 24);    //border-width也可以写成borderWidth
            };
            oDiv4.onmouseout = function () {
                startMove(this, ‘border-width‘, 1);     //border-width也可以写成borderWidth
            }
        };

        function getStyle(obj, name){   //该方法帮助我们获取非行间（样式表里的）样式
            if(obj.currentStyle){
                return obj.currentStyle[name];
            } else {
                return getComputedStyle(obj, false)[name];
            }
        }

        function startMove(obj, attr, iTarget) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var cur = parseInt(getStyle(obj, attr));

                var speed = (iTarget-cur)/6;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);

                if (cur==iTarget) {
                    clearInterval(obj.timer);
                } else {
                    obj.style[attr] = cur+speed+‘px‘;
                }
            }, 30);
        }
    </script>
</head>
<body>
    <div id="div1">变长</div>
    <div id="div2">变宽</div>
    <div id="div3">字体变大</div>
    <div id="div4">变宽</div>
</body>
</html>

扩展的运动框架：

　　运动属性作为参数

　　封装opacity

　　　　小数的问题　　　

　　但是由于我们在上述代码中用的是：parseInt()进行取整，但是如果我们在使用透明度的时候都需要用到小数，所以此时由于parseInt()的使用，又限制了程序的完整性，解决办法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>parseInt局限的改进</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 20px;
            float: left;
            background: red;
            font-size: 14px;
            border: 10px solid blue;
            filter: alpha(opacity: 30); /*IE浏览器 物体透明度*/
            opacity: 30%;    /*Chrome、FF浏览器 物体透明度，也可以写成0.3*/
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv1 = document.getElementById(‘div1‘);
            oDiv1.onmouseover = function () {
                startMove(this, ‘opacity‘, 100);
            };
            oDiv1.onmouseout = function (){
                startMove(this, ‘opacity‘, 30);
            };
        };

        function getStyle(obj, name){   //该方法帮助我们获取非行间（样式表里的）样式
            if(obj.currentStyle){
                return obj.currentStyle[name];
            } else {
                return getComputedStyle(obj, false)[name];
            }
        }

        function startMove(obj, attr, iTarget) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var cur = 0;

                if (attr == ‘opacity‘) {
                    cur = Math.round(parseFloat(getStyle(obj, attr))*100);  //乘以100符合咱们平时对opacity的设置 Math.round()下面会有介绍
                } else {
                    cur = parseInt(getStyle(obj, attr));
                }

                var speed = (iTarget-cur)/6;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);

                if (cur==iTarget) {
                    clearInterval(obj.timer);
                } else {
                    if (attr == ‘opacity‘) {
                        obj.style.filter = ‘alpha(opacity:‘+(cur+speed)+‘)‘;    //IE透明度
                        obj.style.opacity = (cur+speed)/100;

                        var oTxt = document.getElementById(‘txt1‘);
                        oTxt.value = obj.style.opacity;
                    } else {
                        obj.style[attr] = cur+speed+‘px‘;
                    }

                }
            }, 30);
        }

        // alert(0.06*100);    //返回值为 6 没错
        // alert(0.07*100);    //返回值为：7.000000000000001，出现误差，
        // // 这是由于计算机存储容量有限，所以计算机并不一定会全部存储数据的实际值，而是近似值，但是只要是近似值就会有误差，
        // // 但是这并不会妨碍我们的使用，而且并不是PC存在这个问题，手机等计算设备都会有这种问题。
        // // 目前这种情况已经相对很少出现了，当然我们也有解决办法 Math.round() 四舍五入
        // alert(Math.round(3.499999999999999));   //返回值为3
        // alert(Math.round(3.4999999999999999));   //返回值为4
    </script>
</head>
<body>
    <div id="div1">变长</div>
    <input id="txt1" type="text"/>
</body>
</html>

仿Flash图片展示 - 1

　　效果思路：

　　　　两边的按钮——淡入淡出

　　　　大图下拉——层级、高度变化

　　　　下方的li——多物体淡入淡出

　　　　下方的ul——位置计算

　　左右按钮

　　　　淡出淡入

　　　　　　鼠标移动到按钮上，按钮会消失

　　　　　　　　层级问题

　　　　　　　　按钮和遮罩上都得加上事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿Flash图片轮转效果</title>
    <link rel="stylesheet" type="text/css" href="31.css"/>
    <script src="31JS_StartMove.js"></script>
    <script>
        function getByClass(oParent, sClass){
            var aEle = oParent.getElementsByTagName("*");
            var aResult = [];   //存储选出来的结果

            for(var i=0; i<aEle.length; i++){
                if (aEle[i].className == sClass){
                    aResult.push(aEle[i]);
                }
            }
            return aResult;
        }

        window.onload = function(){
            var oDiv = document.getElementById(‘playimages‘);
            var oBtnPrev = getByClass(oDiv, ‘prev‘)[0];
            var oBtnNext = getByClass(oDiv, ‘next‘)[0];
            var oMarkLeft = getByClass(oDiv, ‘mark_left‘)[0];
            var oMarkRight = getByClass(oDiv, ‘mark_right‘)[0];

            var oDivSmall = getByClass(oDiv, ‘small_pic‘)[0];
            var oUlSmall = oDivSmall.getElementsByTagName(‘ul‘)[0];
            var aLiSmall = oDivSmall.getElementsByTagName(‘li‘);

            var oUlBig = getByClass(oDiv, ‘big_pic‘)[0];
            var aLiBig = oUlBig.getElementsByTagName(‘li‘);

            var nowZIndex = 2;    //用于改变图片的层级，层级越大，图片越靠上，最大层级的图片永远在最上方
            var now = 0;    //为上一张和下一张做准备

            oUlSmall.style.width = aLiSmall.length*aLiSmall[0].offsetWidth+‘px‘;    //把放小图的div加宽，使其能放下所有图片

            //左右按钮
            oBtnPrev.onmouseover = oMarkLeft.onmouseover = function () {
                startMove(oBtnPrev, ‘opacity‘, 100);
            };
            oBtnPrev.onmouseout = oMarkLeft.onmouseout = function () {
                startMove(oBtnPrev, ‘opacity‘, 0);
            };

            oBtnNext.onmouseover = oMarkRight.onmouseover = function () {
                startMove(oBtnNext, ‘opacity‘, 100);
            };
            oBtnNext.onmouseout = oMarkRight.onmouseout = function () {
                startMove(oBtnNext, ‘opacity‘, 0);
            };

            //大图切换
            for (var i=0; i<aLiSmall.length; i++){
                aLiSmall[i].index = i;
                aLiSmall[i].onclick = function(){
                    //计算当前是哪一张照片，如果是当前显示的图片，点击小图切换是，如果点击的小图和显示的大图对应，则大图没有反应即可，避免图片重复刷新
                    if (this.index == now) return;

                    now = this.index;

                    tab();  //函数调用
                };

                aLiSmall[i].onmouseover = function () {
                    startMove(this, ‘opacity‘, 100);
                };
                aLiSmall[i].onmouseout = function () {
                    if (this.index != now) {
                        startMove(this, ‘opacity‘, 60);
                    }
                }
            }

            //函数封装
            function tab(){
                aLiBig[now].style.zIndex = nowZIndex++;

                for (var i=0; i<aLiSmall.length;i++){
                    startMove(aLiSmall[i], ‘opacity‘, 60);
                }
                startMove(aLiSmall[now], ‘opacity‘, 100);

                aLiBig[now].style.height = 0;
                startMove(aLiBig[now], ‘height‘, 320);   //控制大图片转换，转换方式是调整图片高度

                if (now == 0){      //当图片是第一张图片时，第一张小图left=0，即靠左放
                    startMove(oUlSmall, ‘left‘, 0);
                } else if (now == aLiSmall.length-1){   //当图片为最后一张图片时，最后一张小图靠右摆放
                    startMove(oUlSmall, ‘left‘, -(now-2)*aLiSmall[0].offsetWidth);
                } else {    //当图片既不是第一张，也不是最后一张时，靠中间摆放
                    startMove(oUlSmall, ‘left‘, -(now-1)*aLiSmall[0].offsetWidth);
                }
                // startMove(oUlSmall, ‘left‘, -(now-1)*aLiSmall[0].offsetWidth)
            }

            oBtnPrev.onclick = function () {
                now--;
                if (now == -1){
                    now = aLiSmall.length-1;
                }
                tab();
            };

            oBtnNext.onclick = function () {
                now++;
                if (now == aLiSmall.length) {
                    now=0;
                }
                tab();  //函数调用
            };

            //自动播放
            var timer = setInterval(oBtnNext.onclick, 2000);

            oDiv.onmouseover = function () {
                clearInterval(timer);
            };
            oDiv.onmouseout = function () {
                timer = setInterval(oBtnNext.onclick, 2000);
            };
        };
    </script>
</head>
<body>
    <div id="playimages" class="play">
        <ul class="big_pic">
            <div class="prev"></div>
            <div class="next"></div>

            <div class="text">加载图片说明……</div>
            <div class="length">计算图片数量……</div>

            <a class="mark_left" href="javascript:;"></a>
            <a class="mark_right" href="javascript:;"></a>
            <div class="bg"></div>

            <li style="z-index: 1;"><img src="img/bg1.jpg"/></li>
            <li><img src="img/bg2.jpg"></li>
            <li><img src="img/bg3.jpg"></li>
            <li><img src="img/bg4.jpg"></li>
            <li><img src="img/bg5.jpg"></li>
            <li><img src="img/bg3.jpg"></li>
        </ul>
        <div class="small_pic">
            <ul style="width: 390px;">
                <li style="filter: alpha(opacity: 100); opacity: 1;"><img src="img/bg1.jpg"/></li>
                <li><img src="img/bg2.jpg"></li>
                <li><img src="img/bg3.jpg"></li>
                <li><img src="img/bg4.jpg"></li>
                <li><img src="img/bg5.jpg"></li>
                <li><img src="img/bg3.jpg"></li>
            </ul>
        </div>
    </div>
</body>
</html>

body{background: #666;}
ul{padding: 0;  margin: 0;}
li{list-style: none;}
img{border: 0;}

.play{
    width: 400px;
    height: 430px;
    margin: 50px auto 0;
    background: #999;
    font: 12px Arial;
}

.big_pic{
    width: 400px;
    height: 320px;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    background: #222;
    position: relative;
}
.big_pic li{
    width: 400px;
    height: 320px;
    overflow: hidden;
    top: 0;
    left: 0;
    z-index: 0;
    background: url("img/loading.jpg") no-repeat center center;
    position: absolute;
}
.big_pic li img{
    width: 400px;
    height: 320px;
}

.mark_left{
    width: 200px;
    height: 320px;
    position: absolute;
    left: 0;
    top: 0;
    background: red;
    filter: alpha(opacity:0);
    opacity: 0;     /*控制左右位置，使鼠标停到左边时，左键出现*/
    z-index: 3000;
}
.mark_right{
    width: 200px;
    height: 320px;
    position: absolute;
    left: 200px;
    top: 0;
    background: green;
    filter: alpha(opacity:0);
    opacity: 0;
    z-index: 3000;
}

.big_pic .prev{
    width: 60px;
    height: 60px;
    background: url("img/btn.jpg") no-repeat;
    position: absolute;
    top: 130px;
    left: 10px;
    z-index: 3001;
    /*display: none;*/
    filter: alpha(opacity:0);
    opacity: 0;
    cursor: pointer;
}
.prev .next img{
    width: 60px;
    height: 60px;
}
.big_pic .next{
    width: 60px;
    height: 60px;
    background: url("img/btn.jpg") no-repeat 0 -60px;
    position: absolute;
    top: 130px;
    right: 10px;
    z-index: 3001;
    /*display: none;*/
    filter: alpha(opacity:0);
    opacity: 0;
    cursor: pointer;
}

.big_pic .text{
    position: absolute;
    left: 10px;
    top: 302px;
    z-index: 3000;
    color: #ccc;
}
.big_pic .length{
    position: absolute;
    right: 10px;
    bottom: 4px;
    z-index: 3000;
    color: #ccc;
}
.big_pic .bg{
    width: 400px;
    height: 25px;
    background: #000;
    filter: alpha(opacity=60);
    opacity: 0.6;
    position: absolute;
    z-index: 2999;
    bottom: 0;
    left: 0;
}

.small_pic{
    width: 380px;
    height: 94px;
    position: relative;
    top: 7px;
    left: 10px;
    overflow: hidden;
}
.small_pic ul{
    height: 94px;
    position: absolute;
    top: 0px;
    left: 0px;
}
.small_pic li{
    width: 120px;
    height: 94px;
    float: left;
    padding-right: 10px;
    background: url("img/loading.jpg") no-repeat center center;
    cursor: pointer;
    filter: alpha(opacity=100);
    opacity: 0.6;
}
.small_pic li img{
    width: 120px;
    height: 94px;

}

31.css

function getStyle(obj, name){   //该方法帮助我们获取非行间（样式表里的）样式
    if(obj.currentStyle){
        return obj.currentStyle[name];
    } else {
        return getComputedStyle(obj, false)[name];
    }
}

function startMove(obj, attr, iTarget) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var cur = 0;

        if (attr == ‘opacity‘) {
            cur = Math.round(parseFloat(getStyle(obj, attr))*100);  //乘以100符合咱们平时对opacity的设置
        } else {
            cur = parseInt(getStyle(obj, attr));
        }

        var speed = (iTarget-cur)/6;
        speed = speed>0?Math.ceil(speed):Math.floor(speed);

        if (cur==iTarget) {
            clearInterval(obj.timer);
        } else {
            if (attr == ‘opacity‘) {
                obj.style.filter = ‘alpha(opacity:‘+(cur+speed)+‘)‘;    //IE透明度
                obj.style.opacity = (cur+speed)/100;

                var oTxt = document.getElementById(‘txt1‘);
                oTxt.value = obj.style.opacity;
            } else {
                obj.style[attr] = cur+speed+‘px‘;
            }

        }
    }, 30);
}

31JS_StartMove.js

图片自行找，然后把名字改成文件中的图片名称即可，甚至不用管你找的图片尺寸，因为在CSS样式表中有对图片调整的代码。

仿Flash图片展示 - 2

　　下方li效果

　　　　点击切换大图——选项卡

　　　　li淡入淡出——移入移除

　　　　ul移动——位置计算

　　大图片切换

　　　　图片层级——zIndex一直加1

　　　　图片下拉效果（运动框架）

　　　　　　可改为淡入淡出

　　加入自动播放

　　　　和选项卡一样

重要知识点：

　　多物体运动

　　任意值运动

原文地址：https://www.cnblogs.com/han-bky/p/10256204.html

时间： 2024-11-13 05:25:27

第九节 JS运动应用的相关文章

[ExtJS学习笔记]第九节 Extjs5的mvc与mvvm框架结构简介

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38537431 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源:http://docs.sencha.com/ext

带无缝滚动的轮播图（含JS运动框架）

今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框架的代码如下: 1 //获取样式 2 function getStyle(obj,attr){ 3 if(obj.currentStyle){ 4 return obj.currentStyle[attr]; 5 }else{ 6 return getComputedStyle(obj,false)

JS运动从入门到兴奋1

hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌握了思想,不管需求怎么改变,我们都能把它玩弄于股掌之中...下面我们就由浅入深走进运动的世界吧. 首先来看最基础的运动:单个物体向右匀速运动到某一点停止      例子:一个按钮,一个div,点击按钮,让div向右运动到某一个位置暂停 // 原理: 1 获取物体当前的位置 oDiv.offsetle

关于js运动的一些总结

js运动实现,有两种.一种是速度版,另一种是时间版. 速度版是通过对速度的加减乘除,得出元素的运动数据.时间版是通过对时间进行Tween公式运算,得出元素的运动数据. 速度版运动优点:容易在运动过程中,对运动做一些修改. 时间版运动优点:切换或缩小浏览器页面,浏览器会对网页定时器进行停缓处理.这样会导致一些速度版运动bug.因为时间版运动是通过记录时间变化区间,来对运动进行控制.所以不会有这种bug. 运动形式有:缓冲运动,碰撞运动,重力运动.缓冲运动,是速度自身也在变化的结果.碰撞运动,是碰撞

JS运动1 （转）

JS运动从入门到兴奋1 http://www.cnblogs.com/moqing/p/5666476.html hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动 的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌握了思想,不管需求怎么改变,我们都能把它玩弄于股掌之中...下面我们就进入运动的世界吧. 首先来看最基础的运动:单个物体向右匀速运动到某一点停止      例子:一个按钮,一个div,

JAVA 年轻代收集器 第九节

JAVA 年轻代收集器  第九节 继续上一章所讲的,STW即GC时候的停顿时间,他会暂停我们程序中的所有线程.如果STW所用的时间长而且次数多的话,那么我们整个系统稳定性以及可用性将大大降低. 因此我们在必要的时候需要对虚拟机进行调优,那么调优的主要目标之一就是降低STW的时间,也就是减少Full GC的次数.那么这里我们从调优的角度来分析各个收集器的优势与不足. 首先从作用于年轻代的收集器开始(采用复制的收集算法): Serial收集器:一个单线程收集器,在进行回收的时候,必须暂停其他所有的工

简单的JS运动封装实例---侧栏分享到

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 {width: 100px; height: 200px; background: red;

js运动-完美运动框架

在上一篇的<js运动-同时运动>中说过,我们的运动框架还存在一个问题,那究竟是什么问题那?把上一篇的程序做一下调整 oDiv.onmouseover = function () { //startMove(oDiv,{width:300,height:300,opacity:30}); startMove(oDiv,{width:204,height:300,opacity:30}); } 在鼠标移入的时候,我们让width不变成300,而是变成204,看看会有什么变化那?? 从图可以看出,当

js运动动画

今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1.首先第一步实现速度运动动画,封装一个函数,用到的知识是setInterval(function(){ oDiv.style.left=oDiv.offsetLeft+10+"px"; },30). 对于这里为什么要用到offsetLeft,我特意百度了一下,http://www.cnblogs.com/wo