집 > 기사 > 웹 프론트엔드 > jquery 이미지 기울기 계단식 전환 특수 효과 코드 공유_jquery

jquery 이미지 기울기 계단식 전환 특수 효과 코드 공유_jquery

WBOY원래의: 2016-05-16 15:42:071247검색

이 문서의 예에서는 jquery 이미지 기울기 계단식 전환 특수 효과 코드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
이것은 jQuery.roundabout.js를 기반으로 한 CSS3 이미지 기울기 계단식 전환 효과 코드입니다. 매우 계층화된 느낌을 가지며 왼쪽과 오른쪽으로 전환할 수 있는 매우 상쾌한 코드 예제입니다.
运行效果图： ------查看效果下载源码------------ --------

팁: 브라우저가 제대로 작동하지 않으면 탐색 모드를 전환해 보세요.
스타일과 특수 효과를 가져오려면 다음 코드가 필요합니다.

<link rel="stylesheet" href="css/style.css" />


<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="js/jquery.roundabout.js"></script>
<script type="text/javascript" src="js/script.js"></script>

공유해주신 jquery 이미지 틸트 계단식 전환 특수 효과 코드는 다음과 같습니다

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片倾斜层叠切换代码</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="js/jquery.roundabout.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="tour" class="zebra">
 <div class="wrap">
 <div class="switcher-wrap slider">
 <a class="prev jQ_sliderPrev" href=""></a>
 <a class="next jQ_sliderNext" href=""></a>

 <ul id="img-slider" style="height: 450px;">
 <li class="img">
 <img src="images/client.png" />
 <div class="label">Client</div>
 </li>
 <li class="img">
 <img src="images/developer.png" />
 <div class="label">Developer</div>
 </li>
 <li class="img">
 <img src="images/manager.png" />
 <div class="label">Manager</div>
 </li>
 <li class="img">
 <img src="images/tester.png" />
 <div class="label">Tester</div>
 </li>
 <li class="img">
 <img src="images/user.png" />
 <div class="label">Power User</div>
 </li>
 </ul>
 <ul class="switcher jQ_sliderSwitch">
 <li class="active"><a href=""></a></li>
 <li><a href=""></a></li>
 <li><a href=""></a></li>
 <li><a href=""></a></li>
 <li><a href=""></a></li>
 </ul>
 </div>
 </div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

위 내용은 애니메이션 효과가 포함된 jquery 슬라이드쇼 특수 효과 코드입니다. 마음에 드셨으면 좋겠습니다.

성명：

이전 기사：json jQuery_jquery로 구현된 무한 트리 메뉴 효과 코드다음 기사：json jQuery_jquery로 구현된 무한 트리 메뉴 효과 코드

jquery 이미지 기울기 계단식 전환 특수 효과 코드 공유_jquery

관련 기사