jquery插件之文字間歇自動(dòng)向上滾動(dòng)效果代碼
本文實(shí)例講述了jquery插件之文字間歇自動(dòng)向上滾動(dòng)效果代碼。分享給大家供大家參考,具體如下:
此插件旨在實(shí)現(xiàn)目前較為流行的文字間歇向上滾動(dòng)特效,當(dāng)鼠標(biāo)移動(dòng)到文字上時(shí),向上滾動(dòng)會(huì)停止,當(dāng)鼠標(biāo)離開(kāi)時(shí),向上滾動(dòng)繼續(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>文字間歇向上滾動(dòng)</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這是一個(gè)無(wú)縫向上滾動(dòng)的特效,是我第一次寫(xiě)這樣的插件</li> <li>02這是一個(gè)無(wú)縫向上滾動(dòng)的特效,是我第一次寫(xiě)這樣的插件</li> <li>03這是一個(gè)無(wú)縫向上滾動(dòng)的特效,是我第一次寫(xiě)這樣的插件</li> <li>04這是一個(gè)無(wú)縫向上滾動(dòng)的特效,是我第一次寫(xiě)這樣的插件</li> <li>05這是一個(gè)無(wú)縫向上滾動(dòng)的特效,是我第一次寫(xiě)這樣的插件</li> <li>06這是一個(gè)無(wú)縫向上滾動(dòng)的特效,是我第一次寫(xiě)這樣的插件</li> <li>07這是一個(gè)無(wú)縫向上滾動(dòng)的特效,是我第一次寫(xiě)這樣的插件</li> <li>08這是一個(gè)無(wú)縫向上滾動(dòng)的特效,是我第一次寫(xiě)這樣的插件</li> <li>09這是一個(gè)無(wú)縫向上滾動(dòng)的特效,是我第一次寫(xiě)這樣的插件</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è)置一次滾動(dòng)的行數(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擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- Jquery實(shí)現(xiàn)無(wú)縫向上循環(huán)滾動(dòng)列表的特效
- jQuery插件實(shí)現(xiàn)文字無(wú)縫向上滾動(dòng)效果代碼
- jQuery實(shí)現(xiàn)簡(jiǎn)單的間隔向上滾動(dòng)效果
- jquery單行文字向上滾動(dòng)效果示例
- JQuery文字列表向上滾動(dòng)的代碼
- jQuery實(shí)現(xiàn)單行文字間歇向上滾動(dòng)源代碼
- jquery無(wú)縫向上滾動(dòng)實(shí)現(xiàn)代碼
- jquery多行滾動(dòng)/向左或向上滾動(dòng)/響應(yīng)鼠標(biāo)實(shí)現(xiàn)思路及代碼
- 簡(jiǎn)短幾句jquery代碼的實(shí)現(xiàn)一個(gè)圖片向上滾動(dòng)切換
- jQuery實(shí)現(xiàn)動(dòng)態(tài)向上滾動(dòng)
相關(guān)文章
jQuery移動(dòng)端跑馬燈抽獎(jiǎng)特效升級(jí)版(抽獎(jiǎng)概率固定)實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery移動(dòng)端跑馬燈抽獎(jiǎng)特效升級(jí)版(抽獎(jiǎng)概率固定)實(shí)現(xiàn)方法,涉及jQuery數(shù)值運(yùn)算及條件判斷等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01用原生JavaScript實(shí)現(xiàn)jQuery的$.getJSON的解決方法
本篇文章介紹了,用原生JavaScript實(shí)現(xiàn)jQuery的$.getJSON的解決方法。需要的朋友參考下2013-05-05jQuery實(shí)現(xiàn)的fixedMenu下拉菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的fixedMenu下拉菜單效果代碼,通過(guò)自定義fixedMenu方法實(shí)現(xiàn)點(diǎn)擊下拉菜單效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08zepto與jquery的區(qū)別及zepto的不同使用8條小結(jié)
這篇文章主要介紹了zepto與jquery的區(qū)別及zepto的不同使用8條小結(jié) 的相關(guān)資料,需要的朋友可以參考下2016-07-07jQuery實(shí)現(xiàn)Tab菜單滾動(dòng)切換的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)Tab菜單滾動(dòng)切換的方法,實(shí)例分析了jQuery通過(guò)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素切換的動(dòng)畫(huà)效果實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09使用jquery菜單插件HoverTree仿京東無(wú)限級(jí)菜單
這篇文章主要介紹了使用jquery菜單插件HoverTree仿京東無(wú)限級(jí)菜單,需要的朋友可以參考下2014-12-12jquery的父、子、兄弟節(jié)點(diǎn)查找,節(jié)點(diǎn)的子節(jié)點(diǎn)循環(huán)方法
下面小編就為大家?guī)?lái)一篇jquery的父、子、兄弟節(jié)點(diǎn)查找,節(jié)點(diǎn)的子節(jié)點(diǎn)循環(huán)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12為jQuery-easyui的tab組件添加右鍵菜單功能的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇為jQuery-easyui的tab組件添加右鍵菜單功能的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10jquery僅用6行代碼實(shí)現(xiàn)滑動(dòng)門(mén)效果
這篇文章主要介紹了jquery僅用6行代碼實(shí)現(xiàn)滑動(dòng)門(mén)效果,涉及jquery樣式變換的實(shí)現(xiàn)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09