Verwenden von jQuery zum Verschieben eines div-Hintergrunds basierend auf der Mausposition

Question

Ich möchte einen Code schreiben, der den Hintergrund eines div basierend auf x-Achsen-Mausbewegungen subtil verschiebt. Ich verwende derzeit .mousemove und die background-position -Eigenschaft, um das Hintergrundbild zu verschieben. Ich musste den Hintergrund ein wenig abhängig von der Fenstergröße bewegen, damit es nicht von der Seite ging. Ich habe einige if-Anweisungen eingerichtet, um das zu behandeln, aber die Hintergrundposition wird nicht aktualisiert, wenn das Fenster in der Größe geändert wird. Es funktioniert nur, wenn die Seite komplett neu geladen wird - dann liest es die if-Anweisungen erneut und der Hintergrund wird richtig positioniert. Die Hintergrundposition beträgt 23% 50% für Medienabfragen, die kleineren Fenstern entsprechen, und 40% 50% für Medienabfragen, die größeren Fenstergrößen entsprechen. Irgendwelche Ideen, wie ich den Code ändern kann, um die Hintergrundposition in Echtzeit zu aktualisieren, wenn die Fenstergröße geändert wird?

Vielen Dank!

$(document).ready(function(){ 

    if ($(".container").css("background-position")=="23% 50%") 
    { 
     $(document).mousemove(function(event) { 
     var m = event.pageX; 
     var q = 23 + m/200; 
     $(".container").css({"background-position": q + "% 50%"}); 
     $(".andServices").text(q); 
     }); 
    } 
    else if ($(".container").css("background-position")=="40% 50%") 
    { 
     $(document).mousemove(function(event){ 
     var z = event.pageX; 
     var t = 40 + z/200; 
     $(".container").css({"background-position": t + "% 50%"}); 
     $(".creativeProducts").text(t); 
     }); 
    } 

}); 

<div class="container"> 
<div class = "mobileBG"></div> 
    <div class="textContainer"> 

    <p class="creativeProducts">Creative Products</p> 
    <p class = "andServices">And Services</p> 
    <p class = "ebaySales">eBay Sales</p> 
    <p class = "seoServices">SEO Services</p> 
    <p class = "webDesign">Web Design</p> 
    <p class = "photography">Photography</p> 
    </div> 
</div> 

.container{ 
    width:100%; 
    position:relative; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    height:750px; 
    background-image:url(images/frontCoverImage.gif); 
    background-size:cover; 
    background-repeat:no-repeat; 
    background-position:23% 50%; 
} 

Answer 1

Grundsätzlich, wenn Sie Browsergröße ändern möchten, müssten Sie Folgendes verwenden.

$(window).resize(); 

Hoffe, das hilft.

Answer 2

dies versuchen

$(window).resize(function(){ 
    // Your if else statement here 
}); 

JQuery .resize() grundsätzlich funktioniert, wenn der Benutzer das Fenster/Browser

Answer 3

@Norman stimmt die Größe Sie jQuerys verwenden müssen .resize() dafür.

Sie können jedoch .resize() und .load() zusammen mit der .on() Ereignis-Listener wickeln.

$(document).ready(function() { 
 
    $(window).on('load resize', function() { 
 
    if ($(".container").css("background-position") == "23% 50%") { 
 
     $(document).mousemove(function(event) { 
 
     var m = event.pageX; 
 
     var q = 23 + m/200; 
 
     $(".container").css({ 
 
      "background-position": q + "% 50%" 
 
     }); 
 
     $(".andServices").text(q); 
 
     }); 
 
    } else if ($(".container").css("background-position") == "40% 50%") { 
 
     $(document).mousemove(function(event) { 
 
     var z = event.pageX; 
 
     var t = 40 + z/200; 
 
     $(".container").css({ 
 
      "background-position": t + "% 50%" 
 
     }); 
 
     $(".creativeProducts").text(t); 
 
     }); 
 
    } 
 
    }); 
 
});

.container { 
 
    width: 100%; 
 
    position: relative; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 750px; 
 
    background-image: url(images/frontCoverImage.gif); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: 23% 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="mobileBG"></div> 
 
    <div class="textContainer"> 
 
    <p class="creativeProducts">Creative Products</p> 
 
    <p class="andServices">And Services</p> 
 
    <p class="ebaySales">eBay Sales</p> 
 
    <p class="seoServices">SEO Services</p> 
 
    <p class="webDesign">Web Design</p> 
 
    <p class="photography">Photography</p> 
 
    </div> 
 
</div>