小編給大家分享一下怎么基于JavaScript實現(xiàn)新增內(nèi)容滾動播放效果,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)與策劃設(shè)計,大英網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:大英等地區(qū)。大英做網(wǎng)站價格咨詢:028-86922220
先給大家展示下效果圖:
完整demo如下
每兩秒隨機(jī)向上或者向下滾動,如果要替換新內(nèi)容,則通過html()更新內(nèi)容即可(查看注釋代碼)
<!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> ul,li{ list-style-type:none; border: solid; } ul{ overflow: hidden;/*讓li超出ul時隱藏*/ } body{ margin: 0px; } </style> </head> <body> <div> <ul> <li> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503543418892&di=1f606f0990cf6fa893c8330457b5fde2&imgtype=0&src=http%3A%2F%2Fi3.hoopchina.com.cn%2Fblogfile%2F201509%2F16%2FBbsImg144240668814516_480*360.jpg"/> </li> <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503543451619&di=a578daa6b6f794cb233f655cd5ecaf91&imgtype=0&src=http%3A%2F%2Fimg.qqzhi.com%2Fupload%2Fimg_0_3518803618D2241430362_23.jpg"/> </li> <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503544550636&di=086d271111b428fadf9e23abb7c06b1e&imgtype=0&src=http%3A%2F%2Fuploads.yeyoujia.com%2Fcms%2Fimages%2F2017%2F02%2F10%2F589d8e4598d46285900450.png"> </li> </ul> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script> function getRandom(min, max){ var r = Math.random() * (max - min); var re = Math.round(r + min); re = Math.max(Math.min(re, max), min) return re; } $(function(){ setInterval(function(){ if(getRandom(0,1)==0){ //向上滾動特效 var ul = $("ul"); var $first = ul.find('li:first'); var height = $first.height(); $first.animate({ marginTop: -height + 'px' }, 500, function() { // $first.css('marginTop', 0).html(new Date().getMinutes()+":"+new Date().getSeconds()).appendTo(ul);/*不要寫成append*/ $first.css('marginTop', 0).appendTo(ul); }); }else{ //向下滾 var ul = $("ul"); var liHeight = ul.find("li:last").height();//計算最后一個li元素的高度 ul.animate({marginTop : liHeight +"px"},500,function(){ // ul.find("li:last").html(new Date().getMinutes()+":"+new Date().getSeconds()).prependTo(ul);/*不要寫成prepend*/ ul.find("li:last").prependTo(ul);/*不要寫成prepend*/ ul.find("li:first").hide(); ul.css({marginTop:0}); ul.find("li:first").fadeIn(1000); }); } },2000); }); </script> </body> </html>
效果
以上是“怎么基于JavaScript實現(xiàn)新增內(nèi)容滾動播放效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
本文名稱:怎么基于JavaScript實現(xiàn)新增內(nèi)容滾動播放效果
網(wǎng)頁地址:http://www.muchs.cn/article24/piegje.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供做網(wǎng)站、網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、商城網(wǎng)站、企業(yè)建站、營銷型網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)