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 相关文章推荐
javascript背投广告代码的完善
Apr 08 Javascript
javascript 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
深入理解javascript作用域和闭包
Sep 23 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
微信小程序 数据缓存实现方法详解
Aug 26 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 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
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
多媒体专业自我鉴定
2014/02/28 职场文书
中秋寄语大全
2014/04/11 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
指导老师鉴定意见
2015/06/05 职场文书