[JS]手動實現一個橫屏滾動公告js插件

前言

工作中要用到.在github上找的大部分都是豎屏滾動沒辦法只能自己手動寫.

本來只是想隨便實現一下的,結果一時興起把它弄成了一個簡單的小插件,開了個github倉庫(希望路過點個星)

JS橫屏滾動插件

因為我自己就是用戶,盡量簡化了用戶要做的操作.現在使用起來像是這個樣子

<div id="notice">這是一個公告</div>

<!-- 依賴jquery -->
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<!-- 引入本庫 -->
<script src="./assets/js/roll_notice.js"></script>
<script>
    roll_notice({ id: 'notice' })
</script>

思路

1. 公告容器寬度不定: 使用js動態計算寬度等數值
2. 公告不能換行: 設置white-space:nowrap,凸出去的部分用overflow:hidden掩藏
3. 公告向左滾動: 只需定時改變文字容器的left即可
4. 實現循環滾動: 文字完全消失后將div移到公告容器的末尾
5. 代碼可讀性: 大量使用Promise取代回調

實現

大量使用ES6語法,不打算兼容IE

入口像是這樣,詳細可以看源碼

return (option = {}) => {
  start(init(option))
}