Js广告_全屏漂浮广告效果

最新推荐文章于 2021-06-19 03:58:10 发布

阿聪世家

最新推荐文章于 2021-06-19 03:58:10 发布

阅读量2.7k

点赞数

分类专栏：网站常用jquery效果文章标签： JavaScript 广告

本文链接：https://blog.csdn.net/congcong875/article/details/16959099

版权

网站常用jquery效果专栏收录该内容

52 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Js广告_全屏漂浮广告</title>
<style type="text/css">
div#roll{width:100px;height:100px; background-color:#000; color:#fff; position:absolute;}
</style>
</head>

<body>
<div id="roll">我是广告</div>
<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)};

</script>


</body>
</html>