<html>
<head>
<title>中国站长天空-网页特效-综合特效-4个方向的无间歇滚动和间歇滚动</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
a,body,select{font-size:12px;text-decoration:none;}
</style>
<script type="text/javascript">
/******************************************************************
* 通用不间断滚动JS封装类
* 深蓝蝴蝶
* 使用方法
* new Marquee("marquee",0,1,760,52,50,5000,3000)
* new Marquee("marquee",0,1,760,104,50,5000,3000,52)
*
* 参数说明:
* 参数1 marquee 容器ID
* 参数2 0 向上滚动(0-向上 1-向下 2-向左 3-向右)
* 参数3 1 滚动的步长(数值越大,滚动越快)
* 参数4 760 容器可视宽度
* 参数5 52 容器可视高度
* 参数6 50 定时器(数值越小,滚动的速度越快 1000=1秒,建议不小于20)
* 参数7 5000 间歇停顿延迟时间(0为不停顿,1000=1秒)
* 参数8 3000 开始时的等待时间(0为不等待,1000=1秒)
* 参数9 (52) 间歇滚动间距(可选,该数值与延迟均为0则为鼠标悬停控制)
* 使用建议:
* 1、建议直接赋予容器的显示区域的宽度和高度，
* 如(<div id="marquee" style="width:760px;height:52px;">......</div>)
* 2、建议为容器添加样式overflow=auto，
* 如(<div id="marquee" style="width:760px;height:52px;overflow:auto;">......</div>)
* 3、为了更准确的获取滚动区域的宽度和高度，请尽可能将各滚动单位直接赋予正确宽高度
* 4、对于TABLE标记的横向滚动，需要对TABLE添加样式display=inline，
* 如 (<div id="marquee" style="width:760px;height:52px;overflow:auto;"><table style="display:inline">......</table></div>)
* 5、对于翻屏滚动或间歇滚动，要注意各滚动单位间的间距，
* 同时需要对容器的可视高度和可视宽度做好准确的设置，对于各滚动单位间的间距可以通过设置行间距或者单元格的高宽度来进行调整
* 6、对于LI自动换行的问题暂时没有更好的解决办法，建议将其转换成表格(TABLE)的形式来达到同等的效果
*
* 注意：仅用div的时候需要用<nobr>来包括div
*******************************************************************/
var Marquee=function(){this.ID=document.getElementById(arguments[0]);this.Direction=arguments[1];this.Step=arguments[2];this.BakStep=arguments[2];this.Width=arguments[3];this.HalfWidth=Math.round(arguments[3]/2);this.Height=arguments[4];this.Timer=arguments[5];this.DelayTime=arguments[6];this.WaitTime=arguments[7];if(arguments[8] || arguments[8]==0){this.ScrollStep=arguments[8];}else{this.ScrollStep=this.Direction>1?this.Width:this.Height;}this.Correct=0;this.CTL=0;this.StartID=0;this.Stop=0;this.MouseOver=0;this.ID.style.overflow="hidden";this.ID.style.overflowX="hidden";this.ID.style.overflowY="hidden";this.ID.noWrap=true;this.ID.style.width=this.Width+"px";this.ID.style.height=this.Height+"px";this.ClientScroll=this.Direction>1?parseInt(this.ID.scrollWidth):parseInt(this.ID.scrollHeight);this.ID.innerHTML+=this.ID.innerHTML;this.IsNotOpera=(navigator.userAgent.toLowerCase().indexOf("opera")==-1);if(arguments.length>=8){this.Start(this,this.Timer,this.DelayTime,this.WaitTime);}}
Marquee.prototype.Start=function(msobj,timer,delaytime,waittime){
msobj.StartID=function(){msobj.Scroll();};
msobj.Continue=function(){if(msobj.MouseOver==1){setTimeout(msobj.Continue,delaytime);}else{clearInterval(msobj.TimerID);msobj.CTL=0;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.ID.onmousemove=function(evt){if(msobj.ScrollStep==0 && msobj.Direction>1){var event=null;if(window.event){event=window.event;if(msobj.IsNotOpera){msobj.EventLeft=event.srcElement.id==msobj.ID.id?parseInt(event.offsetX)-parseInt(msobj.ID.scrollLeft):parseInt(event.srcElement.offsetLeft)-parseInt(msobj.ID.scrollLeft)+parseInt(event.offsetX);}else{msobj.ScrollStep=null;return;}}else{event=evt;msobj.EventLeft=parseInt(event.layerX)-parseInt(msobj.ID.scrollLeft);}msobj.Direction=msobj.EventLeft>msobj.HalfWidth?3:2;msobj.AbsCenter=Math.abs(msobj.HalfWidth-msobj.EventLeft);msobj.Step=Math.round(msobj.AbsCenter*(msobj.BakStep*2)/msobj.HalfWidth);}};
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);}};msobj.TimerID=setInterval(msobj.StartID,timer);};setTimeout(msobj.Begin,waittime);}
Marquee.prototype.Scroll=function(){if(this.Correct==0 && this.CTL>this.ClientScroll){this.ClientScroll=(this.Direction>1)?Math.round(parseInt(this.ID.scrollWidth)/2):Math.round(parseInt(this.ID.scrollHeight)/2);this.Correct=1;}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.scrollLeft+=(this.ScrollStep+this.Step-this.CTL);this.Pause();return;}else{if(this.ID.scrollLeft>=this.ClientScroll){this.ID.scrollLeft-=this.ClientScroll;}this.ID.scrollLeft+=this.Step;}break;}case 3:{this.CTL+=this.Step;if(this.CTL>=this.ScrollStep && this.DelayTime>0){this.ID.scrollLeft-=(this.ScrollStep+this.Step-this.CTL);this.Pause();return;}else{if(this.ID.scrollLeft<=0){this.ID.scrollLeft+=this.ClientScroll;}this.ID.scrollLeft-=this.Step;}break;}this.ID.scrollTop+="px";this.ID.scrollLeft+="px";}}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<span style="color:#ff0000">仅用div的时候需要用<nobr>来包括div</span>
<fieldset style="padding:5px;width:770px">
<legend>不间断滚动实例</legend>
<center>
鼠标悬停控制，左移鼠标，向左移动；反之亦然。
<nobr>
<div id="marqueedivmouse" style="width:760px;overflow:auto;"><img src="http://www.zzsky.cn/effect/images/kadingche/pic1.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic2.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic3.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic4.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic5.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic6.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic7.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic8.gif" style="width:126px;height:138px" border="0" hspace="1"></div>
</nobr>
<br>
<hr>
<br>
文字翻屏滚动
<br />需要文字内容高度大于div定义的高度，如果小了，则无法移动。
<div id="textdiv" style="border:1 solid #c0c0c0;text-align:left;width:760px;height:42px;overflow:hidden;">
隐形的翅膀<br />每一次<br />都在徘徊孤单中坚强<br />每一次<br />就算很受伤<br />也不闪泪光<br />我知道<br />我一直有双隐形的翅膀<br />带我飞<br />飞过绝望<br />不去想<br />他们拥有美丽的太阳<br />我看见<br />每天的夕阳<br />也会有变化<br />我知道<br />我一直有双隐形的翅膀<br />带我飞<br />给我希望<br />我终于<br />看到<br />所有梦想都开花<br />追逐的年轻<br />歌声多嘹亮<br />我终于<br />翱翔<br />用心凝望不害怕<br />哪里会有风<br />就飞多远吧<br />隐形的翅膀<br />让梦恒久比天长<br />留一个<br />愿望<br />让自己想象
</div>
<br>
<hr>
<br>
文字间歇滚动
<br />需要文字内容高度大于div定义的高度，如果小了，则无法移动。
<div id="textdiv1" style="border:1 solid #c0c0c0;text-align:left;width:760px;height:42px;overflow:hidden;">
隐形的翅膀<br />每一次<br />都在徘徊孤单中坚强<br />
</div>
<br>
<hr>
<br>
向上翻屏滚动
<div id="marqueediv1" style="width:760px;height:138px;overflow:hidden;">
<table width="640" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="52" align="center" valign="middle"><img src="http://www.zzsky.cn/effect/images/kadingche/pic1.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic2.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic3.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic4.gif" style="width:126px;height:138px" border="0" hspace="1"></td>
</tr>
<tr>
<td height="52" align="center" valign="middle"><img src="http://www.zzsky.cn/effect/images/kadingche/pic5.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic6.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic7.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic8.gif" style="width:126px;height:138px" border="0" hspace="1"></td>
</tr>
</table>
</div>
<br>
<hr>
<br>
向下翻屏滚动
<div id="marqueediv2" style="width:760px;height:138px;overflow:hidden;">
<table width="640" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="52" align="center" valign="middle"><img src="http://www.zzsky.cn/effect/images/kadingche/pic1.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic2.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic3.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic4.gif" style="width:126px;height:138px" border="0" hspace="1"></td>
</tr>
<tr>
<td height="52" align="center" valign="middle"><img src="http://www.zzsky.cn/effect/images/kadingche/pic5.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic6.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic7.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic8.gif" style="width:126px;height:138px" border="0" hspace="1"></td>
</tr>
</table>
</div>
<br>
<hr>
<br>
向左翻屏滚动
<nobr>
<div id="marqueediv3" style="width:640px;height:138px;overflow:hidden;"><img src="http://www.zzsky.cn/effect/images/kadingche/pic1.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic2.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic3.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic4.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic5.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic6.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic7.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic8.gif" style="width:126px;height:138px" border="0" hspace="1"></div>
</nobr>
<br>
<hr>
<br>
向右翻屏滚动
<nobr>
<div id="marqueediv4" style="width:640px;height:138px;overflow:hidden;"><img src="http://www.zzsky.cn/effect/images/kadingche/pic1.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic2.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic3.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic4.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic5.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic6.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic7.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic8.gif" style="width:126px;height:138px" border="0" hspace="1"></div>
</nobr>
<br>
<hr>
<br>
向上连续滚动
<div id="marqueediv5" style="width:760px;height:138px;overflow:hidden;">
<table width="640" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="52" align="center" valign="middle"><img src="http://www.zzsky.cn/effect/images/kadingche/pic1.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic2.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic3.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic4.gif" style="width:126px;height:138px" border="0" hspace="1"></td>
</tr>
<tr>
<td height="52" align="center" valign="middle"><img src="http://www.zzsky.cn/effect/images/kadingche/pic5.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic6.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic7.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic8.gif" style="width:126px;height:138px" border="0" hspace="1"></td>
</tr>
</table>
</div>
<br>
<hr>
<br>
向左连续滚动
<nobr>
<div id="marqueediv6" style="width:760px;height:138px;overflow:hidden;"><img src="http://www.zzsky.cn/effect/images/kadingche/pic1.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic2.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic3.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic4.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic5.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic6.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic7.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic8.gif" style="width:126px;height:138px" border="0" hspace="1"></div>
</nobr>
<br>
<hr>
<br>
向上间歇滚动
<div id="marqueediv7" style="width:760px;height:138px;overflow:hidden;">
<table width="640" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="52" align="center" valign="middle"><img src="http://www.zzsky.cn/effect/images/kadingche/pic1.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic2.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic3.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic4.gif" style="width:126px;height:138px" border="0" hspace="1"></td>
</tr>
<tr>
<td height="52" align="center" valign="middle"><img src="http://www.zzsky.cn/effect/images/kadingche/pic5.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic6.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic7.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic8.gif" style="width:126px;height:138px" border="0" hspace="1"></td>
</tr>
</table>
</div>
<br>
<hr>
<br>
向左间歇滚动
<nobr>
<div id="marqueediv8" style="width:640px;height:138px;overflow:hidden;"><img src="http://www.zzsky.cn/effect/images/kadingche/pic1.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic2.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic3.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic4.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic5.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic6.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic7.gif" style="width:126px;height:138px" border="0" hspace="1"><img src="http://www.zzsky.cn/effect/images/kadingche/pic8.gif" style="width:126px;height:138px" border="0" hspace="1"></div>
</nobr>
<br>
<hr>
<br>
</center>
<script type="text/javascript">
try{
new Marquee("marqueedivmouse",2,4,640,138,20,0,3000,0);
}catch(e){alert(e.message);}
new Marquee("textdiv",0,1,640,42,20,4000,5000);
new Marquee("textdiv1",0,1,640,42,20,4000,5000,14);
new Marquee("marqueediv1",0,1,640,138,50,4000,500);
new Marquee("marqueediv2",1,2,640,138,50,4000,500);
new Marquee("marqueediv3",2,20,640,138,20,4000,5000);
new Marquee("marqueediv4",3,10,640,138,20,4000,500);
new Marquee("marqueediv5",0,1,640,138,30,0,0);
new Marquee("marqueediv6",2,1,640,138,20,0,0);
new Marquee("marqueediv7",0,1,640,138,50,4000,500,138);
new Marquee("marqueediv8",2,20,640,138,20,4000,5000,128);
</script>
</fieldset>
</body>
</html
分享到：
发表评论
相关推荐
C#间歇滚动，新闻滚动，图片滚动C#间歇滚动，新闻滚动，图片滚动C#间歇滚动，新闻滚动，图片滚动C#间歇滚动，新闻滚动，图片滚动C#间歇滚动，新闻滚动，图片滚动
JS间歇性向上滚动 JS间歇性向上滚动 JS间歇性向上滚动 JS间歇性向上滚动 JS间歇性向上滚动
上下间歇滚动，兼容各大浏览器，可自己任意修改每次滚动图片 上下间歇滚动特效，自己整理出来的，效果不错，我一般不会上传不好的资源的，彼此信任吧！ 我也是下载别人的东西才问你们要分的，我的分数如果足够多，...
文件包含了四个方向的滚动效果，可自由选择使用；兼容IE6+及大众标准浏览器；
jquery图片文字滚动插件多组图片文字间歇滚动
jQuery排行榜列表文字向上间歇滚动代码
js文字滚动插件制作新闻公告列表scroll文字间歇滚动 js文字滚动插件制作新闻公告列表scroll文字间歇滚动 js文字滚动插件制作新闻公告列表scroll文字间歇滚动
marquee标签实现信息滚动及原理，间歇性滚动及原理视频教学加源码
js文字滚动制作js scroll单排文字滚动向上间歇滚动
间歇性循环滚动新闻。从下往上滚动。有在线demo
js文字滚动插件制作双行关联向上文字间歇滚动
利用jQuery实现文字间歇向上滚动 很简单的代码 实用也易于修改
jQuery 模仿 Marquee 间歇式 无缝滚动 不间断滚动
实现效果： ... jQuery排行榜列表文字向上间歇滚动，实现信息的滚动特效，例如学校网站，毕业了已经在工作的，实现学生信息的滚动，实现中奖名单的滚动显示，非常适用于培训网站，企业网站或者商城网站。
NULL 博文链接：https://yuanjianhang.iteye.com/blog/794284
jQuery新闻公告间歇滚动插件，能够制作这种间歇滚动效果。通过配置，它能够设置标题、标题颜色、标题背景颜色、链接颜色、字体大小、边框、宽度、自动滚动、间歇时间等
jquery新浪微博图片文字列表间歇上下滚动淡进淡出滚动
NULL 博文链接：https://xjwolaile.iteye.com/blog/1892557
符合标准的间隙间歇滚动代码(兼容IE和FireFox).htm 符合标准的间隙间歇滚动代码(兼容IE和FireFox).htm
上下间歇文字滚动是一款柔美圆滑的单排文字上下间歇滚动，不需定义容器高度。