当前位置：Gxlcms > JavaScript > 对联浮动广告效果

对联浮动广告效果

时间：2021-07-01 10:21:17 帮助过：15人阅读

现在很多网站广告做的如火如荼，现在我就来介绍一下常见的对联浮动广告效果的代码使用方法，介绍的这种效果，在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(''+content+''); 
                     
                    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,'<IMG src="http://www.iyuanma.com/asd/images/asd_top_100.gif" width=100 height=400 border="0">'); 
    theFloaters.addItem('followDiv2',10,20,'<IMG src="http://www.iyuanma.com/asd/images/asd_top_100-2.gif" width=100 height=400 border="0">'); 
    theFloaters.play(); 
//固漂广告end</script> 
</body></html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

对联浮动广告效果

人气教程排行