xScrollStick - 蓝色理想

　xScrollStick

作者：hutia　时间： 2006-03-26　文档类型：原创　来自：蓝色理想

这是一个跟随滚动条漂浮的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"; } //**通用函数区*** //无 //]]>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

ps:
这一作的技术含量较前两个更低......没办法，JS本来的目的之一就是特效....

经典论坛讨论帖：
http://www.blueidea.com/bbs/newsdetail.asp?id=2462389

出处：蓝色理想
责任编辑：moby

◎进入论坛网页制作、网站综合版块参加讨论

相关文章

js版幻灯片效果

作者文章

静态网页加密


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule