js 마우스 클릭 이미지 전환 효과 코드 공유_javascript 기술
- WBOY원래의
- 2016-05-16 15:42:291606검색
이 글의 예시에서는 js 마우스 클릭 이미지 전환 효과를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
구현 원리는 매우 간단합니다. 실제로 여러 장의 그림을 클릭한 후 각 그림에 클래스가 부여되어 그림을 클릭하면 연속적인 효과를 얻을 수 있습니다. 사진 전환.
렌더링 실행: ---------------------------------- ------------------------------------- ---------------
팁: 브라우저가 제대로 작동하지 않으면 탐색 모드를 전환해 보세요.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js鼠标点击图片切换效果</title>
<style type="text/css">
*{margin:0;padding:0;border:none;outline:none;list-style:none;}
#wrapper {width:280px;margin:20px auto;}
#imageContainer {width:280px;height:280px;position:relative;overflow:hidden;cursor:pointer;}
#imageContainer img {position:absolute;top:0;left:0;z-index:1;}
#imageContainer img.active {z-index:3;}
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="imageContainer">
<img src="images/01.jpg" class="active" width="280" height="280" />
<img src="images/02.jpg" width="280" height="280" />
<img src="images/03.jpg" width="280" height="280" />
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
var imageObject = {
clickSwap : function(obj) {
obj.click(function() {
var activeImage = $(this).children('img.active');
activeImage.removeClass('active');
if (activeImage.next().length > 0) {
activeImage.next().addClass('active');
} else {
$(this).children('img:first-child').addClass('active');
}
return false;
});
}
};
$(function() {
imageObject.clickSwap($('#imageContainer'));
});
</script>
</body>
</html>위 내용은 여러분께 공유해 드린 js 마우스 클릭 이미지 전환 효과 코드입니다. 성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.