728x90
300x250
SMALL
jQuery를 이용해서 이미지 가로 정렬 구하는 방법
html
<div id="img-list">
<img src="http://placeimg.com/150/200/people" alt="img">
<img src="http://placeimg.com/150/200/people" alt="img">
<img src="http://placeimg.com/150/200/people" alt="img">
<img src="http://placeimg.com/150/200/people" alt="img">
<img src="http://placeimg.com/150/200/people" alt="img">
</div>
css
#img-list img {position:absolute; width: 100px;height: 100px;padding: 10px;}
css positon:absoute로 변경해 줘야 한다.
jQuery
let $imgList = null; //이미지를 담을 imgList제이쿼리 변수 선언
$(document).ready(function() {
$imgList = $("#img-list img"); //이미지를 찾아서 $imgList에 넣는다.
console.log ($imgList.length);
for(let i=0 ; i < $imgList.length ;i++) { // 이미지 개수만큼 반복
let $img = $imgList.eq(i); //이미지를 한개씩 $img에 저장
let x = i * 120; // x값 구하기
let y = Math.floor($imgList.length/2) * 120; // y값 구하기
$img.css({ // 이미지 위치 적용
left:x,
top:y
});
}
});
x값은 이미지 넓이 값이 100이고 양쪽 padding값이 10이기 때문 120씩 인덱스 값에 곱해준다.
그러면 첫 번째 이미지부터 0, 120, 240 이런 식으로 x위치가 지정된다.
y값은 가운데 위치 하도록 전체 이미지 개수의 절반 값을 구한다. 그러면 2.5개가 되는데 Math.floor를 이용해서 소수점 버림을 해서 2 값을 구하고 역시나 높잇값 100, 위아래 padding 20 해서 120을 곱해준 위치에 지정해 준다.
결과화면
728x90
반응형
LIST
'javaScript > jQuery' 카테고리의 다른 글
[jquery]모바일 메뉴 슬라이드 (0) | 2022.06.26 |
---|---|
[jQuery] top 메뉴 슬라이드 (0) | 2022.06.25 |
jQuery 제이쿼리 cdn 최신버전 사용하기 (0) | 2022.04.18 |
jQuery 이미지 위치 설정하기 (0) | 2022.03.30 |
jQuery cdn 사용하기 (0) | 2022.01.31 |
댓글