5th
9

符合网页标准的随滚动条滚动的广告特效

Posted by 可乐 under 网页设计

因为用到，所以找了下相关的代码。一下这个是比较好用的，FF,IE6,7测试通过。

HTML部分代码

  1. <div id="ad" style="position:absolute;background:#eeeeee;width:100px;height:100px;border:1px dotted #000;text-align:center">测试效果的层</div>
  2. <script type="text/javascript">
  3. scrollImg();
  4. </script>

JS代码

  1. function scrollImg(){ //浮动广告
  2.     var posX,posY;
  3.     if (window.innerHeight) {
  4.         posX = window.pageXOffset;
  5.         posY = window.pageYOffset;
  6.     }
  7.     else if (document.documentElement && document.documentElement.scrollTop) {
  8.         posX = document.documentElement.scrollLeft;
  9.         posY = document.documentElement.scrollTop;
  10.     }
  11.     else if (document.body) {
  12.         posX = document.body.scrollLeft;
  13.         posY = document.body.scrollTop;
  14.     }
  15.     var ad=document.getElementById("ad");
  16.     ad.style.top=(posY)+"px";
  17.     ad.style.right=(posX-100)+"px";
  18.     setTimeout("scrollImg()",100);
  19. }

里面的
ad.style.top=(posY)+”px”;
ad.style.right=(posX-100)+”px”;
两行是用来控制显示位置的。我给了主题框架container一个相对定位。所以这么写了。

你可能对这个有点兴趣：

评论

  1. Yacca | 9月 6th, 2008 at 9:33 下午

    作用浏览者 我讨厌这个跟着我的广告 一般会有安全浏览扩展过滤

    [回复]

我也要评论

Kele’s Home is powered by Wordpress.