jQuery滚动间歇停顿的单行文字滚动代码

发布时间：2018-08-13 15:32 所属栏目：121 来源：站长网

导读：基于 jQuery 插件的单行文字滚动效果，边滚动边停止，也就是我们经常说的间歇滚动、停顿式滚动文字代码，例子中使用了一首古诗来演示本效果，可以看到一次只滚动一行诗句，隔几秒钟会继续滚动至下一句，比较实用的一款网页特效，希望需要者能够喜欢。为解

　　基于jQuery插件的单行文字滚动效果，边滚动边停止，也就是我们经常说的间歇滚动、停顿式滚动文字代码，例子中使用了一首古诗来演示本效果，可以看到一次只滚动一行诗句，隔几秒钟会继续滚动至下一句，比较实用的一款网页特效，希望需要者能够喜欢。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery边滚边停顿的单行文字滚动代码 - 烈火网 Veryhuo.COM</title> <script type="text/javascript" src="/uploads/common/js/jquery-1.7.min.js"></script> <script type="text/javascript"> ;(function($){ $.fn.extend({ "myFocus": function(opts){ opts= $.extend({ thumbObj:null, auto:true, changeTime:3000, speed:400, type:"left" }, opts || {}); var obj = $(this), parent=obj.parent(); pObj=obj.parent().attr("id"); len = obj.length, nextOne=0, d=1, oLiwid=obj.eq(0).outerWidth(), oLiHeight=obj.eq(0).outerHeight(), timer=null; //提前判断以防鼠标移动导航上出现bug if(opts.type=="top"){ parent.height(len*obj.eq(0).outerHeight()); }else{ obj.css("float","left"); parent.width(len*obj.eq(0).outerWidth()); } //切换方式的方法 function change(){ if(opts.type=="top"){ parent.animate({marginTop:"-"+(oLiHeight*nextOne)+"px"},opts.speed); return d=0; }else{ parent.animate({marginLeft:"-"+(oLiwid*nextOne)+"px"},opts.speed); } } change(); //鼠标移到导航按钮上的效果 $(opts.thumbObj).hover(function(){ clearInterval(timer); timer=null; var index=$(this).index(); $(this).addClass("curr").siblings().removeClass("curr"); $("#"+pObj+":animated").stop(); // if(d){ parent.animate({marginLeft:"-"+(oLiwid*index)+"px"},opts.speed); }else{ parent.animate({marginTop:"-"+(oLiHeight*index)+"px"},opts.speed); } },function(){ if(timer){ clearInterval(timer); timer=null; } if(opts.auto){ timer=setInterval(autoPlay,opts.changeTime); }; }); //鼠标移到大图上效果 obj.hover(function(){ clearInterval(timer); timer=null; },function(){ if(timer){ clearInterval(timer); timer=null; } if(opts.auto){ timer=setInterval(autoPlay,opts.changeTime); }; }); //自动切换方法 function autoPlay(){ nextOne++; if(nextOne>=len){ nextOne=0; } $(opts.thumbObj).eq(nextOne).addClass("curr").siblings().removeClass("curr"); change(); } // clearInterval(timer); timer=null; if(opts.auto){ timer=setInterval(autoPlay,opts.changeTime); }; } }); })(jQuery); $(function(){ $("#box li").myFocus({ type:"top" }); }); </script> <style type="text/css"> * { padding:0; margin:0; } ul,li { list-style:none; } #box { height:18px; width:300px; overflow:hidden; margin:50px auto;} </style> </head> <body> <div id="box"> <ul> <li>昨夜寒蛩不住鸣。烈</li> <li>惊回千里梦，已三更。火。</li> <li>起来独自绕阶行。网</li> <li>人悄悄帘外月胧明，</li> <li>白首为功名，旧山松竹老，阻归程</li> <li>欲将心事付瑶琴，</li> <li>知音少，玄断有谁听。</li> </ul> </div> </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>
提示：可修改后代码再运行!

（编辑：ASP站长网）