如何使用 JavaScript 实现图片的曲线运动?

发布网友发布时间：2022-09-24 18:10

共3个回答

热心网友时间：2023-09-14 02:44

思路：使用javascript定时器函数setTimeout()每隔一定的毫秒间隔数执行动作，在执行的动作中循环替换图片的src属性。树立演示如下：
1、HTML结构
<img src="1.png" id="test">

2、javascript代码
function change(n){
if(n>5) n=1; // 一共5张图片，所以循环替换
document.getElementById("test").setAttribute("src", n+".png");
n++;
setTimeout("change("+n+")",1000);
}
window.onload = function(){
setTimeout("change(1)", 1000);
}

热心网友时间：2023-09-14 02:44

先说图片运动的原理.我们看到的一幅图片实际上是通过CSS来对它进行定位的,所以说如果改变了它的CSS中的top,bottom,left,right属性它就会在网页上改变位置.那么如果把图片从一个位置到另外一个位置所经过的距离分成很多份,每次只是迅速地改变一点位置,那么这个图片看起来就像是运动了一样.所以说想要用JS来让图片进行曲线运动不过就是获取到这个图片然后通过JS对它控制位置的CSS进行连续的修改,至于这个连续修改也就是你想要的曲线运动了.至于怎样运动完全看你自己了,比如从屏幕左边先向右上然后再向右下,你要做的操作就是把left也就是距离屏幕左边的值不断加大的同时再控制距离上下的位置,然后把这个路径分成很多的像素并通过JS循环对图片的CSS进行修改就好了

热心网友时间：2023-09-14 02:45

关键不在于怎么让图片动，关键在于你想怎么定义这个曲线...

热心网友时间：2023-09-14 02:44

热心网友时间：2023-09-14 02:45

关键不在于怎么让图片动，关键在于你想怎么定义这个曲线...