[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))
}

转载于:https://www.cnblogs.com/uturobako/p/handmake-js-roll-notice-plugin.html