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

最新推荐文章于 2024-04-10 18:28:59 发布

CrazyHorse02

最新推荐文章于 2024-04-10 18:28:59 发布

阅读量1.9w

点赞数 5

分类专栏：前端攻城狮之路

本文链接：https://blog.csdn.net/u014209090/article/details/44139461

版权

前端攻城狮之路专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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>

CrazyHorse02

关注

5
点赞
踩
26

收藏

觉得还不错? 一键收藏
3
评论
HTML网页漂浮广告原理js实现

#demo { width: 100px; height: 100px; position:absolute; border-radius:50px; } window.onload = function(){ var de
复制链接

扫一扫