js或css实现滚动广告的几种方案

  在触发js的scroll事件啊,可是我遇到的是真正不动的,我开始以为是FF上面才会这样,没想到IE6和IE7都有如此效果,不得不惊叹神奇了。

  如是我就找出了如下神奇的代码:仅用CSS实现滚动效果~~

  #fixed{position:fixed;}

  <div id="fixed">滚动</div>

  完了,就这个属性就搞定滚动了,真想骂人了。不过还没完呢,这个只支持火狐和IE7,我刚才说过IE6也可以的,只是IE6要实现就有点复杂了,

  

复制代码 代码如下:

  <!--[if IE]>

  <style type="text/css">

  * html #fixed{position:absolute;right:1px;top:expression_r(eval_r(document.body.height + 500));}

  * html{overflow:hidden;}

  * html body{height:100%;overflow:auto;}

  * html #fixed{right:17px;top:5em;}

  * html #fixed{right :1px;top :expression_r(eval_r(document.body.height + 500));}

  </style>

  <![endif]-->

  这个我也没太看是什么意思。也好像是CSS,不过应该也算有脚本了吧!?也许有人知道可以告诉大家,分享一下。

  既然我的标题是实现滚动的N种方法的话,肯定不只是这两种了。好像CSS的还有其他写法,我就不一一列举了,我主要是想告诉大家比较常用的JS实现方式,我的网站有用到一段代码,也是网上找的,不过有个不好的地方就是它是相对顶部的,也就是你的网页高度不够就会出现拉不到底的情况,其实百度留言也会出现这种状况的,我就不多说了,先贴出来大家看看:

  

复制代码 代码如下:

  lastScrollY=0;

  function heartBeat(){

  var diffY;

  if (document.documentElement && document.documentElement.scrollTop)

  diffY = document.documentElement.scrollTop;

  else if (document.body)

  diffY = document.body.scrollTop

  else

  {}

  percent=.1*(diffY-lastScrollY);

  if(percent>0)percent=Math.ceil(percent);

  else percent=Math.floor(percent);

  document.getElementById("lovexin12").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";

  (document.getElementById("lovexin12").style.top)+percent+"px";

  lastScrollY=lastScrollY+percent;

  }

  window.setInterval("heartBeat()",1);

  有兴趣的话大家可以把上面的改成相对于底部,这样会好很多。

  最近一直在看js库,比较感兴趣的jquery还是很不错的,所以呢~,现在再来贴一个用jquery来实现滚动的代码,比上面这个感觉要好很多。不过也只是个选择,没有必要可以不用,必竟jquery的代码也有几十KB的。

  

复制代码 代码如下:

  $(document).ready(function(){

  if($.browser.msie && $.browser.version == 6) {

  FollowDiv.follow();

  }

  });

  FollowDiv = {

  follow : function(){

  $('#cssrain').css('position','absolute');

  $(window).scroll(function(){

  var f_top = $(window).scrollTop() + $(window).height() - $("#cssrain").height() - parseFloat($("#cssrain").css("borderTopWidth")) - parseFloat($("#cssrain").css("borderBottomWidth"));

  $('#cssrain').css( 'top' , f_top );

  });

  }

  }

  好了,就说到这吧!!有什么不明白的可以提出来!讨论才会有进步~!欢迎大家加入我的QQ群,大家共同学习进步.群号:5678537