How to implement image rotation with jquery

In front-end development, displaying and browsing images is a common requirement. Sometimes we need to rotate pictures to achieve better display effects. In this case, we can use the jQuery library to easily implement image rotation. The following will introduce in detail how to use jQuery to view image rotation.

1. Preparation

First, we need to introduce the jQuery library into HTML and the plug-in "jquery.transform.js" for image rotation. You can download it from the jQuery official website and introduce the two scripts into HTML:

<script></script>
<script></script>

At the same time, you need to set up a container containing images in HTML to display images:

<div>
  <img  src="/static/imghwm/default1.png" data-src="example.jpg" class="lazy" alt="How to implement image rotation with jquery" >
</div>

2. Rotate the image

After the preparation work is completed, you can use jQuery to rotate the image. Through the following code, we can rotate the image 90 degrees:

$("#img-container img").rotate(90);

Among them, $("#img-container img") Select the image element to operate, .rotate(90) Rotate the image 90 degrees clockwise. Similarly, we can also use .rotate(-90) to rotate the image 90 degrees counterclockwise, and the rotation operation can be superimposed all the time.

3. Set the rotation center

By default, the rotation center of the picture is located in the upper left corner of the picture. If you need to set the rotation center to the center point of the image, you can do so by setting the CSS style:

#img-container img {
  transform-origin: center center;
}

In this way, the center point of the image will become the center point of the entire image when rotated.

4. Binding events

Normally, we trigger the image rotation operation by binding events. For example, you can rotate an image by clicking a button. Here is a simple example:

旋转图片
<div>
  <img  src="/static/imghwm/default1.png" data-src="example.jpg" class="lazy" alt="How to implement image rotation with jquery" >
</div>

<script>
  $("#rotate").click(function() {
    $(&quot;#img-container img&quot;).rotate(90);
  });
</script>

After clicking the "Rotate Picture" button, the program will rotate the picture 90 degrees clockwise.

Summary

The above is a simple code example for using jQuery to view image rotation. By using jQuery's rotate() method, we can easily implement the image rotation function, and can add multiple rotation operations to achieve better results. I hope this article can be helpful to developers who need to implement image rotation function.

The above is the detailed content of How to implement image rotation with jquery. For more information, please follow other related articles on the PHP Chinese website!