几款文字和图片滚动特效代码-JS特效-爱易网页

几款文字和图片滚动特效代码

日期：2014-05-18　浏览次数：20391 次

以下是程序代码

<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">
/******************************************************************
* 通用不间断滚动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.off</div></div>

<div class="clearfix"></div>
                    </div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li>

<li class="next"><a href="2379">下一篇：静态页分页功能js代码</a></li>
                        </ul>
                    </nav>

<div class="alert alert-warning" role="alert">
                        <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
                    </div>

<div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10813' title='历史惊人相似：如今的库克 曾经的鲍尔默' target="_blank">
                        历史惊人相似：如今的库克 曾经的鲍尔默</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6912' title='网络音乐非片面收费 高晓松时间表难完成' target="_blank">
                        网络音乐非片面收费 高晓松时间表难完成</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34395' title='承载京东C2C野心的拍拍网：梦想丰满，现实骨感' target="_blank">
                        承载京东C2C野心的拍拍网：梦想丰满，现实骨感</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34459' title='2018双11阿里云老用户怎么参加拼团活动 老用户拼团方法' target="_blank">
                        2018双11阿里云老用户怎么参加拼团活动 老用户拼团方法</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34413' title='京东终于想明白，这些年错过的财运，都藏在女人的时装下' target="_blank">
                        京东终于想明白，这些年错过的财运，都藏在女人的时装下</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34207' title='可靠消息称微型针孔偷拍设备拟全面禁止' target="_blank">
                        可靠消息称微型针孔偷拍设备拟全面禁止</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10815' title='中移动业绩增长趋缓 目光转向海外市场' target="_blank">
                        中移动业绩增长趋缓 目光转向海外市场</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34382' title='二维码支付大战的号角注定已经吹响，尚需标准发放' target="_blank">
                        二维码支付大战的号角注定已经吹响，尚需标准发放</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6849' title='传诺基亚Lumia928下月推出 将与iPhone5看齐' target="_blank">
                        传诺基亚Lumia928下月推出 将与iPhone5看齐</a></li></div>
                   
                
        </ol>
    </div>
</div>

</div>

</div>
            </div>
            <div class="clearfix"></div>

<footer class=" footer navbar-bottom">
<em>友情链接：</em>
    
      <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a>            
    
<br />
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>

Copyright © 2013-2026 爱易网页 当前在线：492人　
        网站在1天2时37分34秒内访问总人数：359273人
    2秒前 21.61%
　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script>

</footer>

</div>
   
</body>
</html>