Question

我正在尝试使用Jquery在自动收录器中实现自己的滚动，因为正常的滚动在它反击动画时效果不好。基于鼠标移动，我实际上需要滚动滚动条。通常它会滚动：

#ticker {
    white-space: nowrap;
    -webkit-animation: move_eye 6s linear 0s infinite normal;
    background-color: yellow;
}

并在悬停时我暂停滚动：

#controller:hover #ticker {
    -webkit-animation-play-state: paused
}

#controller是代码父母。

当我将鼠标放在控制器中并单击时，我认为可以移动自动收报机。然后，当用户拖动鼠标时，我会使用jquerys动画功能移动自动收报机。我喜欢这个

var current_x = 0;
function track_mouse_pos(event) {
    var direction = "";
    if(event.clientX < current_x){
       direction = "left"; 
       current_x = event.clientX;
       $("#ticker").animate({left:'+=5px'});
    }
    else{
        direction = "right"; 
        current_x = event.clientX;
        $("#ticker").animate({left:'-=5px'});
    }
    $('#start_mouse_tracker').html("( " + direction + ", " + current_x + " )");
    $('#drag_tracker').html("( " + event.clientX + ", " + event.clientY + " )");
}

$("#controller").mousedown(function (event) {
    var start_x = event.clientX;
    var start_y = event.clientY;
    $("#controller").on('mousemove', {start_x: start_x}, track_mouse_pos);
});

我可以跟踪鼠标，我可以得到它的方向，但它不会移动。为什么不动？我怎么能让它移动？

JSFiddle

Answer 1

动画需要位置相对

试

#controller:hover #ticker {
    -webkit-animation-play-state: paused;
position:relative;
}

如果元素的位置样式属性是静态的，则方向属性（上，右，下，左）对元素没有明显的影响，默认情况下是这样。通过http://api.jquery.com/animate/

为什么我不能用jquery移动我的股票代码

1 个答案: