笔者在浏览器顶部有弹出信息通知的需求,来传达全局消息。
刚好找到了这款专用于顶部通知栏的JS工具,overhang.js。我们首先看下它的展示效果:
![](https://img.haomeiwen.com/i8140912/8411dcede8d35b8b.png)
当然,它支持修改颜色,修改通知内容,以及修改一些样式来达到自定义的效果。
![](https://img.haomeiwen.com/i8140912/187966da9b5e506b.png)
![](https://img.haomeiwen.com/i8140912/e359540eb4004dac.png)
![](https://img.haomeiwen.com/i8140912/68bd29213a4d2d52.png)
![](https://img.haomeiwen.com/i8140912/08684174cd556e0f.png)
![](https://img.haomeiwen.com/i8140912/f35ad6303f752be5.png)
![](https://img.haomeiwen.com/i8140912/d75a9d299df5bbf2.png)
它还支持写入HTML:
![](https://img.haomeiwen.com/i8140912/6a67569c48361bfc.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({});
});
最后,这里列出所有的参数表:
![](https://img.haomeiwen.com/i8140912/84ee2b860b38fe92.png)
网友评论