JavaScript运动中级

来源：互联网发布：windows me u盘安装编辑：程序博客网时间：2024/06/04 19:19

链式运动框架

回调函数
运动停止时，执行函数
运动停止时，开始下一次运动
例子：土豆网菜单

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style>        #div1 {            width: 100px;            height: 100px;            background: green;            filter: alpha(opacity:30);            opacity: 0.3;        }    </style>    <script src="move.js"></script>    <script>        window.onload = function () {            var oDiv = document.getElementById('div1');            oDiv.onmouseover = function () {                startMove(oDiv, 'width', 300, 10, function () {                    startMove(oDiv, 'height', 300, 10, function () {                        startMove(oDiv, 'opacity', 100, 10, function () {                        });                    });                });            };            oDiv.onmouseout = function () {                startMove(oDiv, 'opacity', 30, 10, function () {                    startMove(oDiv, 'height', 100, 10, function () {                        startMove(oDiv, 'width', 100, 10, function () {                        });                    });                });            };        };    </script></head><body>    <div id="div1"></div></body></html>

    function getStyle (obj, name){        if (obj.currentStyle) {            return obj.currentStyle[name];        } else {            return getComputedStyle(obj, false)[name];        }    }    function startMove(obj, attr, iTarget, fnEnd){        clearInterval(obj.timer);        obj.timer = setInterval(function (){            var cur = 0;            if (attr == 'opacity') {                cur = Math.round(parseFloat(getStyle(obj,attr)*100));            } 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);                if (fnEnd)                     fnEnd();            } else {                if (attr == 'opacity') {                    obj.style.filter = 'alpha(opacity:'+(cur + speed)+')';                    obj.style.opacity = (cur + speed)/100;                    document.getElementById('txt1').value = obj.style.opacity;                } else {                    obj.style[attr] = cur + speed + 'px';                }            }        }, 30);    }

依次运动，不能同时运动

完美运动框架

多个值同时变化
setStyle同时设置多个属性
参数传递
json的使用
for in遍历属性
运用到运动框架
检测运动停止
标志变量
例子：伸缩同时淡入淡出的菜单

function getStyle(obj, name) {//此方法主要是要来区分是否是行间样式，还是非行间样式    if (obj.currentStyle) {//非行间样式        return obj.currentStyle[name];    }    else {//行间样式        return getComputedStyle(obj, false)[name];    }}var time = null;//obj:当前对象  //value:属性  //Json: 样式Json，格式例如为：{width:100,height:100}//num:速度的快慢//fnEnd:触发的函数，事件，等,如:function(){  //事件内容等}，可为空function startMove(obj, Json, num, fnEnd) {    clearInterval(obj.time);//清除obj的time，obj.time的意义为：为每一个对象赋一个自己的定时器，以免产生冲突。    obj.time = setInterval(function () {        var bStop = true;//假设所有的值都到了        for (var attr in Json) {            var cur = 0;//定义一个默认的对象属性值            if (attr == 'opacity') {//如果属性等于透明度                cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);//四舍五入数学函数，因为计算机计算有小数会有点误差，用此函数消除这点误差                //当前对象属性value=opacity            }            else {                cur = parseInt(getStyle(obj, attr));                //当前对象属性value            }            var speed = (Json[attr] - cur) / num;            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);//缓冲运动写法            if (cur != Json[attr]) {//如果有目标没有到达目标点                bStop = false;            }            if (attr == 'opacity') {                obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';                obj.style.opacity = (cur + speed) / 100;            }            else {                obj.style[attr] = cur + speed + 'px';            }            if (bStop) {//如果都到达目标点                clearInterval(obj.time);//关闭定时器                if (fnEnd) fnEnd();//执行函数            }        }    }, 30);};

运动框架总结

演变过程
startMove (iTarget) 运动框架
startMove(obj, iTarget) 多物体
startMove(obj, attr, iTarget) 任意值
startMove(obj, attr, iTarget, fn) 链式运动（运动不同时）
startMove(obj, json) 多值运动
startMove(obj, json, fn) 完美运动框架

运动框架应用

幻灯片
新浪微博

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><style type="text/css">    *{        margin: 0;        padding: 0;    }    #ul1 {        width: 400px;        height: 400px;        border: 1px solid black;        margin: 10px auto;    }    #ul1 li{        border-bottom: 1px #999 dashed;        padding: 4px;        list-style: none;        overflow: hidden;        filter:alpha(opacity:0);opacity: 0;    }</style><script src="move.js"></script><script type="text/javascript">    window.onload = function (){        var oBtn = document.getElementById('btn');        var oUl = document.getElementById('ul1');        var oTxt = document.getElementById('txt1');        oBtn.onclick = function(){            var oLi = document.createElement('li');            oLi.innerHTML = oTxt.value;            oTxt.value = '';            if (oUl.children.length > 0) {                oUl.insertBefore(oLi, oUl.children[0])            } else {                oUl.appendChild(oLi);            }            var iHeight = oLi.offsetHeight;            oLi.style.height = 0;            startMove(oLi, {height: iHeight}, function(){                startMove(oLi, {opacity:100});            });        }    }</script></head><body>    <textarea id="txt1" rows="4" cols="40"></textarea>    <input id="btn" type="button" value="发布" />    <ul id="ul1">    </ul></body></html>

    function getStyle (obj, name){        if (obj.currentStyle) {            return obj.currentStyle[name];        } else {            return getComputedStyle(obj, false)[name];        }    }    function startMove(obj, json, fnEnd){        clearInterval(obj.timer);        obj.timer = setInterval(function (){            var bStop = true;            for (var attr in json) {                var cur = 0;                if (attr == 'opacity') {                    cur = Math.round(parseFloat(getStyle(obj,attr)*100));                } else {                    cur = parseInt(getStyle(obj,attr))                }                var speed = (json[attr] - cur)/6;                speed = speed>0?Math.ceil(speed):Math.floor(speed);                if (cur != json[attr]) {                    bStop = false;                }                if (attr == 'opacity') {                        obj.style.filter = 'alpha(opacity:'+(cur + speed)+')';                        obj.style.opacity = (cur + speed)/100;                    } else {                        obj.style[attr] = cur + speed + 'px';                    }            if (bStop) {                clearInterval(obj.timer);                if (fnEnd)                 fnEnd();            };            };        }, 30);    }

1 0