一、准备工作
在开始之前,请确保你已经:
-
<img src="path/to/your/image.jpg" alt="Descriptive text" id="animatedImage">
引入了jQuery库。可以通过CDN链接快速引入:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
二、基本概念
在jQuery中,我们可以通过以下几种方式设置CSS:
.css()
方法:直接修改元素的CSS属性。.addClass()
方法:为元素添加一个或多个类,从而改变其CSS样式。.removeClass()
方法:移除元素的一个或多个类。
三、实现图片动效
1. 图片淡入淡出
$(document).ready(function() {
$("#animatedImage").mouseover(function() {
$(this).fadeIn(1000);
}).mouseout(function() {
$(this).fadeOut(1000);
});
});
2. 图片上下移动
$(document).ready(function() {
var distance = 50; // 图片移动的距离
var interval = setInterval(function() {
var position = $("#animatedImage").css("top");
position = parseInt(position, 10) + (Math.random() * distance) - (distance / 2);
$("#animatedImage").css("top", position + "px");
}, 1000);
});
3. 图片旋转
$(document).ready(function() {
var angle = 0; // 初始旋转角度
var interval = setInterval(function() {
angle += 5; // 每次增加5度
$("#animatedImage").css("transform", "rotate(" + angle + "deg)");
}, 100);
});
4. 图片缩放
$(document).ready(function() {
var scale = 1; // 初始缩放比例
var interval = setInterval(function() {
scale += 0.1; // 每次增加0.1倍
$("#animatedImage").css("transform", "scale(" + scale + ")");
}, 1000);
});