HTML网页漂浮广告原理js实现

浏览数：29 / 时间：2015年06月09日

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <style type="text/css">
        #demo {
            width: 100px;
            height: 100px;
            position:absolute;
            border-radius:50px;
        }
    </style>
 
    <script type="text/javascript">
        window.onload = function(){
            var demo = document.getElementById('demo');
            var sx = sy = 10;
            var x = y = 0;
 
            function move(){
                if(document.documentElement.clientWidth - demo.offsetWidth-10 < x || x < 0){
                    sx = -sx;
                }
 
                if(document.documentElement.clientHeight - demo.offsetHeight-10 < y || y < 0){
                    sy = -sy;
                }
 
                x = demo.offsetLeft + sx;
                y = demo.offsetTop + sy;
 
                demo.style.left = x + 'px';
                demo.style.top = y + 'px';
            }
 
            var timer = setInterval(move, 100);
 
            demo.onmouseover = function(){
                clearInterval(timer);
            }
 
            demo.onmouseout = function(){
                timer = setInterval(move, 100);
            }
        }
    </script>
 
    <img src="http://d.hiphotos.baidu.com/image/w%3D2048/sign=48fd3c26f01fbe091c5ec4145f580d33/64380cd7912397dd92729b545b82b2b7d0a28752.jpg" id="demo" />
    
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

HTML网页漂浮广告原理js实现