多图上传
类似qq控件图片上传效果
示例文档:http://www.52doit.com/show/341图片浏览插件
1)phtoswipe
官网: http://www.photoswipe.com/
源码:https://github.com/dimsemenov/photoswipe
2)Lightbox2
常具有功能包括:自动根据窗口的大小缩放图片,模式窗口,幻灯片方式播放,内容预加载,渐变等效果。
下载网址:http://lokeshdhakar.com/projects/lightbox2/
其他图片浏览插件:
http://www.cnblogs.com/lhb25/archive/2011/04/11/2005330.html图像擦除插件(jquery.eraser.js)
下载网址: http://www.dowebok.com/140.html
注: v0.4.2版本,重置方法为设置图像宽高,需要自己修改配置信息
reset: function() {
var $this = $(this),
data = $this.data('eraser');
if ( data )
{
//设置画图宽高
var width = $this.width(),//设置宽
height = 130;//设置高
data.ctx.globalCompositeOperation = "source-over";
data.ctx.drawImage( data.source, 0, 0, width, height);//指定图片宽高
data.ctx.globalCompositeOperation = "destination-out";
var n = data.numParts;
while( n-- ) data.parts[n] = 1;
data.ratio = 0;
data.complete = false;
}
}
4.滑动分页插件
1)scroll.js-移动端滚动条插件
– 需要引入jquery
– 文档载入时加载滑动方法
$(document).ready(function () {
//滑动加载
var roll = new Roll();
var url = '/data/more';
roll.onLoadContents = function(){
var _this = this;
_this.isEnd = true;
var data = {'page' : this.page_num};
$.get(url, data, function(msg) {
if (msg.success) {
var datalist = data.datalist;
for (var i in datalist) {
var dataCourse = '<div>这是第' + (i + 1)+ '行数据</div>';
}
//把数据添加到末尾
$('#data_list').append(dataCourse);
if(msg.hasmore) _this.isEnd = false;
}else{
//获取更多失败
}
},'json');
}
roll.init();//初始化插件
});
注:
– 此插件加载较慢
– 在微信中,如果有出现更换子菜单情况,则该插件失效,原因不详~ ->_->
2)dropload.js
提供了最基本的上拉翻页,下拉刷新功能。对于由服务端一次返回所有数据的情况基本通用。
dropload开发文档:https://github.com/ximan/dropload
dropload避坑指南:http://wp.iyouths.org/352.html
注:
– jQuery1.7以上 或者 Zepto 二选一,不要同时都引用
– 该插件是一次性全部加载所有数据,如果添加其他条件,需要自行调整
用法参考文档:
http://blog.csdn.net/ani521smile/article/details/53861255