全屏漂浮

虽然说现在已经很少有用到双联的广告或者是全屏漂浮的那种广告了，但是还是在某种情况下会有这样的需求。刚好用到了，在网上经过各种筛选，已经不记得原出处在哪了。只剩下好用的骨头了。上代码：(图片自行替换，一个背景片，一个是关闭按钮图片)

<div id="FloatBox" class="FloatBox">
    <a href="#" target="_blank"><img  src="images/float_bg1.png"  alt=""/></a>
    <div class="Float-close"><a href="#" onclick="closeBtn()" ><img src="images/close.png" alt="" /></a></div>
</div>

CSS:

.FloatBox{
    position:absolute;
    z-index:1;
    top:0;
    left: 0;
}
.Float-close{
    position: absolute;
    right: 20px;
    top:10px;
    z-index: 10;
}

 

最主要的还是JS部分

<script type="text/javascript">
    
var ggRoll = {
roll: document.getElementById("FloatBox"),
speed: 20,
statusX: 1,
statusY: 1,
x: 500,
y: 300,
winW: document.documentElement.clientWidth - document.getElementById("FloatBox").offsetWidth,
winH: document.documentElement.clientHeight - document.getElementById("FloatBox").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 closeBtn(){
        $("#FloatBox").hide();
    }
</script>

现在就可以飘起来了。走起~~