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

最新推荐文章于 2025-07-16 22:46:34 发布

原创最新推荐文章于 2025-07-16 22:46:34 发布 · 1.9w 阅读

26 ·

CC 4.0 BY-SA版权

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

11 篇文章

订阅专栏

本文探讨了如何使用JavaScript和CSS实现动态网页元素的智能移动，包括元素的定位、响应式布局调整以及用户交互事件的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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