jQuery转动间歇搁浅的单行笔墨转动代码

发布时间：2018-08-14 02:09:28 所属栏目：编程来源：站长网

导读：基于 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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys