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 判断浏览器使用的语言示例代码
Mar 22 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
JScript实现地址选择功能
Aug 15 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
关于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基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python追加元素到列表的方法
2015/07/28 Python
python中redis的安装和使用
2016/12/04 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
影视艺术学院毕业生自荐信
2013/11/13 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
甘南现象心得体会
2014/09/11 职场文书
工作年限证明模板
2014/11/01 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
运动会通讯稿50字
2015/07/20 职场文书