教程集 > jQuery > jquery 教程 > 正文上下滚动

上下滚动

发布时间：2023-12-25 编辑：jiaochengji.com

教程集为您提供上下滚动等资源，欢迎您收藏本站，我们将为您提供最新的上下滚动资源

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <title>无标题文档</title>  <script type="text/javascript">  function Marquee()  {  	this.ID = document.getElementById(arguments[0]);  	if(!this.ID)  	{  		alert("您要设置的\""   arguments[0]   "\"初始化错误\r\n请检查标签ID设置是否正确!");  		this.ID = -1;  		return;  	}  	this.Direction = this.Width = this.Height = this.DelayTime = this.WaitTime = this.CTL = this.StartID = this.Stop = this.MouseOver = 0;  	this.Step = 1;  	this.Timer = 30;  	this.DirectionArray = {"top":0 , "up":0 , "bottom":1 , "down":1 , "left":2 , "right":3};  	if(typeof arguments[1] == "number" || typeof arguments[1] == "string")this.Direction = arguments[1];  	if(typeof arguments[2] == "number")this.Step = arguments[2];  	if(typeof arguments[3] == "number")this.Width = arguments[3];  	if(typeof arguments[4] == "number")this.Height = arguments[4];  	if(typeof arguments[5] == "number")this.Timer = arguments[5];  	if(typeof arguments[6] == "number")this.DelayTime = arguments[6];  	if(typeof arguments[7] == "number")this.WaitTime = arguments[7];  	if(typeof arguments[8] == "number")this.ScrollStep = arguments[8];  	this.ID.style.overflow = this.ID.style.overflowX = this.ID.style.overflowY = "hidden";  	this.ID.noWrap = true;  	this.IsNotOpera = (navigator.userAgent.toLowerCase().indexOf("opera") == -1);  	if(arguments.length >= 7)this.Start();  }  Marquee.prototype.Start = function()  {  	if(this.ID == -1)return;  	if(this.WaitTime < 800)this.WaitTime = 800;  	if(this.Timer < 20)this.Timer = 20;  	if(this.Width == 0)this.Width = parseInt(this.ID.style.width);  	if(this.Height == 0)this.Height = parseInt(this.ID.style.height);  	if(typeof this.Direction == "string")this.Direction = this.DirectionArray[this.Direction.toString().toLowerCase()];  	this.HalfWidth = Math.round(this.Width / 2);  	this.HalfHeight = Math.round(this.Height / 2);  	this.BakStep = this.Step;  	this.ID.style.width = this.Width   "px";  	this.ID.style.height = this.Height   "px";  	if(typeof this.ScrollStep != "number")this.ScrollStep = this.Direction > 1 ? this.Width : this.Height;  	var templateTop = "<table cellspacing='0' cellpadding='0' style='border-collapse:collapse;display:inline;'><tr><td noWrap=true style='white-space: nowrap;word-break:keep-all;'>MSCLASS_TEMP_HTML</td><td noWrap=true style='white-space: nowrap;word-break:keep-all;'>MSCLASS_TEMP_HTML</td></tr></table>";  	var templateTop = "<table cellspacing='0' cellpadding='0' style='border-collapse:collapse;'><tr><td>MSCLASS_TEMP_HTML</td></tr><tr><td>MSCLASS_TEMP_HTML</td></tr></table>";  	var msobj = this;  	msobj.tempHTML = msobj.ID.innerHTML;  	if(msobj.Direction <= 1)  	{  		msobj.ID.innerHTML = templateTop.replace(/MSCLASS_TEMP_HTML/g,msobj.ID.innerHTML);  	}  	else  	{  		if(msobj.ScrollStep == 0 && msobj.DelayTime == 0)  		{  			msobj.ID.innerHTML  = msobj.ID.innerHTML;  		}  		else  		{  			msobj.ID.innerHTML = templateLeft.replace(/MSCLASS_TEMP_HTML/g,msobj.ID.innerHTML);  		}  	}  	var timer = this.Timer;  	var delaytime = this.DelayTime;  	var waittime = this.WaitTime;  	msobj.StartID = function(){msobj.Scroll()}  	msobj.Continue = function()  				{  					if(msobj.MouseOver == 1)  					{  						setTimeout(msobj.Continue,delaytime);  					}  					else  					{	clearInterval(msobj.TimerID);  						msobj.CTL = msobj.Stop = 0;  						msobj.TimerID = setInterval(msobj.StartID,timer);  					}  				}  	msobj.Pause = function()  			{  				msobj.Stop = 1;  				clearInterval(msobj.TimerID);  				setTimeout(msobj.Continue,delaytime);  			}  	msobj.Begin = function()  		{  			msobj.ClientScroll = msobj.Direction > 1 ? msobj.ID.scrollWidth / 2 : msobj.ID.scrollHeight / 2;  			if((msobj.Direction <= 1 && msobj.ClientScroll <= msobj.Height   msobj.Step) || (msobj.Direction > 1 && msobj.ClientScroll <= msobj.Width   msobj.Step))			{  				msobj.ID.innerHTML = msobj.tempHTML;  				delete(msobj.tempHTML);  				return;  			}  			delete(msobj.tempHTML);  			msobj.TimerID = setInterval(msobj.StartID,timer);  			if(msobj.ScrollStep < 0)return;  			msobj.ID.onmousemove = function(event)  						{  							if(msobj.ScrollStep == 0 && msobj.Direction > 1)  							{  								var event = event || window.event;  								if(window.event)  								{  									if(msobj.IsNotOpera)  									{  										msobj.EventTop = event.srcElement.id == msobj.ID.id ? event.offsetY - msobj.ID.scrollTop : event.srcElement.offsetTop - msobj.ID.scrollTop   event.offsetY;  									}  									else  									{  										msobj.ScrollStep = null;  										return;  									}  								}  								else  								{  									msobj.EventTop = event.layerY - msobj.ID.scrollTop;  								}  								msobj.Direction = msobj.EventTop > msobj.HalfHeight ? 3 : 2;  								msobj.AbsCenter = Math.abs(msobj.HalfHeight - msobj.EventTop);  								msobj.Step = Math.round(msobj.AbsCenter * (msobj.BakStep*2) / msobj.HalfHeight);  							}  						}  			msobj.ID.onmouseover = function()  						{  							if(msobj.ScrollStep == 0)return;  							msobj.MouseOver = 1;  							clearInterval(msobj.TimerID);  						}  			msobj.ID.onmouseout = function()  						{  							if(msobj.ScrollStep == 0)  							{  								if(msobj.Step == 0)msobj.Step = 1;  								return;  							}  							msobj.MouseOver = 0;  							if(msobj.Stop == 0)  							{  								clearInterval(msobj.TimerID);  								msobj.TimerID = setInterval(msobj.StartID,timer);  							}  						}  		}  	setTimeout(msobj.Begin,waittime);  }  Marquee.prototype.Scroll = function()  {  	switch(this.Direction)  	{  		case 0:  			this.CTL  = this.Step;  			if(this.CTL >= this.ScrollStep && this.DelayTime > 0)  			{  				this.ID.scrollTop  = this.ScrollStep   this.Step - this.CTL;  				this.Pause();  				return;  			}  			else  			{  				if(this.ID.scrollTop >= this.ClientScroll)  				{  					this.ID.scrollTop -= this.ClientScroll;  				}  				this.ID.scrollTop  = this.Step;  			}  		break;  		case 1:  			this.CTL  = this.Step;  			if(this.CTL >= this.ScrollStep && this.DelayTime > 0)  			{  				this.ID.scrollTop -= this.ScrollStep   this.Step - this.CTL;  				this.Pause();  				return;  			}  			else  			{  				if(this.ID.scrollTop <= 0)  				{  					this.ID.scrollTop  = this.ClientScroll;  				}  				this.ID.scrollTop -= this.Step;  			}  		break;  		case 2:  			this.CTL  = this.Step;  			if(this.CTL >= this.ScrollStep && this.DelayTime > 0)  			{  				this.ID.scrollTop  = this.ScrollStep   this.Step - this.CTL;  				this.Pause();  				return;  			}  			else  			{  				if(this.ID.scrollTop >= this.ClientScroll)  				{  					this.ID.scrollTop -= this.ClientScroll;  				}  				this.ID.scrollTop  = this.Step;  			}  		break;  		case 3:  			this.CTL  = this.Step;  			if(this.CTL >= this.ScrollStep && this.DelayTime > 0)  			{  				this.ID.scrollTop -= this.ScrollStep   this.Step - this.CTL;  				this.Pause();  				return;  			}  			else  			{  				if(this.ID.scrollTop <= 0)  				{  					this.ID.scrollTop  = this.ClientScroll;  				}  				this.ID.scrollTop -= this.Step;  			}  		break;  	}  }  //-->  </script>  </head>  <body>  <div id="marqueediv1" style="width:632px;height:52px;overflow:hidden; border:1px solid #666;">  <img src="http://p1.jquerycn.cn/111cn/2/2/1474575155_9059.gif" width="150" height="50" border="0" hspace="1">  <img src="" width="150" height="50" border="0" hspace="1">  <img src="http://p1.jquerycn.cn/111cn/2/2/1474575155_8448.gif" width="150" height="50" border="0" hspace="1">  <img src="" width="150" height="50" border="0" hspace="1">  <img src="http://p1.jquerycn.cn/111cn/2/2/1474575156_9130.gif" width="150" height="50" border="0" hspace="1">  <img src="" width="150" height="50" border="0" hspace="1">  <img src="http://p1.jquerycn.cn/111cn/2/2/1474575156_3446.gif" width="150" height="50" border="0" hspace="1">  <img src="" width="150" height="50" border="0" hspace="1">  <img src="http://p1.jquerycn.cn/111cn/2/2/1474575156_7595.gif" width="150" height="50" border="0" hspace="1">  <img src="" width="150" height="50" border="0" hspace="1">  </div>  <input type="button" value="向上" id="top0"> <input type="button" value="向下" id="bottom1">  <script type="text/javascript">  var marquee3=new Marquee("marqueediv1");  marquee3.Direction="top";  marquee3.Step=1;  marquee3.Width=632;  marquee3.Height=52;  marquee3.Timer=5;  marquee3.ScrollStep=1;//此句禁止鼠标控制  marquee3.Start();  var top0 = document.getElementById("top0");//此句控制兼容FF  var bottom1 = document.getElementById("bottom1");//此句控制兼容FF  top0.onmouseover=function(){marquee3.Direction=2}  top0.onmouseout=top0.onmouseup=function(){marquee3.Step=marquee3.BakStep}  top0.onmousedown=bottom1.onmousedown=function(){marquee3.Step=marquee3.BakStep 2}  bottom1.onmouseover=function(){marquee3.Direction=3}  bottom1.onmouseout=bottom1.onmouseup=function(){marquee3.Step=marquee3.BakStep}  </script>  </body>  </html>

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

您可能感兴趣的文章：
学习：使用CSS修改IE浏览器滚动条的参数
 jQuery滚动效果插件 jQuery.SerialScroll
html5中当鼠标滚轮正在被滚动时运行的脚本的事件onmousewheel
Javascript 连续滚动字幕的实现代码示例
 javascript禁用浏览器滚动条的方法
 一个JQuery写的点击上下滚动的小例子
 css中去除网页滚动条示例程序
 Jquery iframe内部出滚动条
 Javascript实现图片上下左右滚动的代码
 jQuery表格滚动插件 Chromatable

上一篇：js定义热键代码下一篇：js弹出层效果

[关闭]

上下滚动

最近更新

浏览排行