html页面悬浮效果

教程管理员发布于2023-10-02 14:28 HTML教程 191

简介： 页面悬浮代码实现

<!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://imgs.wptop96.cn/20231002/loading_72b1da62.gif" id="demo" />
 
</body>
</html>

标签：#阿里 #开发者 #效果 #页面 #社区 #html

上一篇：html中的＜iframe＞＜/iframe＞标签
下一篇：HTML-媒体标记

html页面悬浮效果

相关推荐

会员中心

下载中心

图片素材

关注微信

关于我们

QQ在线客服

关注微信领优惠