티스토리 뷰
변수와 셀럭터의 조합
코드)
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style>
body #mask {position:absolute;width:700px;height:300px;overflow:hidden;}
body img {width:300px;}
</style>
</head>
<body>
<div id="mask">
<img id='imgID1' src="sample.jpg" label="hello1"/>
<img id='imgID2' src="sample.jpg" label="hello2"/>
</div>
<script>
$(document).ready(function(){
var url = $('#imgID1').attr("label");
console.log(url); //hello1 출력
var maskVar = $('#mask');
maskVar + $('#imgID2').css('opacity',0.5);
});
</script>
</body>
</html>
19 ~ 20 : 이부분
var maskVar = $('#mask');
maskVar + $('#imgID2').css('opacity',0.5);
결과)
5 : overflow:hidden 으로 인해 마스크 처리가됨. 유의할점은 두개의 이미지를 합친 width 보다 크거나 같아야 inline으로 쌓임
17 : attribute를 사용, 호출 테스트 'hello1' 이 출력된다.
19 : 변수로 등록하여
20 : 처럼 결합해서 쓴다.
'■ 프론트엔드 ■ > jQuery' 카테고리의 다른 글
| 02.드래그 - 축이동 (0) | 2014.03.10 |
|---|---|
| 01.드래그 - 기초 (0) | 2014.03.10 |
| 버튼핸들러 (0) | 2014.01.06 |
| length - Element 갯수 반환 (0) | 2014.01.06 |
| on() - selectstart, dragstart 로 마우스 드래그방지 (2) | 2014.01.06 |
댓글