Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zhiqiang21/webcomponent
前端常用组件
https://github.com/zhiqiang21/webcomponent
Last synced: 1 day ago
JSON representation
前端常用组件
- Host: GitHub
- URL: https://github.com/zhiqiang21/webcomponent
- Owner: zhiqiang21
- License: mit
- Created: 2015-12-21T03:57:21.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-09-05T06:47:09.000Z (about 6 years ago)
- Last Synced: 2024-11-06T04:18:43.315Z (8 days ago)
- Language: JavaScript
- Homepage:
- Size: 3.91 MB
- Stars: 449
- Watchers: 39
- Forks: 687
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# **WebComponents**[![Build Status](https://travis-ci.org/zhiqiang21/WebComponent.svg?branch=master)](https://travis-ci.org/zhiqiang21/WebComponent)
## **欢迎Star 欢迎ISSUE,您的鼓励会是我写作的动力!**
在使用的过程中,如果对插件有新的功能需求,欢迎 fork 发起 pull request 。如果您没有时间更新,请建立 ISSUE 我会考虑后加入该功能!# **插件列表:**
1. html5-qrcode
2. myslider
3. lazy-load-img
4. dragselect ----_[todo]_
5. light-rotate
6. JavaScript 命名空间管理插件
7. NetOrListShow(仿app store 商品网状列表动态切换插件)# **插件简介:**
--------------------------------------------------------------------------------
## **1.html5-qrcode**
**功能:**
**1.1** h5页面在微博客户端中呼起摄像头扫描二维码并且解析。
**1.2** h5页面在非微博客户端中(原生浏览器或者微信客户端)呼起系统拍照或者上传图片按钮,拍照二维码或者上传二维码并且解析
具体使用方法,参看**[说明文档](https://github.com/zhiqiang21/WebComponent/tree/master/html5-Qrcode/README.md)**
--------------------------------------------------------------------------------
## **2.myslider**
**特点:**
- 自定义配置(动画切换时间,sweep 时间,自动播放等)
- 一个页面中多个 slider 可以共存
- 自动切换轮播图片
- 支持按钮点按切换图片
- 支持移动端触摸切换
- 支持移动端的 sweep具体使用方法,参看**[说明文档](https://github.com/zhiqiang21/WebComponent/blob/master/MySlider/README.md)**
**预览:**
**gif 生成问题,按钮和图片的切换不同步**
![预览效果](http://ww1.sinaimg.cn/large/698e22a9jw1f2cdnw4jgyg20pl0es7wh.gif)
--------------------------------------------------------------------------------
## **3.lazy-load-img**
**功能:**
能够实现手机端图片的按需加载,减少图片一次性加载的网络带宽开销。增加页面的加载速度和用户体验。 具体使用方法和参看**[说明文档](https://github.com/zhiqiang21/WebComponent/tree/master/lazy-load-img)**
--------------------------------------------------------------------------------
## **4.dragselect**
_TODO_
--------------------------------------------------------------------------------
## **5.light-rotate**
**预览:**
![插件预览效果](light-rotate/img/2016-02-02 15_18_46.gif)
**功能:**
"跑马灯"的抽奖效果。轮盘旋转完成抽奖效果。可以自定义参数:自动播放跑马灯,跑马灯旋转时间,奖品旋转时间,跑马灯旋转方向 具体使用方法和参看**[说明文档](https://github.com/zhiqiang21/WebComponent/tree/master/light-rotate/README.md)**
--------------------------------------------------------------------------------
## **6.JavaScript 命名空间管理插件**
**[点击查看说明文档](https://github.com/zhiqiang21/WebComponent/tree/master/JsNameSpaceManage/README.md)**
## **7.NetOrListShow(仿app store 商品网状列表动态切换插件)**
**App Store 动画示例**
**Demo 动画示例(Gif 截图导致动画有些丢帧,请下载源码运行查看)**
![](http://ww1.sinaimg.cn/large/698e22a9jw1f4ei3lryb0g20bp0gz4qp.gif)![](http://ww2.sinaimg.cn/large/698e22a9gw1f3zgw584l9g20df0joq4p.gif)