Clipic.js插件可以为移动端 (仅支持移动端) 提供头像上传并裁剪成指定尺寸,用原生js开发的,轻量级,包含html跟css,不到8kb。点此链接体验: https://teojs.github.io/clipic/
https://github.com/teojs/clipic
参数说明
width:Number (默认:500) – 裁剪宽度
height:Number (默认:500) – 裁剪高度
ratio:Number (可选) – 裁剪的比例,当传入ratio时width/height将无效
src:String (必传) – 需要裁剪的图片,可以是图片链接,或者 base64
type:String (默认:jpeg) – 裁剪后图片的类型,仅支持 jpeg/png 两种
quality:Number (默认:0.9) – 压缩质量
buttonText:Array (默认:[‘取消’, ‘重置’, ‘完成’]) – 底部三个按钮文本
http://bbs.itying.com/topic/5cb17892c6a71b10bcef96b0
一、滚动插件,常用于移动端
二、初始化
(1)html结构:
<div class="wrapper">
只能让第一个子元素滚动
<div>
可放入多个子元素
</div>
</div>
(2)css: 外层盒子是定高的
<1>直接给定一个高度
<2>在移动端,如果需要滚动,且需要高度全屏
position: absolute (定位父元素是body)
top:0
bottom:0
(3) 引入iscroll.js
var myscroll = new IScroll(".wrapper")
三、自定义配置
var myscroll = new IScroll(".wrapper",{
scrollX: true, //能够水平滚动
scrollY: false , //在水平滚动时,禁止垂直滚动
snap: "li" // snap: true
click: true,
//如果希望监听滚动事件,则不能引入iscroll.js,
而需要引入iscroll-probe.js, 同时结合 probeType属性
probeType: 3 // 也可以是1,2
})
四、iscroll实例支持的事件
myscroll.on("scroll",function(){})
myscroll.on("scrollStart",function(){})
myscroll.on("scrollEnd",function(){})
myscroll.on("refresh",function(){})
五、iscoll实例的常用属性
1. this.currentPage.pageX
2. this.currentPage.pageY
3. this.currentPage.x
4. this.currentPage.y
5. this.x
6. this.y
六、实例的方法
1.myscroll.refresh() //非常重要的方法,在数据更新后,一定要调用一次该方法
2. myscroll.scrollTo()
3. myscroll.scrollBy()
3. myscroll.goToPage()