<!DOCTYPE?html>
<html>
????<head>
????????<title>Date?TEST</title>
????????<style>
????????????#div1{
????????????????left:?300px;
????????????????width:?200px;
????????????????height:?100px;
????????????????position:?relative;
????????????????background-color:?red;
????????????}
????????????#div1?span{
????????????????width:?20px;
????????????????height:?50px;
????????????????background:?blue;
????????????????position:?absolute;
????????????????left:?200px;
????????????????top:?75px;
????????????}
????????</style>
????</head>
????<body>
????????<div?id="div1">This?is?a?div?for?testing?animation</br>
????????????<span>TESTING</span>
????????</div>
????</body>
????<script>
????????window.onload?=?function(){
????????????var?oDiv?=?document.getElementById('div1');
????????????oDiv.onmouseover?=?function(){
????????????????startMove(-10,?100);
????????????}
????????}
????????var?timer?=?null;
????????function?startMove(speed,?Target){
????????????clearInterval(timer);
????????????var?oDiv?=?document.getElementById('div1');
????????????timer?=?setInterval(function(){
????????????????if(oDiv.offsetLeft?===?Target){
????????????????????clearInterval(timer);
????????????????}
????????????????else
????????????????{
????????????????????oDiv.style.left?=?oDiv.offsetLeft?+?speed?+?'px';
????????????????}
????????????},?30)?
????????}
????</script>
</html>
2016-10-30
負值是向左運動，向左不就是移出么