How to use jQuery to achieve a rotating animation effect of an image

In web page production, using animation effects can enhance the vividness and attractiveness of the page. One of the effects is to realize the continuous rotation of a picture, which can add more visual impact and artistic sense to the page. In this article, we will introduce how to use jQuery to implement a simple image rotation animation effect.

1. Preparation

First, we need to prepare a picture and then save it locally. Here, we will use a dynamic image called "spinner.gif". You can download a similar image from the Internet to replace it.

2. Introduce the jQuery library

Before implementing the animation effect, you need to introduce the jQuery library first. This code should be placed in the head tag.

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

3. Achieve the effect of continuous rotation of the image

Add a div element in the HTML file, and then set the width and height of the element, as well as the background image in the CSS file . You also need to set the transform attribute of the element to rotate it. The code is as follows:

<div class="spinner"></div>

<style type="text/css">
    .spinner {
        width: 100px;
        height: 100px;
        background: url('spinner.gif') no-repeat center center;
        transform: rotate(0deg);
    }
</style>

Then, add the following code in jQuery to achieve the effect of continuous rotation of the image:

<script type="text/javascript">
    $(function(){
        var spinner = $('.spinner'); // 获取到 div 元素
        var deg = 0; // 设定图片的初始旋转度数为0
        setInterval(function(){
            deg += 1; // 旋转的度数每次增加1度
            spinner.css({'transform': 'rotate('+deg+'deg)'}); // 设置图片旋转的度数
        }, 10);
    });
</script>

In the code, jQuery's setInterval() function is used to Implement scheduled operations. In setInterval, the initial value of the deg variable is set to 0 degrees, and the deg value is increased by 1 degree every 10 milliseconds. At the same time, by changing the CSS transform property, the image in the div element is rotated. Eventually, the page will look like a constantly rotating image.

4. Summary

In this article, we learned how to use jQuery to achieve a simple image rotation effect. By setting the degree of image rotation to automatically increase every certain time, the effect of real-time image rotation is achieved. This animation effect can increase the vividness and attractiveness of the page. It is a commonly used method in web page production. I hope this article will be helpful to everyone.

The above is the detailed content of How to use jQuery to achieve a rotating animation effect of an image. For more information, please follow other related articles on the PHP Chinese website!