Jquery 在鼠标上设置背景位置动画向下鼠标移动到鼠标移动方向（左/右）

你能看看这个吗？让我知道如何在鼠标上设置背景位置动画向下鼠标移动到鼠标移动方向（左或右）

正如您所看到的，我想添加一个功能，使用户能够单击并向左或向右设置图像动画

我有

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

---

所以我会这样做

HTML 这里的想法是，我们有两个子

元素，它们正好占据父元素宽度的50%。这意味着我们可以为每个子div分配不同的事件以向左或向右滚动，具体取决于哪个子div具有

鼠标盖

修订JQuery

---

jsiddle:

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

 $(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
     });

 });

---

在您的演示中，Goog提供的一个不错的图像链接可以节省我2分钟的时间；）此外，我看不到您在解决问题方面做出了任何努力：\n您已经尝试了什么吗？我为您创建了一个演示，希望在您未来的工作中有用：或者更简单：（请注意，不要用不必要的元素污染HTML，让我们使用一些数学！）Hi@RokoC.Buljan，谢谢您。我完全了解这种方法，但我选择了一种被认为更简单的方法（实现、理解和维护），我相信（很高兴被纠正）会占用更少的内存，因为它不会在每次鼠标移动时都执行数学功能。Hi Roko，谢谢你的完美解决方案，这正是我想要的。唯一的问题是，当我永久性地使用鼠标时，如何停止动画？我的意思是我想终止鼠标或鼠标上的自动滑动enter@MonaCoder就像我在演示中做的那样。。。。你能说得更具体些吗？我的例子有什么不对？它在Mouseenter上停止你能让我知道如何在Mouseenter之后停止/终止动画吗（就像你做的那样，甚至在Mouseenter之后也可以）替换这一行：

.hover（函数（e）{return e.type==“Mouseenter”？$（this.STOP（）：loop（）；

，with:

.Mouseenter（函数（）{$（this.STOP（））；

@MonaCoder…我只是好奇，你成功了吗？

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

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

 $(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);
 }

 $(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
     });

 });