快捷導(dǎo)航

js或css實(shí)現(xiàn)滾動(dòng)廣告的幾種方案

更新時(shí)間：2010年01月28日 22:09:32 作者：

今天無(wú)事逛網(wǎng)，突然發(fā)現(xiàn)了一個(gè)很有趣的事情，（也許只有我覺(jué)得有趣）.我看到一圖片竟然在我拖動(dòng)滾動(dòng)條的時(shí)候沒(méi)有動(dòng)，也許你會(huì)說(shuō)我少見(jiàn)多怪，不信你去找個(gè)這樣的我看看，很少有的，一般的都是一拖動(dòng)圖片就在那跳得厲害。

在觸發(fā)js的scroll事件啊，可是我遇到的是真正不動(dòng)的，我開(kāi)始以為是FF上面才會(huì)這樣，沒(méi)想到IE6和IE7都有如此效果，不得不驚嘆神奇了。
如是我就找出了如下神奇的代碼：僅用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

您可能感興趣的文章:

相關(guān)文章

javascript中typeof的使用示例
本文為大家介紹下javascript中typeof的使用，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下
2013-12-12
基于JavaScript實(shí)現(xiàn)根據(jù)手機(jī)定位獲取當(dāng)前具體位置（X省X市X縣X街道X號(hào)）
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)根據(jù)手機(jī)定位獲取當(dāng)前具體位置（X省X市X縣X街道X號(hào)）的相關(guān)資料,需要的朋友可以參考下
2015-12-12
js實(shí)現(xiàn)隨機(jī)8位驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)隨機(jī)8位驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-06-06
前端webpack一些常用配置的作用詳解
在前端開(kāi)發(fā)中Webpack已經(jīng)成為構(gòu)建現(xiàn)代JavaScript應(yīng)用的必備工具,它負(fù)責(zé)模塊的打包和優(yōu)化,這篇文章主要介紹了前端webpack一些常用配置的作用,文中介紹的非常詳細(xì),需要的朋友可以參考下
2025-04-04
今天小編就為大家分享一篇使用layer模態(tài)框給新頁(yè)面?zhèn)髦档姆椒?具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09