2012-11-14 32 views
4

%的我想知道是否有像素轉換爲百分比的方式......我有我得到充分的寬度值成功代碼,但唯一保持對象中心,我必須使用百分比。轉換像素使用jQuery

這是我在得到寬的,我需要個百分點後轉換的值使用。

$(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。

+0

如果您發佈的HTML也將是怎樣的有益 – Swarne27

+0

%的?你可以得到身體的寬度或任何你想要的元素,然後用這種方法計算百分比。 – chovy

+0

'(child/parent)* 100' – elclanrs

回答

0

好的,我發現「#slides」不是我需要獲取寬度值的正確元素,因爲它也是幻燈片框架的一部分,而不是我獲取事件瀏覽器屏幕大小的值,其中我每次瀏覽器屏幕調整大小時都必須傳遞該值。

請檢查該鏈接以查看更新的小提琴。 updated fiddle source

下面是我發現有助於糾正我的問題的代碼。

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

在的情況下,我可以充分調整我寬度和自動調整自己的類元素寬度而不必停留在相同的地方我的中心對象。 :)

3

的百分比將是像素由寬度的值相乘的塊(經由$("#slides").parent().width()可能取得)的像素劃分的實際值(由.width獲取)由100

+0

你錯過了引號'#slides'後。無法編輯。請修復它 –

+1

@Daniil修復它,謝謝 –

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

哪裏$("#your_element")是您要在%中計算寬度的元素,其中$("#some_parent_id")是您要計算寬度的元素。

0

試試這個:

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