漂浮广告

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 漂浮广告 </title>
<style type="text/css">
<!--
#layer1{position:absolute;width:130px;height:200px;background:#eee;}
-->
</style>
<script type="text/javascript">
function floatingAd(o,c){
    this.Obj = this.$(o);
    this.xPos = 20;
    this.yPos = document.documentElement.clientHeight;
    this.step = 1;
    this.delay = 20;
    this.height = 0;
    this.Hoffset = 0;
    this.Woffset = 0;
    this.yon = 0;
    this.xon = 0;
    this.pause = true;
    this.interval;
    this.Width = document.documentElement.clientWidth;
    this.Height = document.documentElement.clientHeight;
    this.Hoffset = this.Obj.offsetHeight;
    this.Woffset = this.Obj.offsetWidth;
    this.Obj.style.top = this.yPos;
    this.Play();
    var _this = this;
    if(c){
        this.$(c).onclick=function(){
            _this.Exit();
        };
    }
    this.Obj.onmousemove=function(){
        _this.Stop();
    }
    this.Obj.onmouseout=function(){
        _this.Play();
    }
}
floatingAd.prototype = {
    $:function(id){
        return document.getElementById(id);
    },
  Play:function(){
    var _this=this;
        if(this.Obj.style.display=='none'){
            window.clearInterval(this.running);
        }
    (function(){
            _this.Obj.style.left = _this.xPos + document.documentElement.scrollLeft;
            _this.Obj.style.top = _this.yPos + document.documentElement.scrollTop;
            if(_this.yon){
                _this.yPos = _this.yPos + _this.step;
            }else{
                _this.yPos = _this.yPos - _this.step;
            }
            if(_this.yPos < 0){
                _this.yon = 1;
                _this.yPos = 0;
            }
            if(_this.yPos >= (_this.Height - _this.Hoffset)){
                _this.yon = 0;
                _this.yPos = (_this.Height - _this.Hoffset);
            }
            if(_this.xon){
                _this.xPos = _this.xPos + _this.step;
            }else{
                _this.xPos = _this.xPos - _this.step;
            }
            if(_this.xPos < 0){
                _this.xon = 1;
                _this.xPos = 0;
            }
            if(_this.xPos >= (_this.Width - _this.Woffset)){
                _this.xon = 0;
                _this.xPos = (_this.Width - _this.Woffset);
            }
            _this.running=setTimeout(arguments.callee, _this.delay);
    })();
    },
    Stop:function(){
        window.clearInterval(this.running);
    },
    Exit:function(){
        window.clearInterval(this.running);
        this.Obj.style.display = 'none';
    }
}
</script>
</head>

<body>

<div style="height:1200px;"></div>
<div id="layer1" style="position:absolute;">
    <a href="#"><img src="images/01.gif" alt="图片" border="0" /></a>
</div>

<script>
// 调用脚本
new floatingAd('layer1');
</script>

</body>
</html>
posted @ 2012-05-28 11:31  tongfan  阅读(110)  评论(0)    收藏  举报