实现图片漂浮功能(源码)

<html>

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


</style>
</head> 

<div id="roll"> 
<div style="float:right;"><a href="javascript:gbmoveimg(&#39;roll&#39;)">关闭</a></div>
<div style="width:230px; height:165px;"><a href="http://www.gsjw.gov.cn/category/xfjbxcz" target="_blank"><img src="images/move.jpg" border="0" style="font-size:0px; display:block;width:230px;height:165px;"></a></div>
</div>
<body> 
<script type="text/javascript">

   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>

©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值