当前位置 : 主页>网页制作>Javascript>列表

跟随滚动条漂浮的JS特效

来源：互联网 作者：west263.com 时间：2008-02-23

西部数码-全国虚拟主机10强！40余项虚拟主机管理功能,全国领先!双线多线虚拟主机南北访问畅通无阻!免费赠送企业邮局,.CN域名,自助建站480元起,免费试用7天,满意再付款! P4主机租用799元/月.月付免压金!

这是一个跟随滚动条漂浮的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>

文章整理：西部数码--专业提供域名注册、虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

[打印] [关闭]

相关文章

JavaScript判断Form中的Radio是

网页技巧：妥善处理JavaScript中

整理：常用的网页特殊效果JS代码

网页表单的javascript集成验证方

一个兼容IE、Firefox和Opera浏览

上一篇：JS让浏览器实现复读机的功能
下一篇：JavaScript应用：Iframe自适应其加载的内容高度

热点关注

IDC资讯虚拟主机域名注册托管租用 vps主机智能建站
网站运营建站经验策划盈利搜索优化网站推广免费资源
网站联盟联盟新闻联盟介绍联盟点评网赚技巧
行业资讯业界动态搜索引擎网络游戏门户动态电子商务广告传媒
网络编程 Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术 Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护
软件技巧其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷 Internet Explorer
网页制作 FrontPages Dreamweaver Javascript css photoshop fireworks Flash
程序设计 Java技术 C/C++ VB delphi
网络知识网络协议网络安全网络管理组网方案 Cisco技术
操作系统 Win2000 WinXP Win2003 Mac OS Linux FreeBSD

版权所有西部数码(www.west263.com)
CopyRight (c) 2002~2007 west263.com all right reserved.
公司地址：四川成都市万和路90号天象大厦4楼　邮编：610031
电话总机：028-86263408 86263960 86264018 86267838 86262244 86263408
售前咨询：总机转201 202 203 204 205 206 207 208
售后服务：总机转211 212 213 214 217 218 晚上0点以后拔分机225