<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style>
#div1 {width:100px; height:200px; background:green;
position:absolute; left:-100px;
}
#div1 span {position:absolute; width:20px; height:60px;
line-height:20px; background:yellow; right:-20px;
top:70px;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
oDiv.οnmοuseοver=function()
{
startMove(0);
};
oDiv.onmouseout = function () {
startMove(-100);
};
};
var timer=null;
function startMove(iTarget)
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer = setInterval(function () {
var speed = 0;
if(oDiv.offsetLeft>iTarget)
{
speed=-10;
}
else
{
speed=10;
}
if (oDiv.offsetLeft == iTarget) {
clearInterval(timer);
}
else
{
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
},30)
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
</html>
[学习笔记]JavaScript基础--分享到
最新推荐文章于 2024-04-28 17:32:11 发布