Js全屏漂浮广告效果的代码示例

发布时间:2021-01-24编辑:脚本学堂
分享一例js代码,实现全屏漂浮广告的效果,有需要的朋友参考下吧。

本节内容:
一例js全屏漂浮的广告代码。

例子:
 

复制代码 代码示例:
<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Js广告_全屏漂浮广告 - www.jb200.com</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>