学习webAP第七天

client可视区域
clientWidth: 可视区域的宽度(没有边框)
clientHeight: 可视区域的高度(没有边框)
clientLeft: 左边边框的宽度
clientTop: 上边边框的宽度
clientX: 离窗口左边的距离
clientY: 离窗口上边的距离
event事件: 谷歌和火狐支持
window.event: 谷歌和ie8支持
document.onmousemove: 都支持

变速动画之增加任意多个属性和回调函数和透明度和层级
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #btn {
            position: absolute;
            top: 0;
            left: 0;
        }

        #dv {
            width: 100px;
            height: 100px;
            background-color: gold;
            position: absolute;
            top: 30px;
        }
    </style>
</head>
<body>
<input type="button" id="btn" value="点击">
<div id="dv"></div>
<script src="../common.js"></script>
<script>
    function getStyle(element, attr) {
        return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
    }

    function animate(element, json, fn) {
        clearInterval(element.timeId)
        element.timeId = setInterval(function () {
            var flag = true
            for (var attr in json) {
                if (attr == "opacity") {
                    var current = parseInt(getStyle(element, attr)*100);
                    var target = json[attr]*100;
                    var setp = (target - current) / 10;
                    setp = setp > 0 ? Math.ceil(setp) : Math.floor(setp);
                    current += setp;
                    element.style[attr] = current/100;
                } else if (attr == "zIndex") {
                    element.style[attr] = json[attr]
                } else {
                    var current = parseInt(getStyle(element, attr));
                    var target = json[attr];
                    var setp = (target - current) / 10;
                    setp = setp > 0 ? Math.ceil(setp) : Math.floor(setp);
                    current += setp;
                    element.style[attr] = current + "px";
                }
                if (current != target){
                    flag = false
                }
            }
            if (flag){
                clearInterval(element.timeId)
                if (fn){
                    fn();
                }
            }
        }, 20)
    }

    my$("btn").onclick = function () {
        animate(my$("dv"), {"width": 400, "height": 500, "left": 300, "top": 100,"opacity":0.2,"zIndex":-1}, function () {
            animate(my$("dv"), {"width": 200, "height": 200, "left": 0, "top": 0,"opacity":0.6,"zIndex":-1})
        });
    }
</script>
</body>
</html>

猜你喜欢