最近这一两周写了一个小的web弹层组件——HLayer.js,这个组件的定位是简洁、现代、无依赖,这也就意味着不打算兼容旧版本的浏览器。web弹层组件早已不是web开发的新鲜事物了,国内外也不乏众多优秀的弹层组件,不过HLayer.js我是会作为自己第一个长期维护的项目,大家可以到http://hlayer.huruji3.com/体验HLayer.js,项目的GitHub地址是https://github.com/huruji/Hlayer。
HLayer自带9种动画、8种icon、8种位置、5中loading动画、5种文本框、HTML5音频、iframe、iframe视频、相册自动播放等功能,同时这些功能又可以随意组合,当然HLayer.js可通过颜色、文字、标题、动画等配置来使得HLayer.js更加符合你的项目。
使用HLayer.js非常简单,如下就是几个简单的实现:
hlayer.loading({
loadingType:2
});
hlayer.iframe({
url:'https://www.google.com',
width:'1200px',
height:'500px'
});
hlayer.prompt({
formType:3,
width:'500px',
height:'350px'
});
配置性强和简单易用的特性,相信HLayer.js会是web弹层组件不错的选择。更多的示例和API文档可以查看官网http://hlayer.huruji3.com/,当然如果你觉得HLayer.js不错的话,不仿点个star哦,当然欢迎在github上查看源码。
以下是HLayer.js的部分功能截图:
体验区部分功能展示:
1、不同icon
2、不同loading
3、不同表单
4、调查问卷示例
5、HTML5音频
6、视频
7、相册
8、tips
最后是一个广告贴,最近新开了一个分享技术的公众号,欢迎大家关注👇