0

このJSFIDDLE LINKを見てください 。マウスダウンで背景位置をアニメーション化する方法を教えてください mousemove マウスの移動方向（左または右）に向かって

ご覧のとおり、ユーザーが画像をクリックして左または右にアニメーション化できるようにする機能を追加したいと思います。

私は持っている

$(document).ready(function () {
 var cp=parseFloat($('.cycle').css('background-position'));
 $('.cycle').stop().animate({'background-position': cp+2000}, 20000); 
 $('.cycle').mouseover(function() {
                                     $('.cycle').stop(); 
     }); 
});
4

2 に答える 2

0

だからここに私がそれをする方法があります...

HTML

<div class="cycle">
    <div class="left"></div>
    <div class="right"></div>
</div>

追加の CSS

.cycle div
{
    height: 100%;
    width: 50%;
    float: left;
    opacity: 0.5;
}

    .cycle div.left
    {
        background-color: red;
    }
    .cycle div.right
    {
        background-color: blue;
    }

ここでの考え方は<div>、親の幅の正確に 50% を占める 2 つの子要素があるということです。これは、それぞれの子 div に異なるイベントを割り当てて、どちらがmouseover

改訂されたJQuery

 $(document).ready(function () {
     loopDeLoop();

     $('.cycle .left').mouseover(function () {
         loopDeLoop("left");
     });

     $('.cycle .right').mouseover(function () {
         loopDeLoop("right");
     });
 });

 function loopDeLoop(direction) {
     var cp = parseFloat($('.cycle').css('background-position'));

     var move = 2000;

     if (direction == "left") {
         move = -2000;
     }

     $('.cycle').stop().animate({
         'background-position': cp + move
     }, 20000);
 }

JSfiddle: http://jsfiddle.net/gvee/n558U/3/

于 2013-08-06T22:16:08.610 に答える