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>
版权声明：本文为博主原创文章，未经博主允许不得转载。
时间： 2024-10-13 05:52:55