為什么同樣設置的速度是10px，移進移出的速度為什么不一樣？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? ? <title>速度動畫?。?！測試</title>
? ? <style>
? ? ? ? #div1 {
? ? ? ? ? ?
? ? ? ? ? ? background-color: red;
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? left: -200px;
? ? ? ? ? ? top: 0;
? ? ? ? }
? ? ? ? ? ? #div1 span {
? ? ? ? ? ? ? ? width: 20px;
? ? ? ? ? ? ? ? height: 50px;
? ? ? ? ? ? ? ? background: blue;
? ? ? ? ? ? ? ? position: absolute;
? ? ? ? ? ? ? ? left: 200px;
? ? ? ? ? ? ? ? top: 75px;
? ? ? ? ? ? }
? ? </style>
? ? <script>
? ? ? ? window.onload = function () {
? ? ? ? ? ? var oDiv = document.getElementById('div1');
? ? ? ? ? ? oDiv.onmouseover = function () {
? ? ? ? ? ? ? ? startMove();
? ? ? ? ? ? }
? ? ? ? ? ? oDiv.onmouseout = function () {
? ? ? ? ? ? ? ? startMove1();
? ? ? ? ? ? }
?}
? ? ? ? ? ? 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+10+'px';
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }, 30)
? ? ? ? ? ? }
? ? ? ? ? ? function startMove1() {
? ? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? ? ? var oDiv = document.getElementById('div1');
? ? ? ? ? ? ? ? timer = setInterval(function () {
? ? ? ? ? ? ? ? ? ? if (oDiv.offsetLeft< -100) {
? ? ? ? ? ? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? else {
? ? ? ? ? ? ? ? ? ? ? ? oDiv.style.left = oDiv.offsetLeft -10+ 'px';
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }, 30);
? ? ? ? ? ? }
? ? </script>
</head>
<body>
? ? <div id="div1">
? ? ? ? <span id="share">分享！</span>
? ? </div>
</body>
</html>
2016-08-05
在最前面清空一下樣式。
*｛
margin:0;
padding:0;
｝