http://peopletech.cn/tech-website/js/imgShow.js

1$(function () {
2    $(".imgShowBtn").click(
3        function () {
4            event.stopPropagation();
5            var _this = $(this);//将当前的pimg元素作为_this传入函数 
6            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
7            //移动端手指移动事件,如果不需要移动端手指事件,这一部分内容可以不加,只要上面两行代码以及imgShow()事件
8            var eleImg = document.querySelector('#innerdiv');
9            var store = {
10                scale: 1
11            };
12            //定义移动端的初始位置
13            var position_top, position_left, pageX, pageY;
14            // 缩放事件的处理
15            //事件开始
16            eleImg.addEventListener('touchstart', function (event) {
17                event.preventDefault();//阻止默认事件，防止底部内容滚动
18                //在触屏设备下，要判断是单指还是多指操作，可以通过event.touches数组对象的长度判断。
19                var touches = event.touches;
20                var events = touches[0];//单指
21                var events2 = touches[1];//双指
22                if (touches.length == 1) {   //单指操作                         
23                    pageX = Number(events.pageX);
24                    pageY = Number(events.pageY);
25                    store.moveable = true;
26                    var _obj = $('#innerdiv');
27                    //  .css获取的值是字符串
28                    position_left = parseFloat(_obj.css('left')
29                        .split('px'));
30                    position_top = parseFloat(_obj.css('top')
31                        .split('px'));
32
33                } else {
34                    // 第一个触摸点的坐标
35                    store.pageX = events.pageX;
36                    store.pageY = events.pageY;
37                    store.moveable = true;
38                    if (events2) {
39                        store.pageX2 = events2.pageX;
40                        store.pageY2 = events2.pageY;
41                    }
42                    store.originScale = store.scale || 1;
43                }
44            }, { passive: false }); //passive: false必须加上,否则控制台报错
45            //开始移动
46            document.addEventListener('touchmove', function (event) {
47                // event.preventDefault();//阻止默认事件，防止底部滚动
48                if (!store.moveable) {
49                    return;
50                }
51                var touches = event.touches;
52                var events = touches[0];
53                var events2 = touches[1];
54                if (touches.length == 1) 
55                {
56                    var pageX2 = Number(events.pageX);
57                    var pageY2 = Number(events.pageY);
58                    //控制图片移动
59                    $('#innerdiv').css({
60                        'top': position_top + pageY2 - pageY + 'px',
61                        "left": position_left + pageX2 - pageX + 'px'
62                    })
63                } 
64                else 
65                {
66                    // 双指移动
67                    if (events2) {
68                        // 第2个指头坐标在touchmove时候获取
69                        if (!store.pageX2) {
70                            store.pageX2 = events2.pageX;
71                        }
72                        if (!store.pageY2) {
73                            store.pageY2 = events2.pageY;
74                        }
75
76                        // 获取坐标之间的距离
77                        var getDistance = function (start, stop) {
78                            //用到三角函数
79                            return Math.hypot(stop.x - start.x,
80                                stop.y - start.y);
81                        };
82                        // 双指缩放比例计算
83                        var zoom = getDistance({
84                            x: events.pageX,
85                            y: events.pageY
86                        }, {
87                            x: events2.pageX,
88                            y: events2.pageY
89                        }) / getDistance({
90                            x: store.pageX,
91                            y: store.pageY
92                        }, {
93                            x: store.pageX2,
94                            y: store.pageY2
95                        });
96                        // 应用在元素上的缩放比例
97                        var newScale = store.originScale * zoom;
98                        // 最大缩放比例限制
99                        if (newScale > 3) 
100                        {
101                            newScale = 3;
102                        }
103                        // 记住使用的缩放值
104                        store.scale = newScale;
105                        // 图像应用缩放效果
106                        eleImg.style.transform = 'scale('
107                            + newScale + ')';
108                    }
109                }
110            }, { passive: false });//*/
111
112            document.addEventListener('touchend', function () {
113                store.moveable = false;
114                delete store.pageX2;
115                delete store.pageY2;
116            });
117            document.addEventListener('touchcancel', function () {
118                store.moveable = false;
119                delete store.pageX2;
120                delete store.pageY2;
121            });
122        });
123    //移动端手指页面结束
124});
125
126//遮罩层图片位置
127function imgShow(outerdiv, innerdiv, bigimg, _this) {
128    //这是刚才判断是否PC端的函数事件

129    var flag = IsPC();
130    console.log(flag);
131    var src = _this.attr("src");//获取当前点击的pimg元素中的src属性 
132    $(bigimg).attr("src", src);//设置#bigimg元素的src属性 
133    /*获取当前点击图片的真实大小，并显示弹出层及大图*/
134    $("<img/>").attr("src", src).on( "load" , function () {
135        //注意在使用这种方法获取窗口高度和宽度的时候,
136        //务必在html页面最上方加上一句<!DOCTYPE html>,否则获取屏幕高度时会出问题
137        var windowW = $(window).width();//获取当前窗口宽度
138        var windowH = $(window).height();//获取当前窗口高度  
139        var realWidth = this.width;//获取图片真实宽度 
140        var realHeight = this.height;//获取图片真实高度 
141        var imgWidth, imgHeight;
142        var scale = 0.9;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放 
143        if (realHeight > windowH * scale) {//判断图片高度 
144            imgHeight = windowH * scale;//如大于窗口高度，图片高度进行缩放 
145            imgWidth = imgHeight / realHeight * realWidth;//等比例缩放宽度
146            if (imgWidth > windowW * scale) {//如宽度扔大于窗口宽度 
147                imgWidth = windowW * scale;//再对宽度进行缩放 
148            }
149        } else if (realWidth > windowW * scale) {//如图片高度合适，判断图片宽度 
150            imgWidth = windowW * scale;//如大于窗口宽度，图片宽度进行缩放 
151            imgHeight = imgWidth / realWidth * realHeight;//等比例缩放高度 
152        } else {//如果图片真实高度和宽度都符合要求，高宽不变 
153            if (flag == false) {
154                imgWidth = realWidth;
155                imgHeight = realHeight;
156            } else if (realWidth >= 1000) {  //这里我怕图片太大又做了个判断
157                imgWidth = realWidth;
158                imgHeight = realHeight;
159            } else {
160                imgWidth = realWidth * 2;
161                imgHeight = realHeight * 2;
162            }
163        }
164        $(bigimg).css("width", imgWidth);//以最终的宽度对图片缩放 
165        var w = (windowW - imgWidth) / 2;//计算图片与窗口左边距 
166        var h = (windowH - imgHeight) / 2;//计算图片与窗口上边距 
167        $(innerdiv).css({
168            "top": h,
169            "left": w
170        });//设置#innerdiv的top和left属性 
171        $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg 
172    });
173    $(outerdiv).click(function () {//再次点击淡出消失弹出层 
174        $(this).fadeOut("fast");
175    });
176    $("#innerClose").click(function () {//再次点击淡出消失弹出层 
177        $(outerdiv).fadeOut("fast");
178    });
179};
180
181function IsPC() 
182{
183    var sUserAgent = navigator.userAgent;
184    if (sUserAgent.indexOf('Android') > -1 || sUserAgent.indexOf('iPhone') > -1 || sUserAgent.indexOf('iPad') > -1 || sUserAgent.indexOf('iPod') > -1 || sUserAgent.indexOf('Symbian') > -1) {
185        return false;
186    }
187    else {
188        return true;
189    }
190}