Question

我想知道是否有办法将像素转换为百分比...我有一个代码，我成功获得全宽度的值，但唯一保持对象在中心的东西，我必须要使用百分比。

这是我用来获取我需要转换后的宽度值的百分比。

$(document).ready(function(){
    var sp = $('.slide'),
        winWidth = $('#slides').width();
        console.log(winWidth);

    sp.css('width', winWidth);
});

感谢您的帮助。

Here's the updated fiddle link. *注意：我想要的是设置“.slide”容器变得流畅，使对象仍然在中心位置。随意修改我的小提琴。现在我使用我给定的jQuery代码来获得“#slide”的精确宽度，以百分比为单位（'.slide'）。然后，尝试调整浏览器的大小以查看幻灯片框架的输出。我正在使用SlidesJS插件FYI。

Answer 1

percent = ($("#your_element") / $("#some_parent_id").width()) * 100

$("#your_element")是要在%中计算宽度的元素，其中$("#some_parent_id")是您想要计算宽度的元素。

Answer 2

百分比将是以像素为单位的实际值（由.width获取）除以块的宽度值（可能通过$("#slides").parent().width()获得）乘以100。

Answer 3

试试这个：

 $(document).ready(function(){
        var sp = $('.slide'),
            winWidth = $('#slides').width(),
        wWidth = $(window).width();
        sp.width(((winWidth / wWidth) * 100)+'%');
    });

Answer 4

好吧，我发现“#slides”不是我需要获取宽度值的正确元素，因为它也是幻灯片框架的一部分而不是我获得事件浏览器屏幕大小的值我所拥有的每次浏览器屏幕调整大小时传递值。

请检查此链接以查看更新的小提琴。 updated fiddle source

这是我发现有助于纠正我的问题的代码。

$(window).resize(function() {
  var sp = $('#slides .slide');
  console.log(document.body.clientWidth);
  winWidth = document.body.clientWidth;
  sp.css('width', winWidth);
});

在这种情况下，我可以完全调整宽度并自动调整我的类元素宽度，而不会让我的中心对象卡在同一个地方。：）

Answer 5

使用简单的公式计算像素百分比

针对jquery用户

text_X[out_pos++] = (new_text[i] == 'X') ? 'Q' : 'X';

针对javascript用户

var w=$("#container").width();
var h=$("#container").height();

x轴百分比

var w=element.getBoundingClientRect().width;
var h=element.getBoundingClientRect().height;

y轴百分比

var xPercent=Math.round(x/w*100); //x is your pixal value

对于拖动用户，请使用内部移动功能

var yPercent=Math.round(y/h*100); // y is your pixal value

使用jQuery将像素转换为百分比

5 个答案: