Gesture operations can be implemented: drag, zoom, and rotate. The encapsulated script method is as follows:
var cat = || {}; = { left: 0, top: 0, scaleVal: 1, //Zoom rotateVal: 0, //Rotation curStatus: 0, //Record the status of the current gesture, 0:Drag, 1:Scaling, 2:Rotation //initialization init: function ($targetObj, callback) { ($targetObj, 'touchstart', function (ev) { = 0; ();//Block default events }); if (!.cat_touchjs_data) callback(0, 0, 1, 0); else { var jsonObj = (.cat_touchjs_data); = parseFloat(), = parseFloat(), = parseFloat(), = parseFloat(); callback(, , , ); } }, //drag drag: function ($targetObj, callback) { ($targetObj, 'drag', function (ev) { $("left", + ).css("top", + ); }); ($targetObj, 'dragend', function (ev) { = + ; = + ; callback(, ); }); }, //Zoom scale: function ($targetObj, callback) { var initialScale = || 1; var currentScale; ($targetObj, 'pinch', function (ev) { if ( == 2) { return; } = 1; currentScale = - 1; currentScale = initialScale + currentScale; = currentScale; var transformStyle = 'scale(' + + ') rotate(' + + 'deg)'; $("transform", transformStyle).css("-webkit-transform", transformStyle); callback(); }); ($targetObj, 'pinchend', function (ev) { if ( == 2) { return; } initialScale = currentScale; = currentScale; callback(); }); }, //Rotation rotate: function ($targetObj, callback) { var angle = || 0; ($targetObj, 'rotate', function (ev) { if ( == 1) { return; } = 2; var totalAngle = angle + ; if ( === 'end') { angle = angle + ; } = totalAngle; var transformStyle = 'scale(' + + ') rotate(' + + 'deg)'; $("transform", transformStyle).css("-webkit-transform", transformStyle); $('data-rotate', ); callback(); }); } };
html code:
<div style="position:relative;width: 100%;height: 250px;overflow: hidden;border: 1px dashed #ff0000;"> <img style="position:relative;transform-origin:center" src="/images/" /> </div>
js call:
var $targetObj = $('#targetObj'); //Initialize settings($targetObj, function (left, top, scale, rotate) {}; //Initialize the drag gesture (comment it out if you don't need it)($targetObj, function (left, top) { }); //Initialize the zoom gesture (comment out if you don't need it)($targetObj, function (scale) { }); //Initialize the rotation gesture (comment out if you don't need it)($targetObj, function (rotate) { });
The above is the drag, zoom, and rotation (mouse gesture) function code introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!