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 相关文章推荐
ext 代码生成器
Aug 07 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
理顺8个版本vue的区别(小结)
Sep 17 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
JS实现网站吸顶条
Jan 08 Javascript
JavaScript函数重载操作实例浅析
May 02 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使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
jQuery参数列表集合
2011/04/06 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
Node.js模块加载详解
2014/08/16 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
Python的log日志功能及设置方法
2019/07/11 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
什么是组件架构
2016/05/15 面试题
大学自荐信
2013/12/12 职场文书
大学生职业生涯规划书范文
2014/01/14 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
Python实现日志实时监测的示例详解
2022/04/06 Python