首页请用jQuery库的知识点写一段图片点击旋转的代码

请用jQuery库的知识点写一段图片点击旋转的代码

时间: 2024-12-22 21:23:31 浏览: 13

在jQuery中，我们可以利用`$(document).on()`事件绑定功能以及CSS3的`transform`属性来实现图片点击后旋转的效果。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <title>Image Rotate</title> <style> .rotating-image { transition: transform 0.5s ease; } .rotating-image:hover { transform: rotate(180deg); } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <img id="rotateImage" class="rotating-image" src="your_image_url.jpg" alt="Your Image"> <script> $(document).ready(function() { $('#rotateImage').click(function() { $(this).toggleClass('rotating-image'); // 当点击时切换旋转类，触发旋转动画 }); }); </script> </body> </html> ``` 在这个示例中，我们首先给图片添加了一个名为`rotating-image`的样式类，设置了鼠标悬停时的`transform: rotate(180deg)`以实现旋转。然后通过`$(document).ready()`确保DOM加载完成后再绑定点击事件。当图片被点击时，`toggleClass('rotating-image')`会在图片已经旋转的情况下将其恢复原状，反之则旋转180度。

阅读全文