一、准备工作

在开始之前,请确保你已经:

    引入了jQuery库。可以通过CDN链接快速引入:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
  1. <img src="path/to/your/image.jpg" alt="Descriptive text" id="animatedImage">
    

二、基本概念

在jQuery中,我们可以通过以下几种方式设置CSS:

  1. .css() 方法:直接修改元素的CSS属性。
  2. .addClass() 方法:为元素添加一个或多个类,从而改变其CSS样式。
  3. .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);
});

四、总结