图片悬浮实例

最新推荐文章于 2023-04-10 11:12:05 发布

Queen_zdd

最新推荐文章于 2023-04-10 11:12:05 发布

阅读量415

点赞数

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            height:0;
        }
        div{
            position: absolute;
        }
        img{
            width: 100px;
            height:100px;
        }
    </style>
</head>
<body>
  <div id="main"><img src="images/01.jpeg" alt=""/></div>
</body>
<script type="text/javascript">
        //   获取图片所在的div对象
        var img = document.getElementById('main');
        var x = 10,y = 10;// 设置图片的初始位置
        var xspeed = 1;//横坐标的行进速度
        var yspeed = 1;//纵坐标的行进速度
        var w = document.documentElement.clientWidth - 100;//横向移动的最大范围
        var h = document.documentElement.clientHeight - 100;//纵向移动的最大范围
        function float1() {
            if (x > w || x < 0) {
                xspeed = -xspeed;
            }
            if (y > h || y < 0) {
                yspeed = -yspeed;
            }
            x=x+xspeed;
            y=y+yspeed;
            img.style.left = x + "px";
            img.style.top = y + "px";

        }
        setInterval("float1()", 10)；
</script>
</html>