jquery를 사용하여 이미지의 일부를 표시합니다.

Question

시각화를 수행 중이며 계산은 분수 (예 : 23.43, 4.3, 39.79, ...)로 반환 될 수 있습니다. 결과에있는 모든 정수에 대한 아이콘을 표시해야합니다 (예 : 23 -> 23 아이콘, 4 -> 4 아이콘, 39 -> 39 아이콘).

이제는 소수 부분의 아이콘을 깨뜨려야합니다. 예 : 23.43 -> 23 아이콘 및 아이콘의 수평 부분의 0.4 (또는 0.5 경우), 4.3 -> 4 아이콘 및 0.3 (또는 0.25) 아이콘의 x 부분, 39.79 -> 39 아이콘 및 0.8 (또는 0.75) 아이콘의 x 부분 등.

어떻게하면됩니까? CSS를 사용하여 배경을 사용하는 몇 가지 접근법을 보았습니다. 그러나 이것이 내가 원하는 바로는 보이지 않습니다. jquery 방법을 선호합니다.

편집 : 나는 내가 개인적으로 <div>의 background-image가이 이미지를 설정 한 것

Answer 1

을하려고하고 무엇을 여기에 이미지가 이미지의 폭의 배수로 width를 설정 (예 : 23.4 * 너비)이고 background-repeat ~ repeat-x입니다.

특별히 배경의 사용을 거부 할 경우

후 hidden에 overflow을 설정하고 div 내부 document.createElement에 image의 지정된 수를 JS에서 loop를 사용합니다. 이렇게하면 오버 플로우로 인해 마지막 부분이 '반쯤 보이게'될 수 있습니다.

편집 :이 문제를 해결하기 위해

, 당신은 줄 바꿈을 설정해야합니다. 예를 들어 이미지 크기가 21px 인 것을 확인하면 한 줄의 최대 이미지 수는 20 (840px 너비)라고 가정 해 보겠습니다.

그러면 75.5 개의 이미지를 배치해야한다고 가정 해 봅시다.

먼저 너비가 840px 인 div을 만들고 75.5 - (75.5 % 20) 개의 이미지를 넣으십시오. 이미지의 세 행을 만들어야합니다. 그런 다음 나머지 (75.5 % 20 = 15.5 => 16 images)를 너비가 15.5 * 21xx 인 새로운 div에 넣고 앞의 경우처럼 오버플로를 숨 깁니다. 다시 말하지만, 마지막 16 번째 이미지가 절반으로 보입니다.

편집 2 : 단 하나의 div 아무것도 고정 폭 원하는 :

이미지의 폭이 다양하면, 새로운 기술이있을 수 있습니다. 모든 이미지를 그 안에 넣으십시오.당신의 페이지의 색상에 불투명 한 배경으로 마지막 image 후 새 div를 추가

http://jsfiddle.net/qTb8T/1/

HTML :

<div id="wrapper"> 
    <div id="overlay"> 
</div> 

CSS :

#wrapper { 
    background: blue; 
    width: 700px; 
} 
#overlay { 
    background: blue; 
    display: inline-block; 
    position: relative; 
} 

JS :

var count = 75.5, 
    ceil = Math.ceil(count), 
    image = 'http://jsfiddle.net/img/logo.png', 
    overlay = $('#overlay'), 
    wrapper = $('#wrapper'), 
    hide = ceil - count; 

for(var i = 0; i < ceil; i++) { 
    var img = document.createElement('img'); 
    img.src = image; 
    wrapper.prepend(img); 
} 

overlay.css({ 
    'width': img.clientWidth, 
    'left': -img.clientWidth * hide, 
    'height': img.clientHeight, 
});