jQuery實現(xiàn)文字自動橫移
更新時間：2017年01月08日 11:19:05 作者：鏡子-正衣冠-知得失
本文詳細(xì)介紹了通過jquery尺寸相關(guān)函數(shù)實現(xiàn)文字自動橫移的方法。具有一定的參考價值，下面跟著小編一起來看下吧
效果圖：
實現(xiàn)文字自動橫移
<style type="text/css">
#demo {overflow:scroll;width:740px; }
#indemo { float: left; width: 800%;}
#demo1 { float: left; }
#demo2 { float: left;margin-left:7px;}
</style>
<script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>
<a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>
<a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>
</div>
<div id="demo2"></div> </div>
</div>
一 采用jquery方式實現(xiàn)文字橫移
<script>
var speed=20;
$("#demo2").html($("#demo1").children().clone());
var n=0;
function Marquee(){
if(n>=$("#demo").innerWidth())
n=0;
else{
n++;
}
$("#demo").scrollLeft( n );
}
var MyMar=setInterval(Marquee,speed);
$("#demo").mouseover(function(){clearInterval(MyMar)});
$("#demo").mouseout(function(){MyMar=setInterval(Marquee,speed)});
</script>
二 采用原生script實現(xiàn)橫移
<script>
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
$("#demo2").text($("#demo1").clone());
$("#demo2").clone();
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
</script>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了如何通過JavaScript模擬實現(xiàn)京東的快遞單號查詢效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動手試一試2022-03-03
一直都在想怎么樣使彈出的DIV能在任何時候都是居中顯示的，剛開始的時候是用CSS樣式直接定義好層的位置，但是當(dāng)頁面很長的時候，或是瀏覽器窗口大小不是固定的時候就不能正確的顯示，所以只好用JS來控制DIV的顯示位置。2008-06-06
這篇文章主要為大家詳細(xì)介紹了Bootstrap輪播插件簡單使用方法，介紹了使用bootstrap輪播插件的作用，感興趣的小伙伴們可以參考一下2016-06-06
微信小程序使用scroll-view標(biāo)簽實現(xiàn)自動滑動到底部功能的實例代碼
本文通過實例代碼給大家介紹了微信小程序使用scroll-view標(biāo)簽實現(xiàn)自動滑動到底部功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-11-11
這篇文章主要介紹了js進(jìn)行表單驗證的方法,實例分析了各種常見的js表單驗證技巧,需要的朋友可以參考下2015-02-02
javascript 實現(xiàn)子父窗體互相傳值的簡單實例
本篇文章主要是對javascript 實現(xiàn)子父窗體互相傳值的簡單實例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要介紹了微信公眾號服務(wù)器驗證Token步驟圖解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
這篇文章主要為大家介紹了如何根據(jù)url批量下載二維碼實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
javascript測試題練習(xí)代碼，需要的朋友可以參考下2012-10-10
一套值得分享和大家收藏的Bootstrap學(xué)習(xí)教程，完整的知識體系，系統(tǒng)的學(xué)習(xí)資料，幫助大家開啟Bootstrap Table學(xué)習(xí)之旅，享受學(xué)習(xí)的樂趣2016-11-11