javascript - 如何根据百分比获取 div 位置？

Question

使用此代码，您可以获得基于像素的 div 位置。

$('#div').position();

但是如何才能给 div position 基于百分比呢？

Answer 1

使用窗口大小。

var position = $('#div').position();
var percentLeft = position.left/$(window).width() * 100;
var percentTop = position.top/$(window).height() *100;

此代码将为您提供顶部和左侧的位置百分比。

Answer 2

这使用 'getWidthInPercent' 函数扩展了 jQuery：

(function ($) {

    $.fn.getWidthInPercent = function () {
        var width = (
                        parseFloat($(this).css('width'))
                    +   parseFloat($(this).css('padding-right'))    
                    +   parseFloat($(this).css('padding-left')) 
                    ) / parseFloat($(this).parent().css('width'));
        return Math.round(100*width);
    };

})(jQuery);

用作：

$('#element').getWidthInPercent() ;

Answer 3

jQuery position():

描述：获取匹配元素集合中第一个元素相对于偏移父元素的当前坐标。

它不用于设置位置。如果要设置位置（以百分比或其他方式），则需要使用.css()来更改其边距（或顶部，左侧）等。

Answer 4

我认为您的意思是“获得”而不是“给予”。您必须计算百分比，除非它已经在 CSS 中。

您可以随时进行实验。

#d {
    position: absolute;
    left: 33%;
    top: 50px;
    background-color: red;
    width: 100px; height: 100px;
}

<div id="d"></div>

alert($("#d").position().left + " " + $("#d").position().top);
alert($("#d").css("left") + " " + $("#d").css("top"));
var pcLeft = 100 * $("#d").position().left / $(window).width();
var pcTop = 100 * $("#d").position().top / $(window).width();
alert(pcLeft + " " + pcTop);

Answer 5

该解决方案解决了@naziiiii 遇到的错误，也可能有助于解决这个问题。检查下面给出的链接

$(function(){
 var percentLeft = '';
var percentTop = '';
   var percentLeft2 = '';
    var percentTop2 = '';

    $( "#div1" ).draggable({ 
        containment : '#container',
        tolerance: 'touch',
        stop:function(event, info){
            var position = $(this).position();
            percentLeft =  position.left/$('#container').width() * 100;
            percentTop =  position.top/$('#container').height() *100;       
        }
    });        
       $( "#div2" ).draggable({ 
        containment : '#container',
        tolerance: 'touch',
        stop:function(event, info){
            var position2 = $(this).position();
            percentLeft2 = position2.left/$('#container').width() * 100;
            percentTop2 =  position2.top/$('#container').height() *100;                             
        }
    });

   function wResize() {

         var winW = $('#container').width();
         var d = $('#div1').position();
    var d2 = $('#div2').position();      

         $('#div1').css({color:'green',
                        position: 'absolute',
                        left: percentLeft + '%',
                        top: percentTop + '%'
                        }); 
          $('#div2').css({color:'red',
                        position: 'absolute',
                        left: percentLeft2 + '%',
                        top: percentTop2 + '%'
                        });
        //$('#test2').html(percentLeft+ ' _____ '+ percentTop + 'winW : ' + winW);  
 }

 wResize();

$(window).resize(function() {
    wResize();
});
});    

http://jsfiddle.net/komal10041992/q74vxcxf/