Js运动动画系列6--多物体运动-获取样式属性

最新推荐文章于 2024-08-16 19:02:09 发布

紫菜中毒

最新推荐文章于 2024-08-16 19:02:09 发布

阅读量531

点赞数

分类专栏： JavaScript Js动画文章标签：动画 javascript 博客前端

本文链接：https://blog.csdn.net/u014492334/article/details/51879535

版权

JavaScript 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

Js动画

9 篇文章 0 订阅

订阅专栏

<head>
    <title>4-2多物体运动-获取样式</title>
    <style type="text/css">
        *
        {
            margin:0;
            padding:0;
            }
        ul,li
        {
            list-style:none;
            }
        ul li
        {
            width:200px;
            height:100px;
            background:green;
            margin-bottom:20px;
            border:2px solid #000;
            }
    </style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

<script type="text/javascript">
    //设置border之后运动不一致。offset下都有这个bug，只要目标同时设置border width可以直接用getStyle方法来解决
    //方法二 ：通过设置行内元素 style="width:200px;"  css样式删掉 border留着 则obj.style.offsetWidth 则是 200（数值）像素

    window.onload = function () {
        var aLi = document.getElementsByTagName('li');
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].timer = null; //多物体运动 给每个li加上各自的定时器
            aLi[i].onmouseover = function () {
                statMove(this, 400);
            }
            aLi[i].onmouseout = function () {
                statMove(this, 200);
            }
        }
    }

    function statMove(obj, iTarget) {
        //方式一 ：alert(getStyle(obj,'width')); 200px;  obj.style.offsetWidth 则是 204px
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var cul=parseInt(getStyle(obj, 'width'));
            speed = (iTarget - cul) / 8;  //parseInt(getStyle(obj,'width'))转为数字
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (cul == iTarget) {
                clearInterval(obj.timer);
            }
            else {
                //css样式高 透明度字体大小都可以改变  
                obj.style.width = cul + speed + 'px'; //obj.style.width 可以写成 obj.style['width']
            }
        }, 30)
    }

    //方式三：获取样式 得到的是字符串 200px 宽 border包含在width里面
    function getStyle(obj, attr) {
        if (obj.currentStyle){
            return obj.currentStyle[attr]; //获取样式 支持IE
        }
        else {
            return getComputedStyle(obj, false)[attr];//支持 火狐
        }
    }
</script>