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 相关文章推荐
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
jQuery中dequeue()方法用法实例
Dec 29 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
js+css3实现旋转效果
Jan 20 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
webpack4 从零学习常用配置(小结)
May 28 Javascript
VueJS 取得 URL 参数值的方法
Jul 19 Javascript
Vue实现简单计算器案例
Feb 25 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防止注入攻击实例分析
2014/11/03 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
基于jquery封装的一个js分页
2011/11/15 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
python访问sqlserver示例
2014/02/10 Python
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
Python中List.count()方法的使用教程
2015/05/20 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
店长岗位职责
2013/11/21 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
2015年电工工作总结
2015/04/10 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
基于Python实现一个春节倒计时脚本
2022/01/22 Python