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小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
js打造数组转json函数
Jan 14 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 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
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
python去掉字符串中重复字符的方法
2014/02/27 Python
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
Python过滤列表用法实例分析
2016/04/29 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
python学习基础之循环import及import过程
2018/04/22 Python
Python线程指南分享
2019/11/19 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
英国女性时尚品牌:Apricot
2018/12/04 全球购物
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
高中毕业自我鉴定
2013/12/13 职场文书
探亲假请假条
2014/04/11 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
2015年度企业工作总结
2015/05/21 职场文书
行为习惯主题班会
2015/08/14 职场文书