javascript AutoScroller 函数类


Posted in Javascript onMay 29, 2009
/* 
* Copyright (C) 2007-2009 skylark 
* Email:aohailin@gmail.com 
* Version:2.1 
* 原创程序,转载请保留版权 
*/ 
var $=function(o){return typeof o=="string"?document.getElementById(o):o;}; 
function AutoScroll(){ 
this.obj=[]; 
this.version="2.1"; 
this.Build();//初始化 
}; 
AutoScroll.prototype.Build=function(){ 
var me=this; 
//取得其他滚动事件 
var oldscroll=window.onscroll; 
window.onscroll=function(){ 
//保护其他滚动事件 
if("function"==typeof oldscroll){ 
oldscroll(); 
} 
//得到客户端浏览器参数,兼容IE,FF,Chrome 
this.common={ 
t:document.documentElement.scrollTop||document.body.scrollTop, 
h:document.documentElement.clientHeight||document.body.clientHeight, 
w:document.documentElement.clientWidth||document.body.clientWidth 
}; 
this.position=[]; 
for(var i=0;i<me.obj.length;i++){ 
try{ 
this.style={}; 
//获得客户端位置,设置了7种位置 
//为了让最小化自动适应位置,这里动态计算位置,所以滚动事件触发时,CPU消耗很大 
this.position[i]=[ 
{x:0,y:this.common.t}, 
{x:this.common.w-me.obj[i].obj.offsetWidth,y:this.common.t}, 
{x:0,y:(this.common.h+this.common.t-me.obj[i].obj.offsetHeight)/2+(this.common.t)/2}, 
{x:this.common.w-me.obj[i].obj.offsetWidth,y:(this.common.h+this.common.t-me.obj[i].obj.offsetHeight)/2+(this.common.t)/2}, 
{x:(this.common.w-me.obj[i].obj.offsetWidth)/2,y:(this.common.h+this.common.t-me.obj[i].obj.offsetHeight)/2+(this.common.t)/2}, 
{x:0,y:this.common.h+this.common.t-me.obj[i].obj.offsetHeight}, 
{x:this.common.w-me.obj[i].obj.offsetWidth,y:this.common.h+this.common.t-me.obj[i].obj.offsetHeight} 
]; 
//处理自定义样式 
this.style="object"==typeof me.obj[i].style?{x:me.obj[i].style.left,y:me.obj[i].style.top+this.common.t}:{x:this.position[i][me.obj[i].style].x,y:this.position[i][me.obj[i].style].y}; 
//定位 
me.obj[i].obj.style.left=this.style.x+"px"; 
me.obj[i].obj.style.top=this.style.y+"px"; 
}catch(e){ 
//功能是过滤无效obj 
for(var j=i;j<me.obj.length-1;j++){ 
me.obj[j]=me.obj[j+1]; 
me.obj.length=me.obj.length-1; 
} 
} 
} 
}; 
//初始化 
window.scroll(1,1); 
}; 
AutoScroll.prototype.Add=function(){ 
var obj=arguments[0]; 
//获得当前position 
var oldposition=$(obj.id).style.position; 
$(obj.id).style.position="absolute"; 
//不使用fixed,虽然高版本浏览器都已经支持fixed 
this.obj.push({ 
obj:$(obj.id), 
oldposition:oldposition, 
style:obj.style 
}); 
}; 
AutoScroll.prototype.Remove=function(){ 
var obj=arguments[0]; 
for(var i=0;i<this.obj.length;i++){ 
if(this.obj[i].obj==$(obj.id)){ 
//还原初始状态position 
this.obj[i].obj.style.position=this.obj[i].oldposition; 
//是否真正移除 
if(obj.remove){ 
this.obj[i].obj.innerHTML=""; 
document.body.removeChild(this.obj[i].obj); 
} 
//移除obj 
for(var j=i;j<this.obj.length-1;j++){ 
this.obj[j]=this.obj[j+1]; 
} 
this.obj.length=this.obj.length-1; 
break; 
} 
} 
}; 
var Scroller=new AutoScroll();
Javascript 相关文章推荐
js控制CSS样式属性语法对照表
Dec 11 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
javascript常用代码段搜集
Dec 04 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 Javascript
Vue学习之常用指令实例详解
Jan 06 Javascript
关于JavaScript的一些看法
May 27 #Javascript
广告切换效果(缓动切换)
May 27 #Javascript
js 图片缩放(按比例)控制代码
May 27 #Javascript
图片上传即时显示缩略图的js代码
May 27 #Javascript
JavaScript 闭包深入理解(closure)
May 27 #Javascript
jQuery 剧场版 你必须知道的javascript
May 27 #Javascript
javascript 日期时间函数(经典+完善+实用)
May 27 #Javascript
You might like
最省空间的计数器
2006/10/09 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
javascript面向对象之Javascript 继承
2010/05/04 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
Python itertools模块详解
2015/05/09 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
简单了解Python write writelines区别
2020/02/27 Python
python构造IP报文实例
2020/05/05 Python
如何利用python发送邮件
2020/09/26 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
同程旅游英文网站:LY.com
2018/11/13 全球购物
优秀团支部事迹材料
2014/02/08 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
借款协议书
2014/04/12 职场文书
学校搬迁方案
2014/06/15 职场文书
领导参观欢迎词
2015/01/26 职场文书
银行柜员工作心得体会
2016/01/23 职场文书