js或css實現滾動廣告的幾種方案

2019-11-21 00:46:58

字體：大中小

來源：轉載

供稿：網友

在觸發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

上一篇：使用JavaScript庫還是自己寫代碼？

下一篇：jquery中的sortable排序之后的保存狀態的解決方法