xScrollStick 跟隨滾動(dòng)條漂浮的JS特效

更新時(shí)間：2012年04月15日 16:20:22 作者：

這是一個(gè)跟隨滾動(dòng)條漂浮的JS特效，就是說(shuō)滾動(dòng)條滾動(dòng)而元素相對(duì)屏幕位置不變，需要的朋友可以測(cè)試下

這是一個(gè)跟隨滾動(dòng)條漂浮的JS特效，就是說(shuō)滾動(dòng)條滾動(dòng)而元素相對(duì)屏幕位置不變

網(wǎng)上有很多類似的效果，本代碼比較起來(lái)有如下優(yōu)點(diǎn)：

1. 兼容IE6.0+ & FF1.5+
2. 使用非常簡(jiǎn)單，屬于菜鳥(niǎo)最愛(ài)的那種拿來(lái)就能用的，見(jiàn)下面說(shuō)明
3. 元素之間不會(huì)起沖突，一頁(yè)中可以有n個(gè)特效，多元素使用無(wú)代碼冗余

缺點(diǎn)有：

1. 只能在聲明為xHTML的文檔中使用
2. 元素最好放在body下
3. 滾動(dòng)時(shí)不可避免的會(huì)有閃爍（已經(jīng)比較輕微，但追求完美者可能覺(jué)得不爽）

使用說(shuō)明：
在頁(yè)面中引用JS包，然后在需要特效的div上設(shè)定class為xScrollStick即可，當(dāng)然不要忘記給每個(gè)元素寫(xiě)上你希望它固定的位置

示例1：

復(fù)制代碼代碼如下:

 
<div class="xScrollStick" style="left:0px;top:0px"> 
Content... 
</div> 

示例2：

復(fù)制代碼代碼如下:

 
<div class="xScrollStick positionStyleName"> 
Content... 
</div> 

演示：

運(yùn)行代碼框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>xScrollStick Demo</title> <script type="text/javascript"> //<![CDATA[ //********************/ // x 系列之 xScrollStick // 作者：Hutia // 未經(jīng)同意不得轉(zhuǎn)載或用于商業(yè)用途 //********************/ /* 說(shuō)明： x系列是Hutia開(kāi)發(fā)的系列JS代碼，配合相應(yīng)的css后可以實(shí)現(xiàn)快速的自定義標(biāo)簽 目前xScrollStick支持的瀏覽器類型為：IE5.5, FF1.5 xScrollStick的標(biāo)簽為 <div   id="5s2yx72"   class="xScrollStick"> Content... </div> 支持屬性： 無(wú) 支持方法： 無(wú) */ //**載入CSS***** var xScrollStickCssFilePath="sp\/css\/xframe.css"; //document.write("<style>@import url("+xScrollStickCssFilePath+");</style>"); //**檢測(cè)瀏覽器種類***** var BROWSERNAME=""; switch(navigator.appName.toLowerCase()){ case "netscape": BROWSERNAME="ns"; break; case "microsoft internet explorer": default: BROWSERNAME="ie"; break; } //**設(shè)置初始化事件****** switch(BROWSERNAME){ case "ns": window.addEventListener("load",_xScrollStick_init,false); break; case "ie": default: window.attachEvent("onload",_xScrollStick_init); } //**初始化函數(shù)****** function _xScrollStick_init(){ var allTheScrollSticks=document.getElementsByTagName("div"); for(var i=0;i<allTheScrollSticks.length;i++){ if(allTheScrollSticks[i].className.match(/^((xScrollStick)|(.+ +xScrollStick)|(xScrollStick +.+)|(.+ +xScrollStick +.+))$/))_xScrollStick_event_doInit(allTheScrollSticks[i]); } window_event_scroll(); } //**事件響應(yīng)函數(shù)區(qū)****** function _xScrollStick_event_doInit(element){ //初始化變量 element.offX=element.offsetLeft; element.offY=element.offsetTop; //設(shè)置方法 element.Stick=_xScrollStick_method_Stick; //設(shè)置事件 switch(BROWSERNAME){ case "ns": window.addEventListener("scroll",window_event_scroll,false); break; case "ie": default: window.attachEvent("onscroll",window_event_scroll); } //獲取設(shè)置 //無(wú) document.body.parentNode.onscroll=window_event_scroll; } function window_event_scroll(){ var allTheScrollSticks=document.getElementsByTagName("div"); for(var i=0;i<allTheScrollSticks.length;i++){ if(allTheScrollSticks[i].className.match(/^((xScrollStick)|(.+ +xScrollStick)|(xScrollStick +.+)|(.+ +xScrollStick +.+))$/))try{allTheScrollSticks[i].Stick();}catch(e){} } } //**方法函數(shù)區(qū)****** function _xScrollStick_method_Stick(){ var x=this.offX, y=this.offY, po=this; this.style.position="absolute"; x+=document.body.parentNode.scrollLeft; y+=document.body.parentNode.scrollTop; this.style.left=x+"px"; this.style.top=y+"px"; } //**通用函數(shù)區(qū)*** //無(wú) //]]> </script> <style> .xScrollStick{ position:absolute; padding:15px; border:1px solid black; width:120px; height:24px; } .d1 { left:0px;top:0px; } .d2 { right:0px;top:0px; } .d3 { left:0px;bottom:0px; } .d4 { right:0px;bottom:0px; } </style> </head> <body style="text-align:center;"> <div   id="ydsuls2"   class="xScrollStick d1"> <a href="http://www.163.com">俺是浮動(dòng)條</a> </div> <div   id="o7rzqd7"   class="xScrollStick d2">俺是浮動(dòng)條2</div> <div   id="q7iz22m"   class="xScrollStick d3">俺是浮動(dòng)條3</div> <div   id="j7k7oaz"   class="xScrollStick d4">俺是浮動(dòng)條4</div> <div style="top:0px;width:400px;height:2000px;"> afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

頁(yè)面由兩個(gè)個(gè)部分組成：
頁(yè)面文件：
代碼拷貝框

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=gb2312" /> 
<title>xScrollStick Demo</title> 
<script type="text/javascript" src="sp/js/xscrollstick.js"></script> 
<style> 
.xScrollStick{ 
position:absolute; 
padding:15px; 
border:1px solid black; 
width:120px; 
height:24px; 
} 
.d1 { left:0px;top:0px; } 
.d2 { right:0px;top:0px; } 
.d3 { left:0px;bottom:0px; } 
.d4 { right:0px;bottom:0px; } 
</style> 
</head> 
<body style="text-align:center;"> 
<div class="xScrollStick d1"> 
<a href="http://www.163.com">俺是浮動(dòng)條</a> 
</div> 
<div class="xScrollStick d2">俺是浮動(dòng)條2</div> 
<div class="xScrollStick d3">俺是浮動(dòng)條3</div> 
<div class="xScrollStick d4">俺是浮動(dòng)條4</div> 
<div style="top:0px;width:400px;height:2000px;"> 
afosdhfosdhg<br> 
afosdhfosdhg<br>afosdhfosdhg<br> 
afosdhfosdhg<br>afosdhfosdhg<br> 
afosdhfosdhg<br>afosdhfosdhg<br> 
afosdhfosdhg<br>afosdhfosdhg<br> 
afosdhfosdhg<br>afosdhfosdhg<br> 
afosdhfosdhg<br> 
</div> 
</body> 
</html> 

js：
運(yùn)行代碼框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>xScrollStick Demo</title> <script type="text/javascript"> //<![CDATA[ //********************/ // x 系列之 xScrollStick // 作者：Hutia // 未經(jīng)同意不得轉(zhuǎn)載或用于商業(yè)用途 //********************/ /* 說(shuō)明： x系列是Hutia開(kāi)發(fā)的系列JS代碼，配合相應(yīng)的css后可以實(shí)現(xiàn)快速的自定義標(biāo)簽 目前xScrollStick支持的瀏覽器類型為：IE5.5, FF1.5 xScrollStick的標(biāo)簽為 <div   id="vpyupgs"   class="xScrollStick"> Content... </div> 支持屬性： 無(wú) 支持方法： 無(wú) */ //**載入CSS***** var xScrollStickCssFilePath="sp\/css\/xframe.css"; //document.write("<style>@import url("+xScrollStickCssFilePath+");</style>"); //**檢測(cè)瀏覽器種類***** var BROWSERNAME=""; switch(navigator.appName.toLowerCase()){ case "netscape": BROWSERNAME="ns"; break; case "microsoft internet explorer": default: BROWSERNAME="ie"; break; } //**設(shè)置初始化事件****** switch(BROWSERNAME){ case "ns": window.addEventListener("load",_xScrollStick_init,false); break; case "ie": default: window.attachEvent("onload",_xScrollStick_init); } //**初始化函數(shù)****** function _xScrollStick_init(){ var allTheScrollSticks=document.getElementsByTagName("div"); for(var i=0;i<allTheScrollSticks.length;i++){ if(allTheScrollSticks[i].className.match(/^((xScrollStick)|(.+ +xScrollStick)|(xScrollStick +.+)|(.+ +xScrollStick +.+))$/))_xScrollStick_event_doInit(allTheScrollSticks[i]); } window_event_scroll(); } //**事件響應(yīng)函數(shù)區(qū)****** function _xScrollStick_event_doInit(element){ //初始化變量 element.offX=element.offsetLeft; element.offY=element.offsetTop; //設(shè)置方法 element.Stick=_xScrollStick_method_Stick; //設(shè)置事件 switch(BROWSERNAME){ case "ns": window.addEventListener("scroll",window_event_scroll,false); break; case "ie": default: window.attachEvent("onscroll",window_event_scroll); } //獲取設(shè)置 //無(wú) document.body.parentNode.onscroll=window_event_scroll; } function window_event_scroll(){ var allTheScrollSticks=document.getElementsByTagName("div"); for(var i=0;i<allTheScrollSticks.length;i++){ if(allTheScrollSticks[i].className.match(/^((xScrollStick)|(.+ +xScrollStick)|(xScrollStick +.+)|(.+ +xScrollStick +.+))$/))try{allTheScrollSticks[i].Stick();}catch(e){} } } //**方法函數(shù)區(qū)****** function _xScrollStick_method_Stick(){ var x=this.offX, y=this.offY, po=this; this.style.position="absolute"; x+=document.body.parentNode.scrollLeft; y+=document.body.parentNode.scrollTop; this.style.left=x+"px"; this.style.top=y+"px"; } //**通用函數(shù)區(qū)*** //無(wú) //]]> </script> <style> .xScrollStick{ position:absolute; padding:15px; border:1px solid black; width:120px; height:24px; } .d1 { left:0px;top:0px; } .d2 { right:0px;top:0px; } .d3 { left:0px;bottom:0px; } .d4 { right:0px;bottom:0px; } </style> </head> <body style="text-align:center;"> <div   id="hl22ceq"   class="xScrollStick d1"> <a href="http://www.dhdzp.com">俺是浮動(dòng)條</a> </div> <div   id="uqhokxj"   class="xScrollStick d2">俺是浮動(dòng)條2</div> <div   id="5gi7uac"   class="xScrollStick d3">俺是浮動(dòng)條3</div> <div   id="njfhykb"   class="xScrollStick d4">俺是浮動(dòng)條4</div> <div style="top:0px;width:400px;height:2000px;"> afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br>afosdhfosdhg<br> afosdhfosdhg<br> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

ps:
這一作的技術(shù)含量較前兩個(gè)更低......沒(méi)辦法，JS本來(lái)的目的之一就是特效....

您可能感興趣的文章: