JQuery實現(xiàn)文字無縫滾動效果示例代碼(Marquee插件)
更新時間：2017年03月07日 14:32:31 作者：壹峰
本篇文章主要介紹了JQuery實現(xiàn)文字無縫滾動效果示例代碼(Marquee插件)，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
推薦一個JQuery的無縫文字滾動效果，同時也可以滾動圖片，也叫做跑馬燈效果。
此jquery插件，依托jquery庫，能實現(xiàn)各種滾動效果，且讓HTML代碼符合W3C標準。
使用方法如下：
1、加載javascript。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.marquee.js"></script>
<script type="text/javascript">
$(function(){
$("#marquee").marquee({yScroll: "bottom"});
});
</script>
2、加入CSS樣式。
ul.marquee {display: block;line-height: 1;position: relative;overflow: hidden;width: 400px; height: 22px; }
ul.marquee li {position: absolute; top: -999em;left: 0;display: block; white-space: nowrap; padding: 3px 5px; text-indent:0.8em;}
3、HTML代碼如下：
<ul id="marquee" > <li><a rel="external nofollow" target="_blank"> WEB前端開發(fā)</a> [2011-10-20]</li> <li><a rel="external nofollow" target="_blank"> 架構設計</a> [2011-09-20]</li> <li><a rel="external nofollow" target="_blank"> 系統(tǒng)運維</a> [2011-10-16]</li> </ul>
該插件提供了許多屬性選項，您可以配置定制外觀和效果。
{
yScroll: "top" // 初始滾動方向 (還可以是"top" 或 "bottom")
showSpeed: 850 // 初始下拉速度
scrollSpeed: 12 // 滾動速度
pauseSpeed: 5000 // 滾動完到下一條的間隔時間
pauseOnHover: true // 鼠標滑向文字時是否停止?jié)L動
loop: -1 // 設置循環(huán)滾動次數(shù) （-1為無限循環(huán)）
fxEasingShow: "swing" // 緩沖效果
fxEasingScroll: "linear" // 緩沖效果
cssShowing: "marquee-showing" //定義class //
event handlers
init: null // 初始調(diào)用函數(shù)
beforeshow: null // 滾動前回調(diào)函數(shù)
show: null // 當新的滾動內(nèi)容顯示時回調(diào)函數(shù)
aftershow: null // 滾動完了回調(diào)函數(shù)
}
jquery.marquee.js可以到官網(wǎng)地址下載：http://www.givainc.com/labs/marquee_jquery_plugin.htm
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
按Enter鍵觸發(fā)事件的jquery方法實現(xiàn)代碼
這篇文章主要介紹了按Enter鍵觸發(fā)事件的jquery方法,需要的朋友可以參考下2014-02-02
跟著JQuery API學Jquery 之三 篩選，相當于條件判斷類型。2010-04-04
這篇文章主要介紹了jquery操作checkbox,需要的朋友可以參考下2014-07-07
這篇文章主要介紹了jquery中EasyUI使用技巧小結,都是些個人經(jīng)驗，分享給大家，需要的朋友可以參考下2015-02-02
最近項目遇到個需求，需要的效果是，鼠標移到縮略圖上會顯示該圖的大圖，并且大圖跟隨鼠標移動；或是移動到提示文字上，也可以顯示圖片。經(jīng)過一番思索，用下面的方法實現(xiàn)了本效果，這里分享給大家。2016-01-01
jQuery是一個非常優(yōu)秀的 JavaScript 框架，使用簡單靈活，同時還有許多成熟的插件可供選擇。其中，jQuery 最令人印象深刻的應用之一就是對圖片的處理，它可以讓幫助你在你的項目中加入各種精美的圖片展示效果2012-08-08
jquery圓形菜單展開收縮效果是基于jquery和css3實現(xiàn)的，非常不錯，具有參考借鑒價值，需要的的朋友參考下2017-02-02
今天遇到了獲取文字寬度的問題，在網(wǎng)上找到了不錯的方法并成功使用到了項目中，有類似情況的朋友可以參考下2013-12-12
基于jquery的loading效果實現(xiàn)代碼，需要的朋友可以參考下。2010-11-11
今天小編就為大家分享一篇關于jQuery事件blur()方法的使用實例講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-03-03