How to rotate, zoom in, zoom out, and drag images inside a div

Yao Yao, Chi Ke Nao, I am tired of coding alone, and I am tired of writing those bugs in piles. The autumn is crisp and the air is dry. You must drink more water. I will go back after this week. While there are still a few days, you can come and chat with me as much as you want~~~

## A new day New Year, I haven’t blogged for a long time. Now that the National Day is coming, I heard that after the National Day, I have to wait for the Chinese New Year, but I feel like I have just passed the New Year, and I feel sad. I will post a post to express my gratitude to Xiao Baiju. For comfort...

In such a scenario during development, a certain function of the web application will receive pictures uploaded from various households, and there is a picture viewing function in the background. In the actual production process As a result, the pictures uploaded by users are inverted or the pictures are blurred because they were taken from a long distance.

1. Solution to picture angle problem

The general principle is very simple , switch the class of HTML element object (picture). The following CSS code:

.rot1 {
    transform:rotate(90deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.rot2 {
    transform:rotate(180deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.rot3 {
    transform:rotate(270deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Then add a simple JavaScript code - just change the name of the class dynamically according to whether it turns left or right. . Again, the IE8 browser uses -ms-filter and direct filter has no effect.
The CSS3+filter method is used here, so the following formula has no effect on lower versions of Firefox and the current version of Opera browser. But it is definitely applicable to more than 90% of Internet users.

2. Zoom in and out of the picture

means adjusting the width and height of the picture. The following core code

  //放大缩小图片 function imgToSize(size) {
    var img = $("#rotImg");
    var oWidth = img.width();
    //取得图片的实际宽度 var oHeight = img.height();
    //取得图片的实际高度 img.width(oWidth + size);
    img.height(oHeight + size / oWidth * oHeight);
}

3. Drag the image within the area

When the image is enlarged beyond the parent container, it supports dragging the image within the container. Bind mousemove under mousedown conditions to calculate the drag area size. The core code is as follows:

 $(document).bind('mousemove.imgview', function (event) {
    if ($img.data('mousedown')) {
    var dx = event.pageX - settings['pageX'];
    var dy = event.pageY - settings['pageY'];
    if ((dx == 0) && (dy == 0)) {
    return false;
}
var newX = parseInt($img.css('left')) + dx;
    if (newX > 0) newX = 0;
    if (newX < settings[&#39;width&#39;] - $img.width()) newX = settings[&#39;width&#39;] - $img.width() + 1;
    var newY = parseInt($img.css(&#39;top&#39;)) + dy;
    if (newY > 0) newY = 0;
    if (newY < settings[&#39;height&#39;] - $img.height()) newY = settings[&#39;height&#39;] - $img.height() + 1;
    if (settings[&#39;width&#39;] >= $img.width()) {
    newX = settings[&#39;width&#39;] / 2 - $img.width() / 2;
}
if (settings[&#39;height&#39;] >= $img.height()) {
    newY = settings[&#39;height&#39;] / 2 - $img.height() / 2;
}
$img.css(&#39;left&#39;, newX + &#39;px&#39;);
    $img.css(&#39;top&#39;, newY + &#39;px&#39;);
    settings[&#39;pageX&#39;] = event.pageX;
    settings[&#39;pageY&#39;] = event.pageY;
    $img.data(&#39;cannot_minimize&#39;, true);
}
return false;
}
);

4. The comprehensive function implementation code is as follows. To run, please download demo

5. The final effect is as shown below:

The above is the detailed content of How to rotate, zoom in, zoom out, and drag images inside a div. For more information, please follow other related articles on the PHP Chinese website!