html元素 局部缩放,局部缩放.html

document

* {

padding: 0;

margin: 0;

}

html,

body {

height: 100%;

width: 100%;

text-align: center;

box-sizing: border-box;

}

.container {

padding: 100px 0;

background-color: red;

}

.wrapper {

margin: 0 auto;

padding-top: 100px;

width: 240px;

height: 200px;

}

.scale {

width: 100%;

transform-origin: 0 0;

-webkit-transform-origin: 0 0;

background-color: #fff;

}

243

243

243

243

243

1	2	3	4
1	1	1	1
2	3	4	5
1	3	23	4
2323	2323	34	3434

var wrapper = document.querySelector('.wrapper');

var element = document.querySelector('.scale');

var vendors;

var distance = {};

var origin;

var scale = 1;

var isCanScale = false;

function handleTouch(e) {

e.preventDefault();

switch (e.type) {

case 'touchstart':

if (e.touches.length > 1) {

distance.start = getDistance({

x: e.touches[0].screenX,

y: e.touches[0].screenY

}, {

x: e.touches[1].screenX,

y: e.touches[1].screenY

});

}

break;

case 'touchmove':

if (e.touches.length === 2) {

origin = getOrigin({

x: event.touches[0].pageX,

y: event.touches[0].pageY

}, {

x: event.touches[1].pageX,

y: event.touches[1].pageY

});

distance.stop = getDistance({

x: e.touches[0].screenX,

y: e.touches[0].screenY

}, {

x: e.touches[1].screenX,

y: e.touches[1].screenY

});

scale = distance.stop / distance.start;

isCanScale = true;

setScaleAnimation(scale, true);

}

break;

case 'touchend':

scale = 1;

setScaleAnimation(scale);

break;

case 'touchcancel':

scale = 1;

setScaleAnimation(scale);

break;

default: ;

}

}

function vendor() {

var TRANSITION = 'transition';

var TRANSITION_END = 'transitionend';

var TRANSFORM = 'transform';

var TRANSFORM_PROPERTY = 'transform';

var TRANSITION_PROPERTY = 'transition';

if (typeof document.body.style.webkitTransform !== undefined) {

TRANSFORM = 'webkitTransform';

TRANSITION = 'webkitTransition';

TRANSITION_END = 'webkitTransitionEnd';

TRANSFORM_PROPERTY = '-webkit-transform';

TRANSITION_PROPERTY = '-webkit-transition';

}

return {

TRANSFORM: TRANSFORM,

TRANSITION: TRANSITION,

TRANSITION_END: TRANSITION_END,

TRANSFORM_PROPERTY: TRANSFORM_PROPERTY,

TRANSITION_PROPERTY: TRANSITION_PROPERTY

};

}

function getOrigin(first, second) {

return {

x: (first.x + second.x) / 2,

y: (first.y + second.y) / 2

};

}

function getDistance(start, stop) {

return Math.sqrt(Math.pow((stop.x - start.x), 2) + Math.pow((stop.y - start.y), 2));

}

function setScaleAnimation(scale, animation) {

var transition_animation = '';

var x, y;

if (!isCanScale) {

return;

}

isCanScale = false;

if (animation) {

transition_animation = 'none';

} else {

transition_animation = vendors.TRANSFORM_PROPERTY + ' 0.3s ease-out';

}

element.style[vendors.TRANSITION] = transition_animation;

x = origin.x + (-origin.x) * scale;

y = origin.y + (-origin.y) * scale;

element.style[vendors.TRANSFORM] = 'matrix(' + scale + ', 0, 0, ' + scale + ', -' + x + ', -' + y + ')';

}

vendors = vendor();

wrapper.addEventListener('touchstart', handleTouch);

wrapper.addEventListener('touchmove', handleTouch);

wrapper.addEventListener('touchend', handleTouch);

wrapper.addEventListener('touchcancel', handleTouch);

一键复制

编辑

Web IDE

原始数据

按行查看

历史