JavaScript işlevi sadece

Question

sınıfındaki ilk div'u etkiler. İmleç, belirli div'lar üzerinden geçtiğinde "yavaşlatması" beklenen bir oyunun bir parçasına sahibim. Div ile bir çarpışmayı algılayabilen bir işlev kullanıyorum. Bu, imleç ilk div ile karşılaştığında iyi çalışır, ancak ikinci div'da hiç işe yaramıyor. Ne hakkında konuştuğumu daha iyi anlamak için

Check out this jsFiddle. İmleci soldaki ilk beyaz bloktan (class='thing') geçirin ve yavaşlar. İmleci diğer bloğun üzerine geçirin (class='thing') ve hiçbir şey olmuyor. class='thing''un bulunduğu tüm divlarda çalışmak için bu çarpışma işlevine ihtiyacım var. İstediğiniz gibi

HTML

<div id='cursor'> 
      &nbsp; 
     </div> 
     <div class='thing' style='width:70px; height:70px; background: #fff; position: absolute; bottom: 350px; right: 800px; z-index: -1;'> 
      &nbsp; 
     </div> 
     <div class='thing' style='width:70px; height:70px; background: #fff; position: absolute; bottom: 200px; right: 400px; z-index: -1;'> 
      &nbsp; 
     </div> 

JS

(function collide(){ 
var newInt = setInterval(function() { 
function collision($cursor, $thing) { 
    var x1 = $cursor.offset().left; 
    var y1 = $cursor.offset().top; 
    var h1 = $cursor.outerHeight(true); 
    var w1 = $cursor.outerWidth(true); 
    var b1 = y1 + h1; 
    var r1 = x1 + w1; 
    var x2 = $thing.offset().left; 
    var y2 = $thing.offset().top; 
    var h2 = $thing.outerHeight(true); 
    var w2 = $thing.outerWidth(true); 
    var b2 = y2 + h2; 
    var r2 = x2 + w2; 

    // change 12 to alter damping higher is slower 
    var varies = 12;  

    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2){ 
    } else { 
    varies = 200; 
    console.log(varies); 
    } 
$xp += (($mouseX - $xp)/varies); 
    $yp += (($mouseY - $yp)/varies); 
    $("#cursor").css({left:$xp +'px', top:$yp +'px'}); 

} 

$(collision($('#cursor'), $('.thing'))); 
//$('.result').text(collision($('#cursor'), $('.thing'))); 

}, 20); 
})(); 

Answer 1

$thing, elemanların topluluğudur, ama burada sorun offset().left; gibi $thing belirli özelliklerini sormak yani, Birden fazla sayıya dönüşemeyen, sadece ilkini alır. Bunun yerine yapmanız gereken, $thing'daki tüm öğeler arasında geçiş yapmak için .each() işlevini kullanmaktır.

$thing.each(function(index, element){ 
    //your code for each thing here 
}); 

Answer 2

Eğer bir dizinin ilk elemanını alacak elemanların ve collision() fonksiyonu bir dizi alacak jQuery (.thing kullanarak durumunda) sınıf adıyla elemanı seçiyoruz. böylece benzersiz

<div id='track'> 
    <div class = 'container'> 
     <div id='cursor' class='cursor'> 
      &nbsp; 
     </div> 
     <div class='thing' id="a1" style='width:70px; height:70px; background: #fff; position: absolute; bottom: 175px; right: 400px; z-index: -1;'> 
      &nbsp; 
     </div> 
     <div class='thing' id="a2" style='width:70px; height:70px; background: #fff; position: absolute; bottom: 100px; right: 200px; z-index: -1;'> 
      &nbsp; 
     </div> 
    </div> 
</div> 


(function cursorMapping(){ 

var $mouseX = 0, $mouseY = 0; 
var $xp = 0, $yp =0; 

$(document).mousemove(function(e){ 
    $mouseX = e.pageX; 
    $mouseY = e.pageY;  
}); 

function showCoords(event) { 
    var x = event.clientX; 
    var y = event.clientY; 
    var coor = "X: " + x + ", Y: " + y; 
} 

var timestamp = null; 
var lastMouseX = null; 
var lastMouseY = null; 

var mrefreshinterval = 500; // update display every 500ms 
var lastmousex=-1; 
var lastmousey=-1; 
var lastmousetime; 
var mousetravel = 0; 
var lastmousetravel = 0; 

var speed; 
var marker1 = 1; 
var marker2 = 1; 

var timer = setInterval(function(){ 
    marker1; 
    marker2; 
}, 20); 

$(function() { 

    var $speedometer = $('#speed'), 
     _speed = 0; 

    $('#track').cursometer({ 
     onUpdateSpeed: function thisSpeed(speed) { 
      _speed = speed; 
      $speedometer.text(Math.ceil(speed * 100)/100); 
     }, 
     updateSpeedRate: 20 
    }); 

}); 

var thisInterval = setInterval(function FXInterval(){ 
    speed = $('#speed').text(); 
     $('#cursor').css({'background-color': '#CE7A7A'}); 
}, 20); 

$('html').mousemove(function(e) { 
    var mousex = e.pageX; 
    var mousey = e.pageY; 
    if (lastmousex > -1) 
     mousetravel += Math.max(Math.abs(mousex-lastmousex), Math.abs(mousey-lastmousey)); 
    lastmousex = mousex; 
    lastmousey = mousey; 
    var speed = lastmousex + lastmousey; 

    setTimeout(function(){ 
     lastmousetravel = mousetravel; 
    }, 20); 
}); 

(function collide(){ 
var newInt = setInterval(function() { 
function collision($cursor, $thing) { 
    var x1 = $cursor.offset().left; 
    var y1 = $cursor.offset().top; 
    var h1 = $cursor.outerHeight(true); 
    var w1 = $cursor.outerWidth(true); 
    var b1 = y1 + h1; 
    var r1 = x1 + w1; 
    var x2 = $thing.offset().left; 
    var y2 = $thing.offset().top; 
    var h2 = $thing.outerHeight(true); 
    var w2 = $thing.outerWidth(true); 
    var b2 = y2 + h2; 
    var r2 = x2 + w2; 

    // change 12 to alter damping higher is slower 
    var varies = 12;  

    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2){ 
    } else { 
    varies = 200; 
    console.log(varies); 
    } 
$xp += (($mouseX - $xp)/varies); 
    $yp += (($mouseY - $yp)/varies); 
    $("#cursor").css({left:$xp +'px', top:$yp +'px'}); 
} 
$(collision($('#cursor'), $('#a1'))); 
$(collision($('#cursor'), $('#a2'))); 

}, 20); 
})(); 

})();