亚洲欧美人成网站线观看,最近中文字幕大全免费版在线,天天澡天天摸天天爽免费

　xScrollStick

作者：hutia　時間： 2006-03-26　文檔類型：原創(chuàng)　來自：藍色理想

這是一個跟隨滾動條漂浮的JS特效，就是說滾動條滾動而元素相對屏幕位置不變

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

1. 兼容IE6.0+ & FF1.5+
2. 使用非常簡單，屬于菜鳥最愛的那種拿來就能用的，見下面說明
3. 元素之間不會起沖突，一頁中可以有n個特效，多元素使用無代碼冗余

缺點有：

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

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

示例1：

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

示例2：

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

演示：

運行代碼框
<!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è)用途 //********************/ /* 說明： x系列是Hutia開發(fā)的系列JS代碼，配合相應(yīng)的css后可以實現(xiàn)快速的自定義標(biāo)簽目前xScrollStick支持的瀏覽器類型為：IE5.5, FF1.5 xScrollStick的標(biāo)簽為 <div class="xScrollStick"> Content... </div> 支持屬性：無支持方法：無 */ //**載入CSS***** var xScrollStickCssFilePath="sp\/css\/xframe.css"; //document.write("<style>@import url("+xScrollStickCssFilePath+");</style>"); //**檢測瀏覽器種類***** 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è)置 //無 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ū)*** //無 //]]> </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 >俺是浮動條</a> </div> <div class="xScrollStick d2">俺是浮動條2</div> <div class="xScrollStick d3">俺是浮動條3</div> <div class="xScrollStick d4">俺是浮動條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 全部選擇提示：你可先修改部分代碼，再按運行]

頁面由兩個個部分組成：

頁面文件：

代碼拷貝框
<!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 >俺是浮動條</a> </div> <div class="xScrollStick d2">俺是浮動條2</div> <div class="xScrollStick d3">俺是浮動條3</div> <div class="xScrollStick d4">俺是浮動條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：

運行代碼框
//<![CDATA[ //********************/ // x 系列之 xScrollStick // 作者：Hutia // 未經(jīng)同意不得轉(zhuǎn)載或用于商業(yè)用途 //********************/ /* 說明： x系列是Hutia開發(fā)的系列JS代碼，配合相應(yīng)的css后可以實現(xiàn)快速的自定義標(biāo)簽目前xScrollStick支持的瀏覽器類型為：IE5.5, FF1.5 xScrollStick的標(biāo)簽為 <div class="xScrollStick"> Content... </div> 支持屬性：無支持方法：無 */ //**載入CSS***** var xScrollStickCssFilePath="sp\/css\/xframe.css"; //document.write("<style>@import url("+xScrollStickCssFilePath+");</style>"); //**檢測瀏覽器種類***** 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è)置 //無 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ū)*** //無 //]]>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

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

經(jīng)典論壇討論帖：
http://www.95time.cn/bbs/newsdetail.asp?id=2462389

出處：藍色理想
責(zé)任編輯：moby

◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論

相關(guān)文章

更多相關(guān)鏈接

JavaScript經(jīng)典效果集錦

COOL而實用的動態(tài)效果

常用JS網(wǎng)頁廣告代碼

xWin之JS版

js版幻燈片效果

作者文章

靜態(tài)網(wǎng)頁加密


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計比賽網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點最新

站點最新列表

周大福“敬•自然”設(shè)計大賽開啟

國際體驗設(shè)計大會7月將在京舉行

中國國防科技信息中心標(biāo)志征集

云計算如何讓安全問題可控

云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機會

阿里行云

云手機年終巨獻，送禮標(biāo)配299起

阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機主題設(shè)計大賽

欄目最新

欄目最新列表

淺談JavaScript編程語言的編碼規(guī)范

如何在illustrator中繪制臺歷

Ps簡單繪制一個可愛的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡單的作品展示頁面

CSS定位機制之一:普通流

25個最佳最閃亮的Eclipse開發(fā)項目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx