jQuery如何实现移动端图片缩放功能

　　介绍

这篇文章主要讲解了jQuery如何实现移动端图片缩放功能,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

HTML结构:

& lt; div类=癰ox"比; 　　https://www.yisu.com/zixun/& lt; img src=" d1981a8ba21975314fd2edf9c09447bb.jpg "> 　　8 e7075a2c6b7fb1e083914db000a70c5.jpg 　　 　　

JS:

函数矩阵(el美元,选项){
　　这一点。el=el美元;
　　这一点。clientW=$(窗口).width ();
　　这一点。imgLen=0;
　　这一点。cur_x=0;
　　这一点。start_x=0;//差值
　　这一点。m=0;
　　
　　这一点。params=$。扩展({},{+:1.1,减少:。9},选项);
　　这一点。+=this.params.plus;
　　这一点。减少=this.params.reduce;//缩放初始值
　　这一点。s=1;
　　这一点。国旗=false;
　　}
　　
　　Matrix.prototype。chooseImg=function () {
　　var _this=,
　　包=l美元;
　　wrap.on美元(& # 39;点击# 39;& # 39;img # 39;函数(){
　　面具var=$ (& # 39; & lt; div类=癴ui-mask"祝辞& lt;/div> & # 39;),
　　fui_pop=$ (& # 39; & lt; div类=癴ui-pop"祝辞& lt;/div> & # 39;),
　　fui_slider=$ (& # 39; & lt; ul类=癴ui-slider"祝辞& lt;/ul> & # 39;),
　　指数,
　　一个=wrap.find美元(& # 39;img # 39;),
　　url=& # 39; & # 39;
　　李=& # 39;& # 39;
　　clientWidth=_this.clientW;
　　
　　指数=$ ().index ();
　　
　　美元(& # 39;身体# 39;).append(面具).append (fui_pop);
　　美元(& # 39;.fui-pop& # 39;) .append (fui_slider);
　　
　　如果(一个美元){
　　一个美元。每个(函数(){
　　url=$ () .attr (& # 39; src # 39;);
　　李+=& # 39;& lt;李类=癴ui-slider-item"祝辞& lt; img src=https://www.yisu.com/zixun/url ' + + ' alt=" ">  ';
　　_this.imgLen + +;
　　}）;
　　$ (' .fui-slider ') .append(李)
　　.width (_this。imgLen * 100 + ' % ')
　　. css(“左”,指数* clientWidth +“px”);
　　其他}{
　　alert('请选择图片@@”);
　　返回
　　}
　　
　　_this.touchSlide ();
　　_this.closeImg ();
　　_this.scale ();
　　})
　　}；
　　Matrix.prototype。closeImg=function () {
　　var _this=;
　　$ (' .fui-slider-item ')。(“点击”,函数(e) {
　　$('。fui-pop .fui-mask”) .remove ();
　　_this。imgLen=0;
　　})
　　}；
　　Matrix.prototype。touchSlide=function () {
　　var _this=,
　　滑块美元=$ (' .fui-slider '),
　　clientW=this.clientW,
　　imgLen=this.imgLen;
　　
　　滑块美元。(“touchstart”、“。fui-slider-item’,函数(e) {
　　var指数=$ ().index (),
　　m=_this.m,
　　左=方法($ slider.css('左'));
　　_this。start_x=e.originalEvent.touches [0] .clientX;
　　
　　如果(_this.flag)返回;
　　_this。国旗=true;
　　
　　(美元)。(“touchmove”功能(e) {
　　_this。cur_x=e.originalEvent.touches [0] .clientX;
　　m=_this。cur_x - _this.start_x;
　　如果(Math.abs (m)> 50) {
　　console.log (m);
　　console.log (m);
　　滑块美元
　　. css(‘左’,左+ m +“px”)
　　(“.fui-slider-item”) . css ({
　　“转换”:“规模(1)”,
　　“transform-origin”:“0% - 0%”
　　}）;
　　}
　　}）;
　　
　　(美元)。(“touchend”功能(e) {
　　_this。国旗=false;//每次touchend的时候,将缩放值初始化
　　_this。s=1;
　　
　　如果(Math.abs (m)  0) {
　　滑块美元。css(‘左’,左+“px”);
　　其他}{
　　滑块美元。css(‘左’,left-clientW +“px”);
　　}
　　}else if(指数 0) {
　　滑块美元。css(‘左’,左+ clientW +“px”);
　　其他}{
　　滑块美元。css(‘左’,left-clientW +“px”);
　　}
　　
　　其他}{
　　如果(m <0) {
　　滑块美元。css(‘左’,左+“px”);
　　其他}{
　　滑块美元。css(‘左’,左+ clientW +“px”);
　　}
　　}
　　
　　}）;
　　})
　　}；
　　
　　Matrix.prototype。规模=function () {
　　var _this=;
　　
　　$ (' .fui-slider ')。(“mousewheel”、“。fui-slider-item’,函数(e) {
　　
　　var
　　oEvent=e.originalEvent,
　　p_x=0,
　　p_y=0,
　　δ=oEvent。wheelDelta | | -oEvent.delta;
　　
　　如果(δ> 0){
　　_this。*=_this.plus;
　　其他}{
　　_this。*=_this.reduce;
　　}
　　
　　
　　p_x=(oEvent。clientX/$(窗口).width ()) * 100;
　　p_y=(oEvent。clientY/$(窗口).height ()) * 100;
　　
　　$ (). css ({
　　“转换”:“规模(' + _this.s + ') ',
　　“transform-origin”: p_x +‘%’+ p_y +‘%’,
　　“-webkit-transform-origin”: p_x +‘%’+ p_y +‘%’
　　}）;
　　})
　　}；
　　
　　.fn美元。变焦=函数(选项,cb) {
　　var变焦=新矩阵(选项,cb);
　　返回zoom.chooseImg ();
　　};
jQuery如何实现移动端图片缩放功能