0

これが私が使用しようとしてきたコードです：

$(document).ready(function() {
    var cc = 0;
    var drag = false;
    var bgp = 10;

    $('body').mousedown(function(){
        var bg =  Number($('body').css('background-position-x').replace(/[^-\d\.]/g, ''));
        bgp =+ bg;
        drag = true;
    });

    $('body').mouseup(function(){
        drag = false;
    });

    $('body').mousemove(function(e){
         $(this).mousedown(function(){
             cc =+ e.pageX;
         });
         if (drag==true) {
             cc =+ e.pageX;
         }

        function pan() {
             $('body').css('background-position',bgp+cc);
        } 

        if(drag==true) {
             pan();
        }
    });
});

それは一種の機能ですが、マウスをどれだけ動かしたかに応じて背景の位置を変更する代わりに、マウスがページの左端からどれだけ離れているかに応じて背景が設定されます。

これを修正する方法の私の考えは、背景を元の位置+ドラッグ時のマウスの位置-クリック時のマウスの位置に設定することです。これを解決するまったく別の方法があれば、それも良いですが。

私はjqueryを独学しようとしているので、自分のコードに対する批判にオープンです

4

1 に答える 1

3

マウスダウン アクションの開始位置と最初の背景位置 (x と y) をキャプチャします。

var startX = event.pageX;
var startY = event.pageY;
var initialX = parseInt($('body').css('background-position-x'));
var initialY = parseInt($('body').css('background-position-y'));

mousemove イベントで、startX とmovedX の違いをキャプチャします

var differenceX = startX - e.pageX;
var differenceY = startY - e.pageY;

次に、これらの違いを最初の background-position-x と y に追加します。

$('body').css('background-position-y', (initialY + differenceY));
$('body').css('background-position-x', (initialX + differenceX));
于 2013-04-17T18:21:42.880 に答える