居中元素使用jQuery位置+变量

Centering Element using jQuery Position + Variable

本文关键字：位置 变量 jQuery 元素      更新时间：2023-09-26

我有下面的代码，它是从(CSS-Tricks Link)修改的。它工作得很好，但是我的网站的魔法线(导航栏下的浮动元素)是40像素宽。

我想永久居中对齐(无论它是否处于悬停状态)，目前它在元素的左侧对齐。因为它是使用jQuery .position()从左计算，我所有的努力添加'forceRight'，但否定jQuery .position()。

变量'forceRight'，查找40px栏两侧的差异。但是，我需要强制执行这个侧间隙，因为菜单项的宽度不同。

var forceRight,
    off_hover_left,
    $el,
    $calcuateForceDistance,
    $magicLine_width        = 40,
    $mainNav                = $("#main-navigation"),
    $currentPosition        = $(".current-menu-item"),
    $currentPosition_width  = ($currentPosition.outerWidth() - $magicLine_width);
$mainNav.append("<span id='magic-line'></span>");
var $magicLine = $("#magic-line");
$magicLine
    .css("left", $(".current-menu-item").position().left)
    .data("origLeft", $magicLine.position().left);
$("#main-navigation a").hover(function(){
    // current element
    $el                     = $(this),
    // Calcuate Distance 
    $calcuateForceDistance  = Math.floor( ( $el.outerWidth() - $magicLine_width ) / 2 );
    forceRight = ( $el.position().left + $calcuateForceDistance );

    off_hover_left = Math.floor( $currentPosition.position().left + ($currentPosition_width / 2) );
    $magicLine.stop().animate({
        left: forceRight
    });
}, function() {
    // On Hover Out - Return to DOM LOAD (.current-menu-item)
    $magicLine.stop().animate({
        // not selected outerwidth !!! sort out variables above!
        left: off_hover_left
    });
});

多谢!

我已经修复了代码中的错误，我还添加了一个文档，准备让代码在浏览器呈现上运行。当代码加载时，我还创建了一个延迟，然后添加了一个类来消除故障(在0 ->所需轴值之间的左侧动画)。

在这种情况下，我使用不透明度0，作为默认值。1、on . addclass ('found').

var forceRight,
    $el,
    $calcuateForceDistance,
    $magicLine_width        = 40,
    $mainNav                = $("#main-navigation"),
    $currentPosition        = $(".current-menu-item"),
    $currentPosition_width  = ($currentPosition.outerWidth() - $magicLine_width),
    $off_hover_left         = Math.floor( $currentPosition.position().left + ($currentPosition_width / 2) );
    // Create HTML ELEMENT
    $mainNav.append("<span id='magic-line'></span>");
    // Target -> Variable
    var $magicLine = $("#magic-line");
    // Apply attr's
    $magicLine.css("left", $(".current-menu-item").position().left);

$(document).ready(function(){
    // Enforce Code On Load
    $magicLine.stop().animate({
        // not selected outerwidth !!! sort out variables above!
        left: $off_hover_left
    }).promise().done(function(){
        // Once Positioned - Then add class (changes opacity) !
        $(this).addClass('found');
    });
    $("#main-navigation a").hover(function(){
        // current element
        $el                     = $(this),
        // Calcuate Distance 
        $calcuateForceDistance  = Math.floor( ( $el.outerWidth() - $magicLine_width ) / 2 );
        forceRight = ( $el.position().left + $calcuateForceDistance );
        $magicLine.stop().animate({
            left: forceRight
        });
    }, function() {
        // On Hover Out - Return to DOM LOAD (.current-menu-item)
        $magicLine.stop().animate({
            // not selected outerwidth !!! sort out variables above!
            left: $off_hover_left
        });
    });
});

我希望这能帮助到别人，而不仅仅是我!

在你的javascript中，你只设置你的#magic-line的左侧位置。你还需要设置线条的宽度。下面代码中的示例(只是要修改的行):

// On the initialization
$magicLine
    .css({
        "left": $(".current-menu-item").position().left,
        "width" : $(".current-menu-item").outerWidth()
    });
// On modification
$magicLine.stop().animate({
    left: leftPos,
    width: $el.outerWidth()
});

这应该能解决问题。

相关文章：