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获取UserControl内容为拼html时提供方便
Nov 02 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
js实现适配不同的屏幕大小
Apr 10 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
JavaScript中的Proxy对象
Nov 27 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 echo 输出字符串函数详解
2010/05/13 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
[原创]图片分页查看
2006/08/28 Javascript
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
Underscore源码分析
2015/12/30 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
详解Numpy中的广播原则/机制
2018/09/20 Python
如何理解python面向对象编程
2020/06/01 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
转党组织关系介绍信
2014/01/08 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
《司马光》教学反思
2016/02/22 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server