jquery - mousedown mousemove 动画背景位置 Towrad 鼠标移动方向（左/右）

Question

你能看看这个JSFIDDLE LINK 让我知道如何在 mousedown mousemove 上设置背景位置动画 鼠标移动方向（左或右）

如您所见，我想添加一个功能，使用户能够单击并向左或向右移动图像。

我有

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

Answer 1

所以这就是我的做法......

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;
    }

这里的想法是我们有 2 个子<div>元素，它们恰好占据了父元素宽度的 50%。这意味着我们可以为每个子 div 分配一个不同的事件，以根据哪个子 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/

Answer 2

我创建了一些功能更多的东西，希望对您有所帮助：

现场演示

 $(function () {                // DOM ready

     var _mX = 0;               // (old Mouse Position) to define if mouse mover right or left
     var mDown = false;         // Mousedown flag
     var $cycle = $('.cycle');  // cache your elements!


     // Storing your animation in a function will help you to reset it once you do mouseleave
     function loop(){
        $cycle.stop().animate({ backgroundPosition: "+=20"}, 500, "linear", loop);
     }
     loop(); // start it!



     $cycle.on('mousedown mouseup',function(e){
         mDown ^= 1;    // 1/0  (Toggle our mDown flag)
     }).hover(function (e) {
         return e.type=="mouseenter"? $(this).stop() : loop() ;  // loop again on mouseleave 
     }).mousemove(function(e){
         var mX = e.clientX;
         var px = _mX > mX ? "-=4" : "+=4"; // Conditional Operator in action    
         if(mDown){ // only if we have a mouseDown flag (1/0 used as boolean)
             $cycle.css({backgroundPosition: px});
         }
         _mX = mX; // reset old mouse position to new one
     });

 });