页面导航：首页 → 网络编程 → JavaScript → 广告代码 → 正文内容

对联浮动广告效果

发布：dxy 字体：[增加减小] 类型：转载

现在很多网站广告做的如火如荼，现在我就来介绍一下常见的对联浮动广告效果的代码使用方法，介绍的这种效果，在1024*768分辨率下正常显示，在800*600的分辨率下可以自动隐藏，以免遮住页面影响访问者浏览内容，下面就是实现效果所需代码：

点击运行可以看到效果:

<html><head></head><body>大家好啊 
 <script>//固漂广告 
    var delta=0.15 
    var collection; 
    function floaters() { 
        this.items    = []; 
        this.addItem    = function(id,x,y,content) 
                  { 
                    document.write('<DIV id='+id+' style="Z-INDEX: 10; POSITION: absolute;  width:80px; height:60px;left:'+(typeof(x)=='string'?eval(x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'</DIV>'); 
                     
                    var newItem                = {}; 
                    newItem.object            = document.getElementById(id); 
                    newItem.x                = x; 
                    newItem.y                = y;

this.items[this.items.length]        = newItem; 
                  } 
        this.play    = function() 
                  { 
                    collection                = this.items 
                    setInterval('play()',10); 
                  } 
        } 
        function play() 
        {

for(var i=0;i<collection.length;i++) 
            { 
                var followObj        = collection[i].object; 
                var followObj_x        = (typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x); 
                var followObj_y        = (typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y);

if(followObj.offsetLeft!=(document.body.scrollLeft+followObj_x)) { 
                    var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta; 
                    dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx)); 
                    followObj.style.left=followObj.offsetLeft+dx; 
                    }

if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) { 
                    var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta; 
                    dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy)); 
                    followObj.style.top=followObj.offsetTop+dy; 
                    } 
                followObj.style.display    = ''; 
            } 
        }     
         
    var theFloaters        = new floaters(); 
    theFloaters.addItem('followDiv1','document.body.clientWidth-105',20,'<a href="http://www.iyuanma.com/sucai/" target="_blank" title="素材频道"><IMG src="http://www.iyuanma.com/asd/images/asd_top_100.gif" width=100 height=400 border="0"></a>'); 
    theFloaters.addItem('followDiv2',10,20,'<a href="http://www.iyuanma.com/sucai/" target="_blank" title="素材频道"><IMG src="http://www.iyuanma.com/asd/images/asd_top_100-2.gif" width=100 height=400 border="0"></a>'); 
    theFloaters.play(); 
//固漂广告end</script> 
</body></html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：对联浮动广告效果