需求:
1.图片随着手指滚动
2.双指缩放
3.自动播放
实现:移动端中js有touch事件,touchstart、touchmove、touched,
随手指滚动:touchstart 记录手指起始位置,touchmove计算手指移动位置,并把移动位置赋值给视图的transform translateX
双指缩放:touchstart中得到触摸的两个点,touchmove中计算两个点距离,并把距离值赋给视图的transform scale
自动播放:设置定时器,在每几秒执行的方法中改变视图的transform translateX
自动播放方法:
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);
},
双指缩放,滚动: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; //得到第二组两个点
var scale = _this.getDistance(now[0], now[1]) / _this.getDistance(start[0], start[1]); //得到缩放比例,getDistance是勾股定理的一个方法
var rotation = _this.getAngle(now[0], now[1]) - _this.getAngle(start[0], start[1]); //得到旋转角度,getAngle是得到夹角的一个方法
// 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); //执行gesturemove方法
};
}, 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;
}, //夹角方法