0

divボックスをaからbに移動してから、元に戻すのに問題があります。また、マウスがdivボックスから出たときに、posを開始するために戻る必要があります。これは、iveがこれまでに思いついたものです。

<div id="tank" style=" width:344px; height:300px;
 background-image:url('images/warning2.png');
 box-shadow:0px 0px 100px;
 ;border-radius:20px; position:relative; left:-180px; top:10px;">
 </div>


 <script type="text/javascript">

 document.getElementById('tank').onmouseover = function() {
 var elem = this, 
 pos = -180,

 timer = setInterval(function() {
 pos--;
 elem.style.left = pos+"px";
 if( pos == 500) clearInterval(timer) ;
 document.getElementById('plane').onmouseover = null;
 },1);
 };
4

2 に答える 2

0

あなたのポジションは -180 から始まり、最終的なポジションは +500 です。ただし、位置変数の値を減らしているため、500 に達することはありません。

マウスアウトに戻るには、次のようにする必要があります。

var timer = null;
var tank = document.getElementById('tank');

function animate(elem, target)
{
    var pos = parseInt(elem.style.left.replace(/[^0-9\-]/g, ""));

    clearInterval(timer);
    timer = setInterval(function()
    {
        elem.style.left = (pos += pos < target ? 1 : -1) + "px";
        if(pos == target) clearInterval(timer) ;
    }, 1);
}

tank.addEventListener("mouseover", function()
{
    animate(this, 500);
}, false);

tank.addEventListener("mouseout", function()
{
    animate(this, -180);
}, false);

</p>

于 2012-09-07T23:24:56.607 に答える
0

を使用できる場合はjQuery、次のようなことができます。

$("#tank").hover(
  function () {
    $(this).animate({
        left: '-=180'
    });
  }, 
  function () {
    $(this).animate({
        left: '+=180'
    });
  }
);​

http://jsfiddle.net/charlescarver/QgF2h/

于 2012-09-07T23:03:53.730 に答える