<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js动画</title>
</head>
<body>
<style type="text/css">
*{margin: 0;padding: 0;}
#div1{width: 200px;height: 200px;background-color: red;position: relative;top:0;left: -200px;}
#share{position: absolute;top: 70px;left: 200px;background-color: blue;color: #fff;cursor: pointer;}
</style>
<script type="text/javascript">
window.onload = function(){
var div = document.getElementById("div1");
var share = document.getElementById("share");
share.onmouseover = function(){
startmove();
}
share.onmouseout = function(){
startmove1();
}
}
var timer = null;
function startmove(){
clearInterval(timer);
var div = document.getElementById("div1");
var timer = setInterval(function(){
if(div.offsetLeft >= 0){
clearInterval(timer);
}
else{
div.style.left= div.offsetLeft+10+"px";
}
},50)
}
function startmove1(){
clearInterval(timer);
var div = document.getElementById("div1");
var timer = setInterval(function(){
if(div.offsetLeft >= -200){
clearInterval(timer);
}
else{
div.style.left= div.offsetLeft-10+"px";
}
},50)
}
</script>
<div id="div1"><span id="share">发射</span></div>
</body>
</html>
添加回答
举报
0/150
提交
取消