這篇文章主要介紹了原生js如何實(shí)現(xiàn)公告滾動(dòng)效果,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
發(fā)展壯大離不開廣大客戶長(zhǎng)期以來的信賴與支持,我們將始終秉承“誠(chéng)信為本、服務(wù)至上”的服務(wù)理念,堅(jiān)持“二合一”的優(yōu)良服務(wù)模式,真誠(chéng)服務(wù)每家企業(yè),認(rèn)真做好每個(gè)細(xì)節(jié),不斷完善自我,成就企業(yè),實(shí)現(xiàn)共贏。行業(yè)涉及成都辦公空間設(shè)計(jì)等,在網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站、WAP手機(jī)網(wǎng)站、VI設(shè)計(jì)、軟件開發(fā)等項(xiàng)目上具有豐富的設(shè)計(jì)經(jīng)驗(yàn)。js的作用是什么1、能夠嵌入動(dòng)態(tài)文本于HTML頁(yè)面。2、對(duì)瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測(cè)訪客的瀏覽器信息。6、控制cookies,包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。
具體內(nèi)容如下
1.html結(jié)構(gòu)
<body> <div id="notice" class="notice"> <ul id="noticeList"> <li>我是公告1</li> <li>我是公告2</li> <li>我是公告3</li> <li>我是公告4</li> </ul> </div> </body>
2.css樣式
<style type="text/css"> body, div, ul, li { margin: 0; padding: 0; } ul, li { list-style: none; } .notice { width: 300px; height: 30px; border: 1px solid black; text-align: center; overflow: hidden; } li { padding: 3px; } </style>
3.js行為
<script type="text/javascript"> window.onload = function() { var notice = document.getElementById("notice"); var noticeList = document.getElementById("noticeList"); // 獲取ul下第一個(gè)li元素,好計(jì)算li的高度,因?yàn)楹竺鏉L動(dòng)的時(shí)候每次要滾動(dòng)一個(gè)高度,這里li都是一樣高的, // 所以獲取第一個(gè)的高度就行了,不然要遍歷獲取每一個(gè)li的高度。 var noticeFirstItem = noticeList.querySelector("li"); // 獲取li的高度,這里獲取的是offsetHeight,關(guān)于js各種高度的定義可以注意以下 var scrollHeight = noticeFirstItem.offsetHeight; // 是否可以進(jìn)行動(dòng)畫 var opt = { animated: true, interval: 1000 }; notice.onclick = function() { // 動(dòng)畫之前首先重置 // noticeFirstItem.style.transition = ""; noticeFirstItem.style.marginTop = 0; if (opt.animated) { opt.animated = false; animate(noticeList, scrollHeight, opt); } }; }; // 動(dòng)畫函數(shù),obj——要產(chǎn)生動(dòng)畫的對(duì)象,sHeight——每次要滾動(dòng)的距離,interval——多久滾動(dòng)一次 function animate(obj, sHeight, option) { // 當(dāng)滾到最后一條公告的時(shí)候就不用動(dòng)畫了。 var stopHeight = sHeight - obj.scrollHeight; var marginTopNum = 0; var timer = setInterval(function() { marginTopNum -= sHeight; obj.style.marginTop = marginTopNum + "px"; obj.style.transition = "margin-top 1.5s ease"; // 注意這里的比較符號(hào),前面得到的高度都進(jìn)行四舍五入了 if (marginTopNum <= stopHeight) { clearInterval(timer); // option.animated = true; } }, option.interval); } </script>
4.運(yùn)行結(jié)果
動(dòng)畫在進(jìn)行中時(shí)注意控制不能進(jìn)行其他動(dòng)畫!
結(jié)束語:不要把動(dòng)畫想得很難,當(dāng)你想實(shí)現(xiàn)復(fù)雜的動(dòng)畫時(shí),比如jquery的animate方法,你可以先實(shí)現(xiàn)針對(duì)一個(gè)屬性的動(dòng)畫,然后再想辦法擴(kuò)展到多個(gè)屬性(即以對(duì)象方式去傳參,然后遍歷對(duì)象中的每個(gè)樣式屬性,然后給每個(gè)樣式屬性添加動(dòng)畫)。以前都是用js去實(shí)現(xiàn)每一幀每一幀的移動(dòng),即在肉眼無法反應(yīng)過來的時(shí)間里產(chǎn)生移動(dòng),這樣就能產(chǎn)生連續(xù)移動(dòng)的效果,現(xiàn)在css3出來了,可以方便的利用css3來實(shí)現(xiàn)過渡效果了,而不用復(fù)雜的js來實(shí)現(xiàn)了。這個(gè)真的太棒了。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“原生js如何實(shí)現(xiàn)公告滾動(dòng)效果”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
文章題目:原生js如何實(shí)現(xiàn)公告滾動(dòng)效果-創(chuàng)新互聯(lián)
鏈接地址:http://muchs.cn/article10/eehgo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供Google、標(biāo)簽優(yōu)化、域名注冊(cè)、網(wǎng)頁(yè)設(shè)計(jì)公司、商城網(wǎng)站、網(wǎng)站設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容