javascript AutoScroller 函数类

 更新时间:2009年05月29日 20:33:01   作者:  
javascript AutoScroller 自动滚动类代码,学习类的朋友可以参考下。
复制代码 代码如下:

/*
* 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();

相关文章

  • js实现导入导出功能实例代码(FileSave.js)

    js实现导入导出功能实例代码(FileSave.js)

    这篇文章主要给大家介绍了关于js实现导入导出功能(FileSave.js)的相关资料,FileSaver.js是在客户端保存文件的解决方案,非常适合在客户端上生成文件的Web应用,需要的朋友可以参考下
    2023-11-11
  • mongoose之bulkWrite操作使用实例

    mongoose之bulkWrite操作使用实例

    这篇文章主要为大家介绍了mongoose之bulkWrite操作使用实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Vue2.0+ElementUI实现表格翻页的实例

    Vue2.0+ElementUI实现表格翻页的实例

    下面小编就为大家带来一篇Vue2.0+ElementUI实现表格翻页的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • js判断运行jsp页面的浏览器类型以及版本示例

    js判断运行jsp页面的浏览器类型以及版本示例

    做了一个判断浏览器类型和版本号的业务,记录下相关的js代码,个人感觉还不错,需要的朋友可以参考下
    2013-10-10
  • JavaScript判断图片是否已经加载完毕的方法汇总

    JavaScript判断图片是否已经加载完毕的方法汇总

    在网上有很多关于判断图片是否已经加载完毕的文章,但是有的浏览器并不适合,下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕的方法汇总,需要的朋友参考下
    2016-02-02
  • pdfmake生成pdf的使用方法

    pdfmake生成pdf的使用方法

    本文介绍了如何使用pdfmake第三方库在项目中根据模板生成PDF文件,文中还提到了常用的配置,如页眉和页脚效果,对pdfmake pdf使用方法感兴趣的朋友一起看看吧
    2024-09-09
  • js回溯法计算最佳旅行线路代码实例

    js回溯法计算最佳旅行线路代码实例

    这篇文章主要介绍了js回溯法计算最佳旅行线路代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • Bootstrap图片轮播组件使用实例解析

    Bootstrap图片轮播组件使用实例解析

    图片轮播组件是一个在网页中很常见的技术,这篇文章主要为大家详细介绍了Bootstrap图片轮播组件使用实例,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • JS面试必备之手写call/apply/bind/new

    JS面试必备之手写call/apply/bind/new

    在JavaScript中,call、apply、bind、new是Function对象自带的三个方法,也是面试时常考的知识点,所以本文就来和大家讲讲如何手写实现这四个方法吧
    2023-05-05
  • 一些常用且实用的原生JavaScript函数

    一些常用且实用的原生JavaScript函数

    日常开始中常用到的一些原生JavaScript函数,比较实用, 今天特地整理一下,分享给大家,希望对大家有用,会常更新,同时也欢迎大家补充.
    2010-09-09

最新评论