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 相关文章推荐
date.parse在IE和FF中的区别
Jul 29 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
AngularJS基础知识
Dec 21 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
学习javascript文件加载优化
Feb 19 Javascript
利用python分析access日志的方法
Oct 26 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
关于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
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
Python的time模块中的常用方法整理
2015/06/18 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
毕业生医学检验求职信
2013/10/16 职场文书
集体备课反思
2014/02/12 职场文书
计生工作先进事迹
2014/08/15 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
会计入职心得体会
2016/01/22 职场文书
python turtle绘图命令及案例
2021/11/23 Python
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏