如何让一张图片沿着U行走？JS怎么实现？

[wonota]

求助

如何让一张图片沿着U行走？JS怎么实现？

[cocotsau]

用链式运动，把U分解成4部分 1：竖直向下 改变top值 2：曲线向下 同时改变top和left值 3：曲线向上 同时改变top和left值 4：竖直向上 改变top值

[天际的海浪]

用三角函数

<img src="xxxxx.png" id="pic" />
<script type="text/javascript">
function um(i) {
	var x = -Math.cos(i*Math.PI/180)*150+200;
	var y = Math.sin(i*Math.PI/180)*400+20;
	var pic = document.getElementById("pic");
	pic.style.left = x+"px";
	pic.style.top = y+"px";
	if (i<180)
		setTimeout(function(){
			um(i+1);
		}, 20);
}
um(0);
</script>

[wonota]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

<img src="3.png" id="pic" />
<script type="text/javascript">
function um(i) {
	var x = -Math.cos(i*Math.PI/180)*150+200;
	var y = Math.sin(i*Math.PI/180)*400+20;
	var pic = document.getElementById("pic");
	pic.style.left = x+"px";
	pic.style.top = y+"px";
	if (i<180)
		setTimeout(function(){
			um(i+1);
		}, 20);
}
um(0);
</script>

</body>
</html>

[wonota]

没有效果

[天际的海浪]

引用 4 楼 wonota 的回复:

没有效果

设置绝对定位 <style type="text/css"> #pic { position: absolute; } </style>

[xuzuning]

<img src="https://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/monkey/8.gif" id="pic"   style="top:0;left:0;position: absolute;" />
<script type="text/javascript">
function um(i) {
    var x = -Math.cos(i*Math.PI/180)*50+200;
    var y = Math.sin(i*Math.PI/180)*200+20;
    var pic = document.getElementById("pic");
    pic.style.left = x+"px";
    pic.style.top = y+"px";
    if (i<180)
        setTimeout(function(){
            um(i+1);
        }, 20);
}
um(0);
</script>

关键在于要绝对定位，以使图片离开文档流