Question

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

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

但如何根据百分比给出div位置？

Answer 1

使用窗口大小。

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

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

Answer 2

这扩展了jQuery的getWidthInPercent＆＃39;功能：

(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/

怎么能得到div位置根据百分比？

5 个答案: