js无间向上滚动代码-jQuery中文网

js无间向上滚动代码

2017-09-15 00:00:00 发布 195 浏览

页面报错/反馈

已收藏点赞

提示：您可以先修改部分代码再运行

js无间向上滚动代码        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  <title></title>      <script type="text/javascript">  var $ = function (id) {      return "string" == typeof id ? document.getElementById(id) : id;  };    var Class = {    create: function() {      return function() {        this.initialize.apply(this, arguments);      }    }  }    Object.extend = function(destination, source) {  	for (var property in source) {  		destination[property] = source[property];  	}  	return destination;  }    function addEventHandler(oTarget, sEventType, fnHandler) {  	if (oTarget.addEventListener) {  		oTarget.addEventListener(sEventType, fnHandler, false);  	} else if (oTarget.attachEvent) {  		oTarget.attachEvent("on"   sEventType, fnHandler);  	} else {  		oTarget["on"   sEventType] = fnHandler;  	}  };      var Scroller = Class.create();  Scroller.prototype = {    initialize: function(idScroller, idScrollMid, options) {      var oScroll = this, oScroller = $(idScroller), oScrollMid =     $(idScrollMid);  	  	this.heightScroller = oScroller.offsetHeight;  	this.heightList = oScrollMid.offsetHeight;  	  	if(this.heightList <= this.heightScroller) return;  	  	oScroller.style.overflow = "hidden";  	oScrollMid.appendChild(oScrollMid.cloneNode(true));  	  	this.oScroller = oScroller;	  	this.timer = null;  	  	this.SetOptions(options);  	  	this.side = 1;//1是上 -1是下  	switch (this.options.Side) {  		case "down" :  			this.side = -1;  			break;  		case "up" :  		default :  			this.side = 1;  	}  	  	addEventHandler(oScrollMid , "mouseover", function() { oScroll.Stop    (); });  	addEventHandler(oScrollMid , "mouseout", function() { oScroll.Start    (); });  	  	if(this.options.PauseStep <= 0 || this.options.PauseHeight <= 0)     this.options.PauseStep = this.options.PauseHeight = 0;  	this.Pause = 0;  	  	this.Start();    },    //设置默认属性    SetOptions: function(options) {      this.options = {//默认值  	  Step:			1,//每次变化的px量  	  Time:			20,//速度(越大越慢)  	  Side:			"up",//滚动方向:"up"是上，"down"是下  	  PauseHeight:	0,//隔多高停一次  	  PauseStep:	1000//停顿时间(PauseHeight大于0该参数才有效)      };      Object.extend(this.options, options || {});    },    //滚动    Scroll: function() {  	var iScroll = this.oScroller.scrollTop, iHeight = this.heightList,     time = this.options.Time, oScroll = this, iStep = this.options.Step *     this.side;  	  	if(this.side > 0){  		if(iScroll >= (iHeight * 2 - this.heightScroller)){ iScroll     -= iHeight; }  	} else {  		if(iScroll <= 0){ iScroll  = iHeight; }  	}  	  	if(this.options.PauseHeight > 0){  		if(this.Pause >= this.options.PauseHeight){  			time = this.options.PauseStep;  			this.Pause = 0;  		} else {  			this.Pause  = Math.abs(iStep);  			this.oScroller.scrollTop = iScroll   iStep;  		}  	} else { this.oScroller.scrollTop = iScroll   iStep; }  	  	this.timer = window.setTimeout(function(){ oScroll.Scroll(); },     time);    },    //开始    Start: function() {  	this.Scroll();    },    //停止    Stop: function() {  	clearTimeout(this.timer);    }  };    window.onload = function(){  	new Scroller("idScroller", "idScrollMid",{ PauseHeight:25 });  }  </script>  <style>  #idScroller *{margin:0px; padding:0px;}  #idScroller{line-height:25px;width:500px; height:50px; overflow:hidden;     border:1px solid #000000;}  #idScroller ul{width:100%}  #idScroller li{width:50%;  float:left; overflow:hidden; list-style:none;}  </style>  <p id="idScroller">    </p><div id="idScrollMid">      <ul>        <li>111111111111111111111</li>        <li>211111111111111111111</li>        <li>311111111111111111111</li>        <li>411111111111111111111</li>        <li>511111111111111111111</li>        <li>611111111111111111111</li>      </ul>      <div>    </div>  </div>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：

登录查看全部

参与评论

js无间向上滚动代码

参与评论

评论留言

还没有评论留言，赶紧来抢楼吧~~

给这篇文章打个标签吧~