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 相关文章推荐
JQuery下关于$.Ready()的分析
Dec 13 Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
js转html实体的方法
Sep 27 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
Node.js API详解之 module模块用法实例分析
May 13 Javascript
原生js实现购物车功能
Sep 23 Javascript
vue+openlayers绘制省市边界线
Dec 24 Vue.js
JavaScript异步操作中串行和并行
Nov 20 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 图片上传类代码
2009/07/17 PHP
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
onpropertypchange
2006/07/01 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
VUE长按事件需求详解
2017/10/18 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python字符串详细介绍
2015/05/09 Python
python避免死锁方法实例分析
2015/06/04 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
JPA面试常见问题
2016/11/14 面试题
建筑实习自我鉴定
2013/10/18 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
高中地理教学反思
2014/01/29 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
JS 基本概念详细介绍
2021/10/16 Javascript
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang