网页元素动态移动效果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_21773607/article/details/47045241

本文介绍了一种使用JavaScript实现的网页元素动态移动效果。通过监听鼠标悬停事件，使特定的网页元素按照预设路径进行平滑移动。文章包含完整的HTML、CSS及JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>movement</title>
<style type="text/css">
#imgShow{
width: 100px;
height: 100px;
overflow:hidden;
position:relative;
}
#preview{
position: absolute;
width:100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<h1>Web Design</h1>
<p>链接图片展览</p>
<ol id="linklist">
<li><a href="">aa</a></li>
<li><a href="">bb</a></li>
<li><a href="">cc</a></li>
<div id="preview"></div>
</ol>

<script type="text/javascript">
window.onload=function(){
function moveElement(targetId,final_x,final_y,time){
if(!document.getElementById) return false;
if(!document.getElementById(targetId)) return false;
var iTarget=document.getElmentById('targetId');
if(iTarget.movement){
clearTimeout(iTarget.movement);
}
if(!iTarget.style.left){
iTarget.style.left='0px';
}
if(!iTarget.style.top){
iTarget.style.top='0px';
}
var x=parseInt(iTarget.style.left);
var y=parseInt(iTarget.style.top);
var speed=0;
if(x === final_x && y === final_y){
return true;
}
if(x < final_x){
speed=Math.ceil((final_x - x)/10);
x+=speed;
}
if(x > final_x){
speed=Math.ceil((x - final_x)/10);
x-=speed;
}
if(y < final_y){
speed=Math.ceil((final_y - y)/10);
y+=speed;
}
if(y > final_y){
speed=Math.ceil((y - final_y)/10);
y-=speed;
}
iTarget.style.left=x+'px';
iTarget.style.top=y+'px';
iTarget.movement=setTimeout(function(){
moveElement(targetId,final_x,final_y,time);
},time);
}

var list=document.getElmentById('linklist');
var links=list.getElmentsByTagName('a');
links[0].onmouseover = function(){
moveElement('preview',-100,10,1000);
}
}
/*function imgShow(){
if(!document.getElementById) return false;
if(!document.getElementById(targetId)) return false;
if(!document.getElmentById('linklist')) return false;
var imgShow=document.createElement('div');
imgShow.setAttribute('id','imgShow');
var pre=document.createElement('img');
pre.setAttribute('src','../images/pre.jpg');
imgShow.appendChild(pre);
var lists=document.getElmentById('linklist');
insertAfter(imgShow,lists);
}*/

</script>
</body>
</html>

js简单运动