jquery xMarquee實(shí)現(xiàn)文字水平無(wú)縫滾動(dòng)效果
更新時(shí)間：2014年04月29日 15:41:41 作者：
這篇文章主要介紹了jquery xMarquee實(shí)現(xiàn)文字水平無(wú)縫滾動(dòng)效果,需要的朋友可以參考下
css
復(fù)制代碼 代碼如下:
<style>
.xMarquee{border:1px solid #ccc;height:25px;width:500px; margin:50px auto; background:#ffffff; overflow:hidden;}
.xMarquee ol{list-style-type:none; margin:0px; padding:0px; font-size:12px; width:100000%;}
.xMarquee ol li{float:left;}
.xMarquee ol li a{ color:#000; text-decoration:none; line-height:25px;}
.xMarquee ol li a:hover{ text-decoration:underline;}
</style>
js
復(fù)制代碼 代碼如下:
<script src="xMarquee.js" type="text/javascript"></script>
<script>
$(function(){
$("#x1").xMarquee();
$("#x2").xMarquee({temp:2,backMarquee:'backMarquee'});
})
function backMarquee(id,con){
$("#backMarquee").html(id+"::::::::::::::::::::"+con);
}
</script>
html
復(fù)制代碼 代碼如下:
<div id="x1" class="xMarquee">
<ol>
<li><a href="" >♠ 中國(guó)移動(dòng)</a></li>
<li><a href="" >♠ 雙向錄音</a></li>
<li><a href="" >♠ 360通話錄音是目前較好的</a></li>
<li><a href="" >♠ 中國(guó)移動(dòng)</a></li>
<li><a href="" >♠ 雙向錄音</a></li>
<li><a href="" >♠ 360通話錄音是目前較好的</a></li>
</ol>
</div>
<div id="x2" class="xMarquee">
<ol>
<li><a href="" >♠ 中國(guó)移動(dòng)</a></li>
<li><a href="" >♠ 雙向錄音</a></li>
<li><a href="" >♠ 360通話錄音是目前較好的</a></li>
<li><a href="" >♠ 中國(guó)移動(dòng)</a></li>
<li><a href="" >♠ 雙向錄音</a></li>
<li><a href="" >♠ 360通話錄音是目前較好的</a></li>
</ol>
</div>
文字滾動(dòng)如此簡(jiǎn)單
演示打包下載
本文來(lái)自： csdn 高山and流水博客
您可能感興趣的文章:
- Jquery原生態(tài)實(shí)現(xiàn)表格header頭隨滾動(dòng)條滾動(dòng)而滾動(dòng)
- jquery實(shí)現(xiàn)簡(jiǎn)單的無(wú)縫滾動(dòng)
- jquery無(wú)縫向上滾動(dòng)實(shí)現(xiàn)代碼
- 基于jQuery的圖片左右無(wú)縫滾動(dòng)插件
- jQuery插件scroll實(shí)現(xiàn)無(wú)縫滾動(dòng)效果
- jcarousellite.js 基于Jquery的圖片無(wú)縫滾動(dòng)插件
- jquery 文本上下無(wú)縫滾動(dòng),鼠標(biāo)放上去就停止 小例子
- jQuery動(dòng)畫效果實(shí)現(xiàn)圖片無(wú)縫連續(xù)滾動(dòng)
- 基于jQuery的上下無(wú)縫滾動(dòng)應(yīng)用(單行或多行)
- jquery實(shí)現(xiàn)表格無(wú)縫滾動(dòng)
相關(guān)文章
bootstrap中日歷范圍選擇插件daterangepicker的使用詳解
daterangepicker是bootstrap的一個(gè)日歷插件 主要用來(lái)選擇時(shí)間段的插件 這個(gè)插件很好用也很容易操作 。這篇文章主要介紹了bootstrap中日歷范圍選擇插件daterangepicker的使用詳解,需要的朋友可以參考下2018-04-04
今天看到google圖片搜索結(jié)果頁(yè)面，感覺簡(jiǎn)潔實(shí)用，于是用jquery粗略的模仿了一下再次感覺到j(luò)query的強(qiáng)大和易用，基本思路初步實(shí)現(xiàn)了，再整合ajax和json，應(yīng)該可以做一個(gè)簡(jiǎn)單的應(yīng)用了 :)2009-12-12
JQuery 選擇器 xpath 語(yǔ)法應(yīng)用
我們根據(jù)實(shí)例來(lái)解釋JQuery選擇器（selectors）中xpath幾種常用的用法2010-05-05
這篇文章主要介紹了jQuery中contents()方法用法,實(shí)例分析了contents()方法的功能、定義及查找匹配元素內(nèi)部所有的一級(jí)子節(jié)點(diǎn)的使用技巧,需要的朋友可以參考下2015-01-01
為jquery.ui.dialog 增加“自動(dòng)記住關(guān)閉時(shí)的位置”的功能
筆者在項(xiàng)目中使用 jquery.ui.dialog 1.7.2時(shí)，當(dāng)使用$("#d").dialog("open");時(shí)，dialog總是彈出在option中指定的位置；2009-11-11
本文主要介紹了jquery手勢(shì)密碼插件的相關(guān)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03
利用JQuery寫一個(gè)簡(jiǎn)單的異步分頁(yè)插件
這篇文章主要為大家詳細(xì)介紹了如何利用JQuery寫一個(gè)簡(jiǎn)單的異步分頁(yè)插件，感興趣的小伙伴們可以參考一下2016-03-03
jquery和javascript中如何將一元素的內(nèi)容賦給另一元素
將一元素的內(nèi)容賦給另一元素，在某些情況下還是比較實(shí)用的，下面為大家講解下jquery和javascript中是如何實(shí)現(xiàn)的2014-01-01
jquery實(shí)現(xiàn)的簡(jiǎn)單輪播圖功能【適合新手】
這篇文章主要介紹了jquery實(shí)現(xiàn)的簡(jiǎn)單輪播圖功能,涉及jQuery基于定時(shí)器的事件響應(yīng)與頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08
基于jquery實(shí)現(xiàn)發(fā)送文章到手機(jī)的代碼
這篇文章主要介紹了基于jquery實(shí)現(xiàn)發(fā)送文章到手機(jī)的代碼,非常簡(jiǎn)單實(shí)用，需要的朋友可以參考下2014-12-12