首页 > Web开发 > 详细

Js广告_全屏漂浮广告

时间:2015-08-26 17:20:41      阅读:228      评论:0      收藏: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; 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>
技术分享

Js广告_全屏漂浮广告

原文:http://www.cnblogs.com/ninestart/p/4760862.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!