实现图片漂浮功能（源码）

最新推荐文章于 2023-11-03 23:56:59 发布

mjf853912229

最新推荐文章于 2023-11-03 23:56:59 发布

阅读量453

点赞数

分类专栏：前端文章标签：漂浮图片

本文链接：https://blog.csdn.net/mjf853912229/article/details/88945004

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<html>

<head>
<title>图片移动</title>
<style type="text/css">
#roll{width:230px;
height:165px;
color:#fff;
z-index:999999;
position:fixed}

</style>
</head>

   var ggRoll = {
   roll: document.getElementById("roll"),
   speed:20,
   statusX: 1,
   statusY: 1,
   x: 100,
   y: 300,
   winW: document.documentElement.clientWidth - document.getElementById("roll").offsetWidth,
   winH: document.documentElement.clientHeight - document.getElementById("roll").offsetHeight,
   Go: function () {
       this.roll.style.left = this.x + 'px';
       this.roll.style.top = this.y + 'px';
       this.x = this.x + (this.statusX ? -1 : 1)
       if (this.x < 0) { this.statusX = 0 }
       if (this.x > this.winW) { this.statusX = 1 }
       this.y = this.y + (this.statusY ? -1 : 1)
       if (this.y < 0) { this.statusY = 0 }
       if (this.y > this.winH) { this.statusY = 1 }
   }
}

   var interval = setInterval("ggRoll.Go()", ggRoll.speed)
   ggRoll.roll.onmouseover = function () { clearInterval(interval) }
   ggRoll.roll.onmouseout = function () { interval = setInterval("ggRoll.Go()", ggRoll.speed) }

   function gbmoveimg(obj){
       document.getElementById(obj).style.display="none";
   }
</script>

</body>
</html>