jquery插件之文字間歇自動向上滾動效果代碼
本文實例講述了jquery插件之文字間歇自動向上滾動效果代碼。分享給大家供大家參考,具體如下:
此插件旨在實現(xiàn)目前較為流行的文字間歇向上滾動特效,當(dāng)鼠標(biāo)移動到文字上時,向上滾動會停止,當(dāng)鼠標(biāo)離開時,向上滾動繼續(xù)。整體代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文字間歇向上滾動</title> <style> *{margin:0;padding:0;font-size:12px;} li{list-style:none;} .box{margin:20px;width:320px;height:195px;border:1px solid #ddd;padding:5px 5px 10px;overflow:hidden;} .box ul li{line-height:25px;} </style> <script type="text/javascript" src="jquery-1.7.1.js"></script> </head> <body> <div class="box"> <ul> <li>01這是一個無縫向上滾動的特效,是我第一次寫這樣的插件</li> <li>02這是一個無縫向上滾動的特效,是我第一次寫這樣的插件</li> <li>03這是一個無縫向上滾動的特效,是我第一次寫這樣的插件</li> <li>04這是一個無縫向上滾動的特效,是我第一次寫這樣的插件</li> <li>05這是一個無縫向上滾動的特效,是我第一次寫這樣的插件</li> <li>06這是一個無縫向上滾動的特效,是我第一次寫這樣的插件</li> <li>07這是一個無縫向上滾動的特效,是我第一次寫這樣的插件</li> <li>08這是一個無縫向上滾動的特效,是我第一次寫這樣的插件</li> <li>09這是一個無縫向上滾動的特效,是我第一次寫這樣的插件</li> </ul> </div> <script> /* * textSlider 0.1 * Dependence jquery-1.7.1.js */ ;(function($){ $.fn.textSlider = function(options){ var defaults = { //初始化參數(shù) scrollHeight:25, line:1, speed:'normal', timer:2000 }; var opts = $.extend(defaults,options); this.each(function(){ var timerID; var obj = $(this); var $ul = obj.children("ul"); var $height = $ul.find("li").height(); var $Upheight = 0-opts.line*$height; obj.hover(function(){ clearInterval(timerID); },function(){ timerID = setInterval(moveUp,opts.timer); }); function moveUp(){ $ul.animate({"margin-top":$Upheight},opts.speed,function(){ for(i=0;i<opts.line;i++){ //只有for循環(huán)了才可以設(shè)置一次滾動的行數(shù) $ul.find("li:first").appendTo($ul); } $ul.css("margin-top",0); }); }; timerID = setInterval(moveUp,opts.timer); }); }; })(jQuery) </script> <script> $(function(){ $(".box").textSlider({ line:2 }); }) </script> </body> </html>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
jQuery移動端跑馬燈抽獎特效升級版(抽獎概率固定)實現(xiàn)方法
這篇文章主要介紹了jQuery移動端跑馬燈抽獎特效升級版(抽獎概率固定)實現(xiàn)方法,涉及jQuery數(shù)值運算及條件判斷等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01用原生JavaScript實現(xiàn)jQuery的$.getJSON的解決方法
本篇文章介紹了,用原生JavaScript實現(xiàn)jQuery的$.getJSON的解決方法。需要的朋友參考下2013-05-05jQuery實現(xiàn)的fixedMenu下拉菜單效果代碼
這篇文章主要介紹了jQuery實現(xiàn)的fixedMenu下拉菜單效果代碼,通過自定義fixedMenu方法實現(xiàn)點擊下拉菜單效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08zepto與jquery的區(qū)別及zepto的不同使用8條小結(jié)
這篇文章主要介紹了zepto與jquery的區(qū)別及zepto的不同使用8條小結(jié) 的相關(guān)資料,需要的朋友可以參考下2016-07-07jquery的父、子、兄弟節(jié)點查找,節(jié)點的子節(jié)點循環(huán)方法
下面小編就為大家?guī)硪黄猨query的父、子、兄弟節(jié)點查找,節(jié)點的子節(jié)點循環(huán)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-12-12為jQuery-easyui的tab組件添加右鍵菜單功能的簡單實例
下面小編就為大家?guī)硪黄獮閖Query-easyui的tab組件添加右鍵菜單功能的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10