overhang.js,一款顶部通知栏

简介: 笔者在浏览器顶部有弹出信息通知的需求,来传达全局消息。刚好找到了这款专用于顶部通知栏的JS工具,overhang.js。我们首先看下它的展示效果:Overhang.png当然,它支持修改颜色,修改通知内容,以及修改一些样式来达到自定义的效果。

笔者在浏览器顶部有弹出信息通知的需求,来传达全局消息。

刚好找到了这款专用于顶部通知栏的JS工具,overhang.js。我们首先看下它的展示效果:


Overhang.png

当然,它支持修改颜色,修改通知内容,以及修改一些样式来达到自定义的效果。


图片.png
图片.png
图片.png
图片.png
图片.png
图片.png

它还支持写入HTML:

图片.png

可以说,上述的demo展示,已经充分体现了overhang.js的强大之处了,它的使用如下所示,可以看到它是基于Jquery的:
1、引入文件
<link rel="stylesheet" href="css/overhang.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/overhang.min.js"></script>

2、HTML
<a href="javascript:" class="btn1">点我</a>

3、JavaScript
$('.btn1').on('click', function() {
$('body').overhang({});
});

最后,这里列出所有的参数表:

参数表.png
目录
相关文章
|
6月前
|
JavaScript 前端开发 数据安全/隐私保护
JS点击切换背景图
JS点击切换背景图
78 0
|
JavaScript API
JS如何模拟鼠标点击X,Y坐标
现在我有个窗口坐标X,Y. 如何利用JS点击该坐标? document.body.onclick = function(){ e = arguments[0]; var dt = e.
2503 0
|
2月前
|
JavaScript 前端开发
js 回到页面顶部
本文提供了一个JavaScript函数`scrollToTop`,用于平滑滚动页面回到顶部。该函数利用`requestAnimationFrame`和`window.scrollTo`方法逐步减少滚动条距离,直到页面完全回到顶部。
30 1
|
3月前
|
JavaScript 前端开发 API
js全屏,监听页面是否全屏
js全屏,监听页面是否全屏
65 4
|
6月前
|
存储 JavaScript
|
6月前
|
JavaScript
js回到顶部
js回到顶部
37 0
|
JavaScript
js点击按钮向左侧滑动效果
js点击按钮向左侧滑动效果
|
JavaScript 前端开发
js实现悬浮按钮并回到页面顶部
js实现悬浮按钮并回到页面顶部
492 0
|
JavaScript 前端开发
JS 页面滚至顶部动画效果
JS 页面滚至顶部动画效果
JS 页面滚至顶部动画效果
|
JavaScript 前端开发
js实现页面滑动到最底部触发内容加载
js实现页面滑动到最底部触发内容加载
434 0