모바일 사이트 버튼눌림효과 주기
모바일/JAVAScript& jQuery 2011. 3. 4. 14:30
HTML :
<a class="btn">Touch
button</a>
CSS :
.btn
{
text-indent: -9999px;
display: block;
width: 200px; /*
버튼 넓이 */
height: 50px; /*
버튼 높이 */
background: transparent url(img/button.png) no-repeat;
}
.btn:active
{
background: transparent url(img/button_press.png) no-repeat;
}
JS(jQuery) :$(document).ready(function() {
$('.btn').live('touchstart',function(event){
$(this).addClass('active');
});
$('.btn').live('touchend',function(event){
$(this).removeClass('active');
});
});
[출처] 모바일 사이트 버튼눌림효과 주기|작성자 리베하얀
'모바일 > JAVAScript& jQuery' 카테고리의 다른 글
| Basic jQuery touchmove Event Setup (0) | 2011.03.08 |
|---|---|
| Javascript Touch & Gesture Event for Mobile Browser (1) | 2011.03.08 |
| 아이폰 사파리용 웹 어플 개발하기 (0) | 2011.03.04 |
| 아이폰(iphone) safari 웹개발 기본 팁 (0) | 2011.03.04 |