[JS]手动实现一个横屏滚动公告js插件
前言
工作中要用到.在github上找的大部分都是竖屏滚动没办法只能自己手动写.
本来只是想随便实现一下的,结果一时兴起把它弄成了一个简单的小插件,开了个github仓库(希望路过点个星)
因为我自己就是用户,尽量简化了用户要做的操作.现在使用起来像是这个样子
<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>
思路
- 公告容器
宽度不定
: 使用js动态计算宽度等数值 - 公告
不能换行
: 设置white-space:nowrap
,凸出去的部分用overflow:hidden
掩藏 - 公告向左滚动: 只需
定时
改变文字容器的left即可 - 实现循环滚动: 文字完全消失后将div移到公告容器的
末尾
- 代码可读性: 大量使用Promise取代回调
实现
大量使用ES6语法,不打算兼容IE
入口像是这样,详细可以看源码
return (option = {}) => {
start(init(option))
}
[JS]手动实现一个横屏滚动公告js插件的更多相关文章
- 一个无缝滚动的jquery插件
$.fn.imgscroll = function(o){ var defaults = { speed: 40, amount: 0, width: 1, dir: "left" ...
- 【原创】使用JS封装的一个小型游戏引擎及源码分享
1 /** * @description: 引擎的设计与实现 * @user: xiugang * @time: 2018/10/01 */ /* * V1.0: 引擎实现的基本模块思路 * 1.创建 ...
- Headroom.js – 快速响应用户的页面滚动操作
Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...
- 《fullPage.js》创建全屏滚动的网站
插件介绍 fullPage.js是一个简单易用的插件,创建全屏滚动的网站(也被称为单页网站).它允许全屏滚动创建网站,以及添加内部滑块. 浏览器兼容性 主要功能 支持鼠标滚动 支持前进后退和键盘控制 ...
- 一个简单用原生js实现的小游戏----FlappyBird
这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习 这是html结构 <!DOCTYPE html><html lang="en">&l ...
- 页面中的平滑滚动——smooth-scroll.js的使用
正常的本页面锚链接跳转的时候跟PPT似的,特别生硬,用户体验非常差. 这时候我们就可以借助smooth-scroll.js这个插件,来实现本页面的平滑的跳转. 1首先,导入必须的JS文件 <sc ...
- js - 移动端的超出滚动功能,附带滚动条,可解决弹层中滚动穿透问题。
背景: 弹层里边有可滚动区域时,在移动端的坑我就不多说了. 找了很多解决滚动穿透的方案,最终都不能完美解决. 一气之下自己js撸了一个. 效果图: 原理: 1.解决滚动穿透:通过给弹层绑定touchm ...
- 一周一个小demo — vue.js实现备忘录功能
这个vue实现备忘录的功能demo是K在github上找到的,K觉得这是一个用来对vue.js入门的一个非常简单的demo,所以拿在这里共享一下. (尊重他人劳动成果,从小事做起~ demo原git ...
- 一款很好用的页面滚动元素动画插件-AOS.JS
aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. 加载方法 ...
随机推荐
- bootstrap 模态框(modal)插件使用
今天用户登陆时,在原网页上弹出新登陆窗口,发现使用的是modal插件,记录下该插件的使用方法,手写强化下. 首先,模态框(modal)是覆盖在父窗体上的子窗体,目的是显示来自一个单独的源的内容,可以在 ...
- 攻防组网之—-MikroTik软路由的配置和FUZZ
作者:红发香克斯 开篇之前一直想借助一台高性能PC利用VMWare组建一个攻防网络,之前有一贴写过找到了一个软路由系统,就是可以在VMWare中使用的路由器操作系统,那个系统还挺常用,上次帖子写到了安 ...
- 20155227 实现mypwd
20155227 实现mypwd 1 学习pwd命令 2 研究pwd实现需要的系统调用(man -k; grep),写出伪代码 3 实现mypwd 4 测试mypwd 课堂学习笔记 实现mypwd 在 ...
- 项目Alpha冲刺Day1
一.会议照片 二.项目进展 1.今日安排 讨论完成项目的详细设计,并完成数据库的设计,学习powerDesigner的使用 2.问题困难 powerDesigner导出sql语句因为问题无法导入,特别 ...
- 2018上C语言程序设计(高级)作业- 第2次作业
作业要求一 提交截图: 6-7: 6-8: 6-9: 7-1: 作业要求二 题目6-7删除字符中数字字符 1.设计思路: (1)第一步:本题要求是删除字符中的数字字符,我的主要思路是通过数组遍历若遇到 ...
- Autowired注解
package com.how2java.pojo; import org.springframework.beans.factory.annotation.Autowired; public cla ...
- 更优雅的方式: JavaScript 中顺序执行异步函数
火于异步 1995年,当时最流行的浏览器--网景中开始运行 JavaScript (最初称为 LiveScript). 1996年,微软发布了 JScript 兼容 JavaScript.随着网景.微 ...
- 关于kali linux 2.0的vmware tools的安装问题
在安装好kali linux 2.0 后,首先要做的就是添加源并更新系统,否则会出现软件定位问题. 在kali 2.0中,vmware tools已经不能使用了,官方放了一个工具下载安装就好. 添加源 ...
- 阿里云API网关(14)流控策略
网关指南: https://help.aliyun.com/document_detail/29487.html?spm=5176.doc48835.6.550.23Oqbl 网关控制台: https ...
- python网络爬虫与信息提取 学习笔记day2
Day2: 查看robots协议: 查看京东的robots协议 查看百度的robots协议,可以看到百度拒绝了搜狗的爬虫233 爬取京东商品页面相关信息: import requests url = ...