元素运动效果实现-优快云博客

本文介绍了如何使用HTML和JavaScript实现元素的位置和透明度变化效果。当鼠标移入元素时，元素会平滑移动到指定位置并改变透明度，反之则回到初始状态。这种效果常用于网页互动设计中。

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

div速度运动：

代码如下：

<!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>
<style>
body{paddiing:0;margin:0}
#div1{width:200px; height:200px;background-color:red; position:relative;left:-200px; top:0;}
#div1 span{width:20px;height:50px; background-color:blue;position:absolute; left:200px; top:75px}
</style>
<script>

window.onload = function(){
	var oDiv = document.getElementById('div1');
	oDiv.onmouseout = function(){
		startMove(-200);
	}
	oDiv.onmouseover = function(){
		startMove(0);
	}
}
var timer = null;
function startMove(seat){
	clearInterval(timer);
	var oDiv = document.getElementById('div1');
	timer = setInterval(function(){
		if(oDiv.offsetLeft > seat){
			speed = -10;
		}
		else{
			speed = 10;
		}
		if(oDiv.offsetLeft == seat){
			clearInterval(timer)
		}
		else{
			oDiv.style.left = oDiv.offsetLeft + speed +'px';
		}
	},30)
		
}
</script>
</head>

<body>
<div id="div1"><span id="share">分享</span></div>
</body>
</html>

透明度运动：

代码如下：

<!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>
<style>
body{
	padding:0;
	margin:0
}
#div1{
	width:200px;
	height:200px;
	background:red;
	filter:alpha(opacity:30);
	opacity:0.3;
}
</style>
<script>


window.onload = function(){
	var oDiv = document.getElementById('div1');
	oDiv.onmouseover = function(){
		startMove(100);
	}
	oDiv.onmouseout = function(){
		startMove(30);
	}
}
var timer = null;
var alpha = 30;
function startMove(seat){
	clearInterval(timer);
	var oDiv = document.getElementById('div1');
	timer = setInterval(function(){
		if(alpha > seat){
			speed = -10;
		}
		else{
			speed = 10;
		}
		if(alpha == seat){
			clearInterval(timer);
		}
		else{
			alpha += speed;
			oDiv.style.filter = 'alpha(opacity:'+alpha+')';
			oDiv.style.opacity = alpha/100;
		}
	},30)
}

</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>