最近這一兩周寫了一個小的web彈層組件——HLayer.js汉形,這個組件的定位是簡潔纸镊、現(xiàn)代、無依賴概疆,這也就意味著不打算兼容舊版本的瀏覽器逗威。web彈層組件早已不是web開發(fā)的新鮮事物了,國內外也不乏眾多優(yōu)秀的彈層組件岔冀,不過HLayer.js我是會作為自己第一個長期維護的項目凯旭,大家可以到http://hlayer.huruji3.com/體驗HLayer.js,項目的GitHub地址是https://github.com/huruji/Hlayer使套。
HLayer自帶9種動畫罐呼、8種icon、8種位置童漩、5中l(wèi)oading動畫弄贿、5種文本框、HTML5音頻矫膨、iframe、iframe視頻期奔、相冊自動播放等功能侧馅,同時這些功能又可以隨意組合,當然HLayer.js可通過顏色呐萌、文字馁痴、標題、動畫等配置來使得HLayer.js更加符合你的項目肺孤。
使用HLayer.js非常簡單罗晕,如下就是幾個簡單的實現(xiàn):
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文檔可以查看官網(wǎng)http://hlayer.huruji3.com/小渊,當然如果你覺得HLayer.js不錯的話,不仿點個star哦茫叭,當然歡迎在github上查看源碼酬屉。
以下是HLayer.js的部分功能截圖:
體驗區(qū)部分功能展示:
1、不同icon
2揍愁、不同loading
3呐萨、不同表單
4、調查問卷示例
5莽囤、HTML5音頻
6谬擦、視頻
7、相冊
8朽缎、tips
最后是一個廣告貼惨远,最近新開了一個分享技術的公眾號蔚舀,歡迎大家關注??