zoukankan      html  css  js  c++  java
  • 广告悬浮框

    此代码可以实现,但不是很好,IE浏览器下是显示在右边(正确),火狐和谷歌浏览器显示在左边,定位失效。 还有无法随浏览器下拉而移动。
    <script type="text/javascript">
    
    var delta=0.5;
    var collection;
    var closeB=false;
    function floaters() {
       this.items = [];
       this.addItem = function(id,x,y,content)
       {
          document.write('<DIV id='+id+' style="Z-INDEX: 10; POSITION: absolute;   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()',30);
        }
       }
       function play()
       {
        if(screen.width<=800 || closeB)
        {
         for(var i=0;i<collection.length;i++)
         {
          collection[i].object.style.display = 'none';
         }
         return;
        }
        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 = '';
        }
       }
       function closeBanner()
       {
        closeB=true;
        return;
       } 
       var theFloaters   = new floaters();
    //
    
    theFloaters.addItem('followDiv1','document.body.clientWidth-115',0,'<a onClick="closeBanner();" href=http://www.invipshop.com/ target=_blank><img src=images/Ad_1.jpg width=112 height=224 border=0></a><br><img src=images/close.gif onClick="closeBanner();">');
    theFloaters.play(); 
    </script>

    ------------------------------------------------------------------------------------------------------------------------------

  • 相关阅读:
    循环的中断
    创建.NET应用程序所经历的步骤
    完整的开发一个ContentProvider步骤
    Perl 基于OOP的数据库链接(增删改查)
    Perl 基于OOP的数据库链接(优化)
    Perl 基于OOP的数据库链接
    Perl oop链接数据库
    Perl oop研究
    PythonStudy——内存管理机制 Memory management mechanism
    博客园美化——Design by Venti
  • 原文地址:https://www.cnblogs.com/zhiqixue/p/2720974.html
Copyright © 2011-2022 走看看