javascript - getComputedStyle会对dom元素的各个属性进行更新检查吗
迷茫
迷茫 2017-04-11 11:30:16
0
1
372

在实现图片轮播的时候,加上了一句 window.getComputedStyle(ul, false)['left'];
效果就好了,可是没有用变量去保存,就只是单单执行了这句话,如果去掉的话,对元素left的修改就无效了。
求巨巨们解答。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * { margin: 0;padding: 0;}
    .container { width: 375px; height: 140px; overflow: hidden; }
    ul { list-style-type: none; position: relative; width: 7500px; height: 140px;      left: -375px;}
    .anima { transition: all 1s;}
    li { width: 375px; height: 100%; float: left; display: inline-block; }
    img { width: 100%; height: 100%;}
    </style>
    <script type="text/javascript">
     window.onload = function () {
        var animate = (function (offset) {
            var index = 2;
            var ul = document.querySelectorAll('ul')[0];
            var liList = document.querySelectorAll('li');

            var move = function (obj, width) {
                var left = parseInt(window.getComputedStyle(obj, false)['left']);
                obj.style.left = left + width + 'px';
            }
            return function () {
                window.getComputedStyle(ul, false)['left']; // 这里,注释掉效果就错了
                if (index == 5) {
                    index = 1;
                    ul.className = '';
                    ul.style.left = '-375px';
                    // ul.setAttribute('style','left:-375px');
                    setTimeout(function () {
                        animate();
                    }, 0);
                }
                else {
                    ul.className = 'anima';
                    move(ul, offset);
                     setTimeout(() => {
                        animate();
                    }, 1000);
                }
                index++;
            }
        })(-375);
        setTimeout(() => {
            animate();
        }, 1000);
    }
    </script>
</head>

<body>
    <p class="container">
        <ul class="anima">
            <li>
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1484559844848&di=8e19e9093abaddb49aff0c85aba6e946&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F3b87e950352ac65c1b6a0042f9f2b21193138a97.jpg">
            </li>
            <!-- 图片列表多放了两张图片,列表的第一张是正常列表的最后一张,列表的最后一张是正常列表的第一张 -->
            <li>
                <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1484549759&di=f0caf19a1954708bef443ca548e3c2f0&src=http://img002.21cnimg.com/photos/album/20160326/m600/B920004B5414AE4C7D6F2BAB2966491E.jpeg">
            </li>
            <li>
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1484559844849&di=e1d85e28674f88ae2b6258f04696b0ac&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Flvpics%2Fh%3D800%2Fsign%3D9931b79f1dd5ad6eb5f969eab1ca39a3%2Fa8773912b31bb051b3333f73307adab44aede052.jpg">
            </li>
            <li>
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1484559844848&di=8e19e9093abaddb49aff0c85aba6e946&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F3b87e950352ac65c1b6a0042f9f2b21193138a97.jpg">
            </li>
            <li>
                <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1484549759&di=f0caf19a1954708bef443ca548e3c2f0&src=http://img002.21cnimg.com/photos/album/20160326/m600/B920004B5414AE4C7D6F2BAB2966491E.jpeg">
            </li>
        </ul>
    </p>
</body>
</html>
迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!