html怎么让图片上下移动-猿码集

HTML怎么让图片上下移动

介绍

在网页设计中，图片是无法缺少的一个元素，但是如果网页设计中图片都处于静态状态，会显得比较单调和乏味。因此，将图片滚动起来是一种很好的做法。本文将介绍如何在HTML中让图片上下移动。

使用CSS的animation属性

CSS的animation属性可以用来实现许多动画效果，包括让图片上下移动。下面是一个简单的例子：


<!DOCTYPE html>
<html>
<head>
<style>
.img {
  position: relative; /*相对定位*/
  animation: up-down 2s ease-in-out infinite alternate; /*调用动画效果*/
}
@keyframes up-down { /*定义动画效果*/
  0% {
    top: 10px;
  }
  100% {
    top: 50px;
  }
}
</style>
</head>
<body>
<div class="img">
  <img src="image.jpg">
</div>
</body>
</html>

上述代码中，div标签具有相对定位，img标签则不需要设置定位属性。CSS的animation属性指定了动画的名称（up-down），执行时间（2s），动画的运动方式（ease-in-out），动画的次数（infinite），以及交替执行（alternate）。

@keyframes规则用来定义动画的效果。0%表示动画开始时的状态，100%表示动画结束时的状态。因此，上面的代码将使图像从10px的位置上升到50px的位置。由于设置了infinite，因此动画将不断进行。

使用jQuery实现动画

除了使用CSS的animation属性实现动画外，还可以使用jQuery库来实现图像的动态效果。下面是一个jQuery代码的例子：


<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
     animateDiv();
});
function makeNewPosition(){
    
    // 为水平和垂直混动随机设定位置
    var h = $(window).height() - 50;
    var w = $(window).width() - 50;
    
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    
    return [nh,nw];    
}
function animateDiv(){
    var newq = makeNewPosition();
    var img = $('.img');
    var oldq = img.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);
    
    img.animate({ top: newq[0], left: newq[1] }, speed, function(){
      animateDiv();        
    });
    
};
function calcSpeed(prev, next) {
    
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);
    
    var greatest = x > y ? x : y;
    
    var speedModifier = 0.03;
    var speed = Math.ceil(greatest/speedModifier);
    return speed;
} 
</script>
</head>
<body>
<div class="img">
  <img src="image.jpg">
</div>
</body>
</html>

上述代码中，jQuery的animate()函数设置了要运行的动画，动态地改变了图像的位置。makeNewPosition()函数用于为图像随机设定位置。calcSpeed()函数用于计算动画速度。

需要注意的是，在这个例子中，动画仅仅是垂直移动，如果想让图像水平移动，可以改变$w和$x$的值。

总结

本文介绍了如何在html中让图片上下移动。具体实现可以通过在CSS上使用animation属性或是使用jQuery库的animate()函数来实现。若需要实现更加复杂的移动效果，可以根据需求自行调整代码。

html怎么让图片上下移动