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 相关文章推荐
给网站上的广告“加速”显示的方法
Apr 08 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 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
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
Python易忽视知识点小结
2015/05/25 Python
利用python批量检查网站的可用性
2016/09/09 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
实例讲解python中的协程
2018/10/08 Python
python如何将两个txt文件内容合并
2019/10/18 Python
Python绘图实现显示中文
2019/12/04 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
主题党日活动总结
2014/07/08 职场文书
房屋认购协议书
2015/01/29 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫