码迷,mamicode.com
首页 > Web开发 > 详细

Js广告_全屏漂浮广告

时间:2015-08-26 17:23:53      阅读:217      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!