                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /JS動(dòng)畫效果

為什么同樣設(shè)置的速度是10px，移進(jìn)移出的速度為什么不一樣？

<!DOCTYPE html>

<head>

? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

? ? <title>速度動(dòng)畫?。?！測(cè)試</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>

weibo_張張張張張大仙呀_03578611

2016-08-05

源自：JS動(dòng)畫效果 2-1

關(guān)注問(wèn)題我要回答

514

操作

收起

1 回答

異擇Y
2016-08-05

在最前面清空一下樣式。

*｛

margin:0;

padding:0;

｝

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

善良阿呆

我也是這個(gè)問(wèn)題，為什么清空樣式就好了呢？

2016-08-08 回復(fù) 有任何疑惑可以回復(fù)我~

#2

異擇Y

以360瀏覽器為例，對(duì)本次運(yùn)動(dòng)有影響的是默認(rèn)的margin。首先，margin加載在body上（當(dāng)清除margin時(shí)div會(huì)向左和向上移動(dòng)可知），為8px。其次，offsetLeft的值是div左邊界至瀏覽器左邊界的值。style.left是div左邊界至body左邊界的值。兩個(gè)值的差值為margin：8px，也就是說(shuō)在數(shù)值上offsetLeft=style.left+8。因此，在onmouseover事件中，style.left=style.left+18 在onmouseout事件中，style.left=style.left-2。

2016-08-09 回復(fù) 有任何疑惑可以回復(fù)我~