JavaScript定时器基础二

来源：互联网发布：adobe pdf reader mac 编辑：程序博客网时间：2024/06/03 20:18

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><style type="text/css">    #div1 {        width: 200px;        height: 200px;        background: red;        position: absolute;        left: 200px;        top: 150px;        margin: 50px;    }</style></head><body>    <div id="div1" onclick="alert(this.offsetLeft);"></div></body></html>

offsetLeft：用于测出物体距离网页最左边的长度
offsetTop：用于测出物体距离网页最上边的长度
offsetWidth：获取物体的宽度
offsetHeight：获取物体的高度

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><style type="text/css">    * {        margin: 0px;        padding: 0px;    }    #div1 {        width: 800px;        height: 150px;        margin: 100px auto;        position: relative;        background: red;        overflow: hidden;    }    #div ul {        position: absolute;        left: 0;        top: 0;    }    #div1 ul li {        float: left;        width: 200px;        height: 150px;        list-style: none;    }</style><script type="text/javascript">    window.onload = function (){        var oDiv = document.getElementById('div1');        var oUl = oDiv.getElementsByTagName('ul')[0];        var aLi = oUl.getElementsByTagName('li');        var speed = 2;        oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;        oUl.style.width = aLi[0].offsetWidth*aLi.length + 'px';        function move(){            if (oUl.offsetLeft < oUl.offsetWidth / 2) {                oUl.style.left = '0';            }            if (oUl.offsetLeft > 0) {                oUl.style.left = -oUl.offsetWidth / 2 + 'px';            }            oUl.style.left = oUl.offsetLeft + speed + 'px';}        }        var timer = setInterval(move(), 30);        oDiv.onmouseover = function (){            clearTimeout(timer);        }        oDiv.onmouseout = function (){            timer = setInterval(move, 30);        }        document.getElementsByTagName('a')[0].onclick = function (){            speed = -2;        }        document.getElementsByTagName('a')[1].onclick = function (){            speed = 2;        }    }</script></head><body>    <a href="javascript:;">向左走</a>    <a href="javascript:;">向右走</a>    <div id="div1">        <ul>            <li><img src="img/0.jpg" /></li>            <li><img src="img/1.jpg" /></li>            <li><img src="img/4.jpg" /></li>            <li><img src="img/3.jpg" /></li>        </ul>    </div></body></html>

0 0