图片不中断转动代码，按钮节制向上向下转动

发布时间：2018-08-14 01:39:40 所属栏目：编程来源：站长网

导读：图片不中断转动代码，按钮节制向上向下转动，页面一加载就开始转动，鼠标放上后会遏制转动，这里行使的代码较量长，假如仅仅用作一个图片转动照旧不太保举的，可以把它改成一个通用的类。示例： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional

　　图片不中断转动代码，按钮节制向上向下转动，页面一加载就开始转动，鼠标放上后会遏制转动，这里行使的代码较量长，假如仅仅用作一个图片转动照旧不太保举的，可以把它改成一个通用的类。

　　示例：

<!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] + ""初始化错误rn请搜查标签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.IsNot<b>Opera</b> = (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="/images/logo.gif" width="150" height="50" border="0" hspace="1"> <img src="http://www.google.cn/intl/zh-CN_cn/images/google_bk.gif" width="150" height="50" border="0" hspace="1"> <img src="/images/logo.gif" width="150" height="50" border="0" hspace="1"> <img src="http://www.google.cn/intl/zh-CN_cn/images/google_bk.gif" width="150" height="50" border="0" hspace="1"> <img src="/images/logo.gif" width="150" height="50" border="0" hspace="1"> <img src="http://www.google.cn/intl/zh-CN_cn/images/google_bk.gif" width="150" height="50" border="0" hspace="1"> <img src="/images/logo.gif" width="150" height="50" border="0" hspace="1"> <img src="http://www.google.cn/intl/zh-CN_cn/images/google_bk.gif" width="150" height="50" border="0" hspace="1"> <img src="/images/logo.gif" width="150" height="50" border="0" hspace="1"> <img src="http://www.google.cn/intl/zh-CN_cn/images/google_bk.gif" 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><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys