4

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

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

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

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

谢谢您的帮助。

这是更新的小提琴链接。 *注意：我在这里想要的是将“.slide”容器设置为流体，以使对象仍处于中心位置。随意修改我的小提琴。现在我使用我给定的jQuery代码来获取“#slide”的确切宽度，以像素百分比（'.slide'）为单位。然后，尝试调整浏览器的大小以查看幻灯片框架的输出。我使用 SlidesJS 插件仅供参考。

4

5 回答 5

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

$("#your_element")你想计算宽度的元素在哪里，你想计算宽度的元素在%哪里$("#some_parent_id")。

于 2012-11-14T05:03:30.607 回答
3

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

于 2012-11-14T05:02:41.563 回答
1

试试这个：

 $(document).ready(function(){
        var sp = $('.slide'),
            winWidth = $('#slides').width(),
        wWidth = $(window).width();
        sp.width(((winWidth / wWidth) * 100)+'%');
    });
于 2012-11-14T10:47:08.263 回答
0

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

请检查此链接以查看更新的小提琴。 更新的小提琴源

这是我发现对纠正我的问题有用的代码。

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

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

于 2012-11-14T08:04:40.733 回答
0

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

对于 jquery 用户

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

对于 javascript 用户

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

x 轴百分比

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

y轴百分比

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

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

  function pixelToPercent(x,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 

return {
xPercent,
yPercent}
 
 }
于 2020-11-23T06:41:03.183 回答