|
|
如是我就找出了如下神奇的代碼：僅用CSS實(shí)現(xiàn)滾動(dòng)效果~~
#fixed{position:fixed;}
<div id="fixed">滾動(dòng)</div>
完了，就這個(gè)屬性就搞定滾動(dòng)了，真想罵人了。不過(guò)還沒(méi)完呢，這個(gè)只支持火狐和IE7，我剛才說(shuō)過(guò)IE6也可以的，只是IE6要實(shí)現(xiàn)就有點(diǎn)復(fù)雜了，
復(fù)制代碼 代碼如下:
<!--[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]-->
這個(gè)我也沒(méi)太看是什么意思。也好像是CSS，不過(guò)應(yīng)該也算有腳本了吧！？也許有人知道可以告訴大家，分享一下。
既然我的標(biāo)題是實(shí)現(xiàn)滾動(dòng)的N種方法的話，肯定不只是這兩種了。好像CSS的還有其他寫法，我就不一一列舉了，我主要是想告訴大家比較常用的JS實(shí)現(xiàn)方式,我的網(wǎng)站有用到一段代碼，也是網(wǎng)上找的，不過(guò)有個(gè)不好的地方就是它是相對(duì)頂部的，也就是你的網(wǎng)頁(yè)高度不夠就會(huì)出現(xiàn)拉不到底的情況，其實(shí)百度留言也會(huì)出現(xiàn)這種狀況的，我就不多說(shuō)了，先貼出來(lái)大家看看:
復(fù)制代碼 代碼如下:
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);
有興趣的話大家可以把上面的改成相對(duì)于底部，這樣會(huì)好很多。
最近一直在看js庫(kù)，比較感興趣的jquery還是很不錯(cuò)的，所以呢~，現(xiàn)在再來(lái)貼一個(gè)用jquery來(lái)實(shí)現(xiàn)滾動(dòng)的代碼，比上面這個(gè)感覺(jué)要好很多。不過(guò)也只是個(gè)選擇，沒(méi)有必要可以不用，必竟jquery的代碼也有幾十KB的。
復(fù)制代碼 代碼如下:
$(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 );
});
}
}
好了，就說(shuō)到這吧！！有什么不明白的可以提出來(lái)!討論才會(huì)有進(jìn)步~！歡迎大家加入我的QQ群，大家共同學(xué)習(xí)進(jìn)步.群號(hào):5678537
JavaScript技術(shù)：js或css實(shí)現(xiàn)滾動(dòng)廣告的幾種方案，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
