溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了原生js如何實現(xiàn)公告滾動效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。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下第一個li元素，好計算li的高度，因為后面滾動的時候每次要滾動一個高度，這里li都是一樣高的，
// 所以獲取第一個的高度就行了，不然要遍歷獲取每一個li的高度。
var noticeFirstItem = noticeList.querySelector("li");
// 獲取li的高度，這里獲取的是offsetHeight，關(guān)于js各種高度的定義可以注意以下
var scrollHeight = noticeFirstItem.offsetHeight;
// 是否可以進(jìn)行動畫
var opt = {
animated: true,
interval: 1000
};
notice.onclick = function() {
// 動畫之前首先重置
// noticeFirstItem.style.transition = "";
noticeFirstItem.style.marginTop = 0;
if (opt.animated) {
opt.animated = false;
animate(noticeList, scrollHeight, opt);
}
};
};
// 動畫函數(shù)，obj——要產(chǎn)生動畫的對象，sHeight——每次要滾動的距離，interval——多久滾動一次
function animate(obj, sHeight, option) {
// 當(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";
// 注意這里的比較符號，前面得到的高度都進(jìn)行四舍五入了
if (marginTopNum <= stopHeight) {
clearInterval(timer);
// option.animated = true;
}
}, option.interval);
}
</script>4.運行結(jié)果
動畫在進(jìn)行中時注意控制不能進(jìn)行其他動畫！
結(jié)束語：不要把動畫想得很難，當(dāng)你想實現(xiàn)復(fù)雜的動畫時，比如jquery的animate方法，你可以先實現(xiàn)針對一個屬性的動畫，然后再想辦法擴展到多個屬性（即以對象方式去傳參，然后遍歷對象中的每個樣式屬性，然后給每個樣式屬性添加動畫）。以前都是用js去實現(xiàn)每一幀每一幀的移動，即在肉眼無法反應(yīng)過來的時間里產(chǎn)生移動，這樣就能產(chǎn)生連續(xù)移動的效果，現(xiàn)在css3出來了，可以方便的利用css3來實現(xiàn)過渡效果了，而不用復(fù)雜的js來實現(xiàn)了。這個真的太棒了。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“原生js如何實現(xiàn)公告滾動效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼