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

256 阅读 0 评论 169 点赞

我是靠谱客的博主痴情红酒，最近开发中收集的这篇文章主要介绍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