几款文字和图片滚动特效代码
来源：互联网 发布：MySQL数据库乱码 编辑：程序博客网 时间：2024/06/12 19:17
<html>
<head>
<meta http-equiv="content-Type"content="text/html;charset=gb2312">
<meta name="keywords"content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网"/>
<title>网页特效 无间歇滚动和间歇滚动站长特效网欢迎您。</title>
<style type="text/css">
a,body,select{font-size:12px;text-decoration:none;}
</style>
<script type="text/javascript">
varMarquee=function(){this.ID=document.getElementByIdx_x(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){varevent=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){case0:{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;}case1:{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;}case2:{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;}case3:{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>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>
<!--欢迎来到站长特效网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：www.zzjs.net，zzjs@msn.com,用.net打造靓站-->
<spanstyle="color:#ff0000">仅用div的时候需要用<nobr>来包括div</span>
<fieldsetstyle="padding:5px;width:770px">
<legend>不间断滚动实例</legend>
<center>
鼠标悬停控制，左移鼠标，向左移动；反之亦然。
<nobr>
<div id="marqueedivmouse"style="width:760px;overflow:auto;"><imgsrc="/img/pic1.gif" style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic2.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic3.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic4.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic5.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic6.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic7.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/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">
</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">
</table>
</div>
<br>
<hr>
<br>
向左翻屏滚动
<nobr>
<div id="marqueediv3"style="width:640px;height:138px;overflow:hidden;"><imgsrc="/img/pic1.gif" style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic2.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic3.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic4.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic5.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic6.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic7.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/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;"><imgsrc="/img/pic1.gif" style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic2.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic3.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic4.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic5.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic6.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic7.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/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">
</table>
</div>
<br>
<hr>
<br>
向左连续滚动
<nobr>
<div id="marqueediv6"style="width:760px;height:138px;overflow:hidden;"><imgsrc="/img/pic1.gif" style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic2.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic3.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic4.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic5.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic6.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic7.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/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">
</table>
</div>
<br>
<hr>
<br>
向左间歇滚动
<nobr>
<div id="marqueediv8"style="width:640px;height:138px;overflow:hidden;"><imgsrc="/img/pic1.gif" style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic2.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic3.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic4.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic5.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic6.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/pic7.gif"style="width:126px;height:138px" border="0"hspace="1"><img src="/img/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>
效果：http://js.alixixi.com/a/2010091564646.shtml
- 几款文字和图片滚动特效代码
- 双行文字滚动特效代码
- 不间断图片横向滚动特效代码
- 不间断图片横向滚动特效代码
- 文字不间断向左滚动的网页特效代码
- 文字和图片向左循环滚动
- jQuery文字和图片列表滚动插件
- 滚动文字、滚动图片代码
- div 图片滚动 / 文字滚动
- 图片 文字 同时滚动
- 图片、文字无缝滚动
- 文字 图片 无缝滚动
- 图片滚动和在图片上增加文字显示
- 图片特效代码
- js实现图片向上连续滚动特效代码(含注释)
- android app小白试水2-添加图片和文字滚动条
- TextView文本显示图片和文字，竖直滚动显示
- android 图片文字轮播效果（图片和文字自动滚动）
- 我的博客今天4岁225天啦！
- 错误：windows 无法访问指定设备、…
- 错误：Run-time erro '339' 在WIND…
- redis集群（主从配置）
- 给Win7添加一键取得所有权
- 几款文字和图片滚动特效代码
- Photoshop设计网页布局
- Windows7中开启 Administrator 帐…
- 入门学习必收藏！精选Photoshop、D…
- 一款很实用的时间选择器
- 让PNG图标在IE6下变透明的JS代码
- 解决Windows7下卡死的问题
- 拖机软件Betwin VS 2.0.0.368+破解…
- 环信集成
