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

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

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

以下是程序代码

<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/10814' title='智能手机：中国手机市场最受关注十五款产品清点 ' target="_blank">
                        智能手机：中国手机市场最受关注十五款产品清点 </a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34369' title='同程旅游融资后变土豪 如何烧钱占领市场？' target="_blank">
                        同程旅游融资后变土豪 如何烧钱占领市场？</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34417' title='迅雷高管解读财报：收购快盘可快速融入小米' target="_blank">
                        迅雷高管解读财报：收购快盘可快速融入小米</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34385' title='三大运营商获通知大减营销费 传3年减400多亿' target="_blank">
                        三大运营商获通知大减营销费 传3年减400多亿</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34215' title='看，网络文学今日之繁盛；忆，纯真去哪了？' target="_blank">
                        看，网络文学今日之繁盛；忆，纯真去哪了？</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34159' title='为啥苹果定要出廉价iPhone？都是安卓逼的 ' target="_blank">
                        为啥苹果定要出廉价iPhone？都是安卓逼的 </a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/434' title='用友软件股价逆势下跌 再融资方案现曙光' target="_blank">
                        用友软件股价逆势下跌 再融资方案现曙光</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34416' title='蓝宝石PK大猩猩玻璃：作为屏幕谁更有优势？' target="_blank">
                        蓝宝石PK大猩猩玻璃：作为屏幕谁更有优势？</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34267' title='华为变阵:任正非调整三大业务布局' target="_blank">
                        华为变阵:任正非调整三大业务布局</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 爱易网页 当前在线：232人　
        网站在4时37分57秒内访问总人数：41197人
    2秒前 10.58%
　<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>