JavaScript运动中级

最新推荐文章于 2020-06-16 21:10:21 发布

可芭乐

最新推荐文章于 2020-06-16 21:10:21 发布

阅读量371

点赞数 1

分类专栏： JavaScript基础文章标签： javascript

本文链接：https://blog.csdn.net/a839371666/article/details/54836895

版权

JavaScript基础专栏收录该内容

37 篇文章 0 订阅

订阅专栏

链式运动框架

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

<!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

收藏

觉得还不错? 一键收藏
0
评论
JavaScript运动中级

链式运动框架回调函数运动停止时，执行函数运动停止时，开始下一次运动例子：土豆网菜单<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></
复制链接

扫一扫