跟隨捲軸漂浮的JS特效

來源:互聯網
上載者:User
js|跟隨|特效

這是一個跟隨捲軸漂浮的JS特效,就是說捲軸滾動而元素相對螢幕位置不變

網上有很多類似的效果,本代碼比較起來有如下優點:

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

缺點有:

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

使用說明:
在頁面中引用JS包,然後在需要特效的div上設定class為xScrollStick即可,當然不要忘記給每個元素寫上你希望它固定的位置

樣本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// 未經同意不得轉載或用於商業用途//********************//*說明: x系列是Hutia開發的系列JS代碼,配合相應的css後可以實現快速的自訂標籤 目前xScrollStick支援的瀏覽器類型為:IE5.5, FF1.5 xScrollStick的標籤為 <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;}//**設定初始化事件******switch(BROWSERNAME){ case "ns": window.addEventListener("load",_xScrollStick_init,false); break; case "ie": default: window.attachEvent("onload",_xScrollStick_init);}//**初始化函數******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();}//**事件響應函數區******function _xScrollStick_event_doInit(element){ //初始設定變數 element.offX=element.offsetLeft; element.offY=element.offsetTop; //設定方法 element.Stick=_xScrollStick_method_Stick; //設定事件 switch(BROWSERNAME){ case "ns": window.addEventListener("scroll",window_event_scroll,false); break; case "ie": default: window.attachEvent("onscroll",window_event_scroll); } //擷取設定 //無 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){} }}//**方法函數區******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"; }//**通用函數區***//無//]]></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">俺是浮動條</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 href="http://www.163.com">俺是浮動條</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
//  未經同意不得轉載或用於商業用途
//********************/

/*
說明:
  x系列是Hutia開發的系列JS代碼,配合相應的css後可以實現快速的自訂標籤
  目前xScrollStick支援的瀏覽器類型為:IE5.5, FF1.5

  xScrollStick的標籤為
   <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;
}

//**設定初始化事件******
switch(BROWSERNAME){
 case "ns":
  window.addEventListener("load",_xScrollStick_init,false);
 break;
 case "ie":
 default:
  window.attachEvent("onload",_xScrollStick_init);
}

//**初始化函數******
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();
}


//**事件響應函數區******

function _xScrollStick_event_doInit(element){
 //初始設定變數
 element.offX=element.offsetLeft;
 element.offY=element.offsetTop;
 
 //設定方法
 element.Stick=_xScrollStick_method_Stick;
 
 //設定事件
 switch(BROWSERNAME){
  case "ns":
   window.addEventListener("scroll",window_event_scroll,false);
  break;
  case "ie":
  default:
   window.attachEvent("onscroll",window_event_scroll);
 }
 
 //擷取設定
 //無
 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){}
 }
}

//**方法函數區******
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";
 
}

//**通用函數區***
//無
//]]>

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



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。