溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

[置頂]       Jquery實(shí)現(xiàn)網(wǎng)頁(yè)marquee效果

發(fā)布時(shí)間：2020-07-21 03:59:26 來(lái)源：網(wǎng)絡(luò) 閱讀：373 作者：873582595 欄目：web開(kāi)發(fā)

原本在前端html代碼中，實(shí)現(xiàn)文字或者圖片的水平垂直滾定，都是使用的marquee，但隨著考慮瀏覽器的兼容性和符合為w3c的標(biāo)準(zhǔn)，后來(lái)想想那還是使用javascript代碼來(lái)實(shí)現(xiàn)。后來(lái)又喜歡上了jquery，下面寫(xiě)的內(nèi)容希望對(duì)初學(xué)者有些幫助，高手勿噴，但歡迎指導(dǎo)，感激不盡。

原理：無(wú)縫滾動(dòng)的原理，就是利用兩個(gè)內(nèi)容相同的容器，來(lái)達(dá)到欺騙人的視覺(jué)的效果。然后通過(guò)整個(gè)大容器滾動(dòng)條的左右或者上下的移動(dòng)來(lái)實(shí)現(xiàn)滾動(dòng)。下面附上一張手繪的圖，來(lái)簡(jiǎn)要闡述下原理。首先，我們的目的是實(shí)現(xiàn)框1中的內(nèi)容水平向左滾動(dòng)（向右滾動(dòng)，上下滾動(dòng)的原理其實(shí)大致是一樣的，只要知道其中一種，其他都不是問(wèn)題。）。那么我們?cè)陧?yè)面加載的時(shí)候就用js動(dòng)態(tài)將框2中的內(nèi)容（html內(nèi)容）賦值成和框1的內(nèi)容一樣。然后隨著滾動(dòng)條的漸漸地往右移動(dòng)，來(lái)實(shí)現(xiàn)向左的效果。說(shuō)了這么多。等會(huì)就附上代碼（配有注釋）。[置頂]       Jquery實(shí)現(xiàn)網(wǎng)頁(yè)marquee效果

1.html代碼

<!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>     <title>juqery實(shí)現(xiàn)marquee的效果</title>     <script src="jquery-1.4.2.js" type="text/javascript"></script>     <style type="text/css">         #container     /*這個(gè)是最外面的容器，最關(guān)鍵的一點(diǎn)是將overflow:hidden隱藏起來(lái)。*/         {             width:600px;             height:80px;             overflow:hidden;         }         #longwidth         {             height:80px;             width:1000%;     /*要足夠的大，需要能夠把div1和div2的內(nèi)容都能夠裝下，不然因?yàn)閒loat：left裝不下，就會(huì)到第二行*/         }         .kuang         {             float:left;             height:80px;         }     </style>     <script type="text/javascript">         $(function () {             $("#div2").html($("#div1").html());   //將div2的html設(shè)置成div1的html             var mar = function () {                 if ($("#container").scrollLeft() > $("#div1").width()) { //當(dāng)滾動(dòng)條隱藏的長(zhǎng)度大于div1的寬度                     $("#container").scrollLeft(0);                 }                 else {                     $("#container").scrollLeft($("#container").scrollLeft() + 5);   //每次滾動(dòng)條往右移動(dòng)1px；                 }              };             var vid = setInterval(mar, 1);             $("#container").mouseenter(function () {                 clearInterval(vid);             }).mouseleave(function () {                 vid = setInterval(mar,1);             });         });     </script> </head> <body>     <!--容器可以使用div，內(nèi)容中使用ul li，那么框1就是div1，框2就是div2，需要兩個(gè)div在一行，就需要設(shè)置div的float：left屬性-->     <!--當(dāng)然如果你對(duì)于css不是很了解，也可以使用table來(lái)實(shí)現(xiàn)，用td1和td2來(lái)實(shí)現(xiàn)。本人對(duì)table有種不喜，所以就通過(guò)div來(lái)做了-->    <div id="container">         <div id="longwidth">             <div id="div1" class="kuang">                 <img src="04.jpg" width="120px" height="80px" />                 <img src="04.jpg" width="120px" height="80px" />                 <img src="04.jpg" width="120px" height="80px" />                 <img src="04.jpg" width="120px" height="80px" />                 <img src="04.jpg" width="120px" height="80px" />                 <img src="04.jpg" width="120px" height="80px" />                 <img src="04.jpg" width="120px" height="80px" />             </div>             <div id="div2" class="kuang"></div>         </div>    </div> </body> </html>
向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手