javascript - 使用鼠标移动将具有位置的子级调整为父级

问题描述

我是 javascript 的初学者，我尝试用 js 编写我的第一页（这里是用 Jquery）。我绝望地尝试将鼠标移动到我的“横幅”部分，包含在具有绝对子级（具有顶部和左侧位置）的父级中。我成功地获得了正确的视差效果，但不幸的是，孩子们不会调整到他们的父母。这是唯一适用于我的情况但不适合父母的代码，我不知道为什么（但是，它适用于这个例子......）： https ://jsfiddle.net/c5yke2on/3/

这是我的：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" >
<head>
</head>

<body>

<div id="content" class="site-content" >
    <div id="intro" class="normag">
        <div class="background_wrapper" id="background-intro" > 
            <div id="pink"></div>
            <div id="yellow"></div> 
            <div class="letter_container">      
          <div class="bg_letter" id="w" ></div>
          <div class="bg_letter" id="p" ></div>
            </div>
        </div>
    
        <div id="titre" class="antic titles">
            <div class="title_top"><div class="rising_line">Working</div></div>
            <div class="title_top"><div class="rising_line">Promesse</div></div>
            <div class="bar" style="width:43px;top:80px;"><div class="rising_bar"></div></div>
            <div class="title_top marg_left_55"><div class="rising_line">les</div></div>
            <div class="title_top marg_left_55"><div class="rising_line">mutations</div></div>
            <div class="title_top marg_left_55"><div class="rising_line ">du travail</div></div>
            <div class="bar marg_left_55" style="width:172px;top:168px;"><div class="rising_bar"></div></div>
        </div>

        <div id="signature" class="titles">
            <div class="bar" style="width:43px;" ><div class="rising_bar"></div></div>
            <div id="decal_signature">
                <div class="title_top got_light"><div class="rising_line">10 <span class="exposant">e</span></div></div>
                <div class="title_top got_light"><div class="rising_line">Biennale</div></div>
                <div class="title_top got_light"><div class="rising_line">Internationale</div></div>
                <div class="title_top got_med"><div class="rising_line">Design</div></div>
                <div class="title_top got_med"><div class="rising_line">Saint-Etienne</div></div>
            </div>  
        </div>  
    </div>  
    
</div>
<!-- -->    
</body>
</html>

我的 JS：

$(document).ready(function($) {

    // ----- Parallax Effect ------- //

    var titre = document.getElementById('titre');
    var signature = document.getElementById('signature');
    titre.homePos = { x: titre.offsetLeft, y: titre.offsetTop };
    signature.homePos = { x: signature.offsetLeft, y: signature.offsetTop };
    
    $('#intro').mousemove(function (e) {
        parallax(e, document.getElementById('titre'), 20);
        parallax(e, document.getElementById('signature'), 30);
    });

}); 

    // ----- Parallax Function ------- //
    
    function parallax(e, target, layer) {
    var x = target.homePos.x - (e.pageX - target.homePos.x) / layer;
    var y = target.homePos.y - (e.pageY - target.homePos.y) / layer;
    $(target).offset({ top: y ,left : x });
    };
    
    // -- //    

$(window).resize(function() {

    parallax();

});

我做了一个 Jsfiddle 来帮助你理解我的问题 https://jsfiddle.net/nota2k/0jr6ps5w/

我很难理解如何计算：宽度父级 - 每个孩子的左侧/位置或顶部/位置。也许我想学得太快……！

如果有人能解决我的问题，顺便解释一下计算是如何工作的，那就太好了！

谢谢，

标签： javascripthtmljquerycssmousemove

javascript - 使用鼠标移动将具有位置的子级调整为父级 - Jquery

问题描述

解决方案

推荐阅读