需求：
1.圖片隨著手指滾動(dòng)
2.雙指縮放
3.自動(dòng)播放
實(shí)現(xiàn)：移動(dòng)端中js有touch事件，touchstart、touchmove、touched，
隨手指滾動(dòng)：touchstart 記錄手指起始位置，touchmove計(jì)算手指移動(dòng)位置，并把移動(dòng)位置賦值給視圖的transform?translateX
雙指縮放：touchstart中得到觸摸的兩個(gè)點(diǎn)，touchmove中計(jì)算兩個(gè)點(diǎn)距離，并把距離值賦給視圖的transform?scale
自動(dòng)播放：設(shè)置定時(shí)器，在每幾秒執(zhí)行的方法中改變視圖的transform?translateX
自動(dòng)播放方法：
scrollView() {
? ? ? ? let _this = this;
? ? ? ? var scanner = document.querySelector('.scanner_box');
? ? ? ? var ul = scanner.children[0];
? ? ? ? var w = scanner.offsetWidth;
? ? ? ? var index = 0;
? ? ? ? _this.timer = setInterval(function() {
? ? ? ? ? if (_this.pageIndex >= 10) {
? ? ? ? ? ? _this.pageIndex = 0;
? ? ? ? ? }
? ? ? ? ? _this.pageIndex++;
? ? ? ? ? var translatex = -_this.pageIndex * w;
? ? ? ? ? ul.style.transition = 'all .3s';
? ? ? ? ? ul.style.transform = 'translateX(' + translatex + 'px)';
? ? ? ? }, 3000);
? ? ? },
雙指縮放，滾動(dòng)：el
el.addEventListener("touchmove", function(e) {
? ? ? ? ? if (e.touches.length < 2) {
? ? ? ? ? ? stopX = e.targetTouches[0].clientX - beginX;
? ? ? ? ? ? whiteBack.style.transition = 'none';
? ? ? ? ? // el.style.transform = 'translateX(' + stopX + 'px)';
? ? ? ? ? var trans = -_this.picIndex*width +stopX;
? ? ? ? ? whiteBack.style.transform = 'translateX(' + trans + 'px)';
? ? ? ? ? }
? ? ? ? ? e.preventDefault();
? ? ? ? ? if (e.touches.length >= 2 && istouch) {
? ? ? ? ? ? var now = e.touches; //得到第二組兩個(gè)點(diǎn)
? ? ? ? ? ? var scale = _this.getDistance(now[0], now[1]) / _this.getDistance(start[0], start[1]); //得到縮放比例，getDistance是勾股定理的一個(gè)方法
? ? ? ? ? ? var rotation = _this.getAngle(now[0], now[1]) - _this.getAngle(start[0], start[1]); //得到旋轉(zhuǎn)角度，getAngle是得到夾角的一個(gè)方法
? ? ? ? ? ? // alert(rotation);
? ? ? ? ? ? let rotate = 'rotate(' + rotation.toFixed(1) + 'deg)';
? ? ? ? ? ? el.style.transform = 'scale(' + scale + ',' + scale + ')';
? ? ? ? ? ? // whiteBack.style.transform ='scale(' + scale + ',' + scale + ')';
? ? ? ? ? ? //el.style.transform = 'scale(' + scale + ',' + scale + ') ' + rotate + ' ';
? ? ? ? ? ? // el.style.transform = 'rotate(' + rotation + 'deg)';
? ? ? ? ? ? //obj.gesturemove && obj.gesturemove.call(el, e); //執(zhí)行g(shù)esturemove方法
? ? ? ? ? };
? ? ? ? }, false);
getDistance(p1, p2) {
? ? ? ? var x = p2.pageX - p1.pageX,
? ? ? ? ? y = p2.pageY - p1.pageY;
? ? ? ? return Math.sqrt((x * x) + (y * y));
? ? ? },//距離方法
? ? ? getAngle(p1, p2) {
? ? ? ? var x = p1.pageX - p2.pageX,
? ? ? ? ? y = p1.pageY - p2.pageY;
? ? ? ? return Math.atan2(y, x) * 180 / Math.PI;
? ? ? }, //夾角方法
