jquery 간단한 마우스 오버, 아웃효과
페이지 정보
작성자 홈피사랑 작성일14-07-15 13:52 조회5,689회 댓글0건관련링크
본문
jquery를 이용한 간단한 마우스 오버,아웃 효과 만들기 입니다.
이미지명을 on,off 2가지로 만들고 마우스 오버시 이미지 경로중 off를 on으로 교체해서 간단하게 오버,아웃 효과를 만들수 있습니다.
예제코드
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>홈페이지제작업체 - 홈피사랑 HOMPYLOVE</title>
<link rel="stylesheet" href="css/reset.css" media="all"/>
<style>
.list li{float:left; margin-right:5px; cursor:pointer;}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
btnConfig();
});
function btnConfig(){
$(".list li").mouseover(listOver).mouseout(listOut);
}
function listOver(){
var str = $(this).find("img").attr("src").split("off").join("on");
$(this).find("img").attr("src",str);
}
function listOut(){
var str = $(this).find("img").attr("src").split("on").join("off");
$(this).find("img").attr("src",str);
}
</script>
</head>
<body>
<ul class="list">
<li><img src="img/ico_process01_off.jpg" alt=""/></li>
<li><img src="img/ico_process02_off.jpg" alt=""/></li>
</ul>
</body>
</html>
예제링크
댓글목록
등록된 댓글이 없습니다.
