<!DOCTYPE?html>
<html>
????<head>
????????<title>Date?TEST</title>
????????<style>
????????????#div1{
????????????????left:-200px;
????????????????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();
????????????}
????????}
????????var?timer?=?null;
????????function?startMove(){
????????????clearInterval(timer);
????????????var?oDiv?=?document.getElementById('div1');
????????????timer?=?setInterval(function(){
????????????????if(oDiv.offsetLeft?==?0){
????????????????????clearInterval(timer);
????????????????}
????????????????else
????????????????{
????????????????????oDiv.style.left?=?oDiv.offsetLeft?+?1?+?'px';
????????????????}
????????????},?30)?
????????}
????</script>
</html>
2016-10-30
body本身的margin屬性沒有reset
你在CSS里加一句 *{margin:0;padding:0;}
2016-10-30
body本身的margin屬性沒有reset
你在CSS里加一句 *{margin:0;padding:0;}