您的位置：首页 > Web前端 > JQuery

jQuery实现的移动端图片缩放功能组件示例

2020-05-02 07:04 991 查看

本文实例讲述了jQuery实现的移动端图片缩放功能组件。分享给大家供大家参考，具体如下：

源码见这里：https://github.com/CaptainLiao/zujian/tree/master/matrix

HTML结构：

<div class="box">
<img src="d1981a8ba21975314fd2edf9c09447bb.jpg">
<img src="8e7075a2c6b7fb1e083914db000a70c5.jpg">
<img src="d1981a8ba21975314fd2edf9c09447bb.jpg">
</div>

JS:

function Matrix($el, options) {
this.$el = $el;
this.clientW = $(window).width();
this.imgLen = 0;
this.cur_x = 0;
this.start_x = 0;
// 差值
this.m = 0;

this.params = $.extend({},{plus: 1.1, reduce: .9}, options);
this.plus = this.params.plus;
this.reduce = this.params.reduce;
// 缩放初始值
this.s = 1;
this.flag = false;
}

Matrix.prototype.chooseImg = function () {
var _this = this,
$wrap = this.$el;
$wrap.on('click','img' ,function () {
var mask = $('<div class="fui-mask"></div>'),
fui_pop = $('<div class="fui-pop"></div>'),
fui_slider = $('<ul class="fui-slider"></ul>'),
index,
$imgs = $wrap.find('img'),
url = '',
li = '',
clientWidth = _this.clientW;

index = $(this).index();

$('body').append(mask).append(fui_pop);
$('.fui-pop').append(fui_slider);

if($imgs) {
$imgs.each(function () {
url = $(this).attr('src');
li += ' <li class="fui-slider-item" style="width: '+clientWidth+'px"><img src='+url+' alt=""></li>';
_this.imgLen++;
});
$('.fui-slider').append(li)
.width(_this.imgLen * 100 +'%')
.css('left', -index * clientWidth +'px');
}else {
alert('请选择图片@@');
return
}

_this.touchSlide();
_this.closeImg();
_this.scale();
})
};
Matrix.prototype.closeImg = function () {
var _this = this;
$('.fui-slider-item').on('click', function (e) {
$('.fui-pop, .fui-mask').remove();
_this.imgLen = 0;
})
};
Matrix.prototype.touchSlide = function () {
var _this = this,
$slider = $('.fui-slider'),
clientW = this.clientW,
imgLen = this.imgLen;

$slider.on('touchstart', '.fui-slider-item', function (e) {
var index = $(this).index(),
m = _this.m,
left = parseInt($slider.css('left'));
_this.start_x = e.originalEvent.touches[0].clientX;

if(_this.flag) return;
_this.flag = true;

$(this).on('touchmove', function (e) {
_this.cur_x = e.originalEvent.touches[0].clientX;
m = _this.cur_x - _this.start_x;
if(Math.abs(m) > 50) {
console.log(m);
console.log(m);
$slider
.css('left', left+m+'px')
.find('.fui-slider-item').css({
'transform': 'scale(1)',
'transform-origin': '0% 0%'
});
}
});

$(this).on('touchend', function (e) {
_this.flag = false;
// 每次touchend的时候，将缩放值初始化
_this.s = 1;

if(Math.abs(m) < clientW / 3){
$slider.css('left', left+'px');
return;
}

index = index % imgLen;

if(index ==0){
if(m > 0) {
$slider.css('left', left+'px');
}else {
$slider.css('left', left-clientW+'px');
}
}else if(index < imgLen-1){
if(m > 0) {
$slider.css('left', left+clientW+'px');
}else {
$slider.css('left', left-clientW+'px');
}

}else{
if(m < 0) {
$slider.css('left', left+'px');
}else {
$slider.css('left', left+clientW+'px');
}
}

});
})
};

Matrix.prototype.scale = function() {
var _this = this;

$('.fui-slider').on('mousewheel','.fui-slider-item', function(e) {

var
oEvent = e.originalEvent,
p_x = 0,
p_y = 0,
delta = oEvent.wheelDelta || -oEvent.delta;

if(delta > 0) {
_this.s *= _this.plus;
}else {
_this.s *= _this.reduce;
}

p_x = (oEvent.clientX / $(window).width()) * 100;
p_y = (oEvent.clientY / $(window).height()) *100 ;

$(this).css({
'transform': 'scale('+_this.s+')',
'transform-origin':p_x+'% '+p_y+'%',
'-webkit-transform-origin': p_x+'% '+p_y+'%'
});
})
};

$.fn.zoom = function (options, cb) {
var zoom = new Matrix(this, options, cb);
return zoom.chooseImg();
};

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery 移动端图片缩放组件

相关文章推荐

新的分享

章节导航