집 > 기사 > 웹 프론트엔드 > jquery 슬라이드쇼 특수 효과 코드(애니메이션 포함) effect_jquery

jquery 슬라이드쇼 특수 효과 코드(애니메이션 포함) effect_jquery

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

이 기사의 예에서는 애니메이션 효과가 있는 jquery 슬라이드쇼 플러그인 devrama.slider를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
애니메이션 효과가 있는 jquery 슬라이드쇼 플러그인 devrama.slider는 HTML 콘텐츠와 텍스트 애니메이션 효과를 초점 이미지에 포함할 수 있습니다. 실행 시 그래픽과 텍스트의 계단식 표시 효과가 나타날 수 있으며 그림 아래에 진행률 표시줄 효과가 있습니다.
运行效果图： ------查看效果下载源码------------ --------

팁: 브라우저가 제대로 작동하지 않으면 탐색 모드를 전환해 보세요.
여러분과 공유한 애니메이션 효과가 포함된 jquery 슬라이드쇼 특수 효과 코드는 다음과 같습니다

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery带动画效果幻灯片插件devrama.slider</title>
<link rel="stylesheet" href="css/lrtk.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.devrama.slider.js"></script>
<style type="text/css">
 .example-animation {
 color: #FFF;
 font-size: 60px;
 }
</style>
</head>
<body>
<!-- 代码 开始 -->
<div class="example-animation">
 <div data-lazy-background="images/1.jpg">
 <h3 data-pos="['0%', '110%', '0%', '5%']" data-duration="700" data-effect="move">
 Moving
 </h3>
 <div data-pos="['-30%', '25%', '40%', '25%']" data-duration="700" data-effect="move">
 Text
 </div>
 <div data-pos="['56%', '-40%', '56%', '11%']" data-duration="700" data-effect="move">
 and Image
 </div>
 <div data-pos="['23%', '110%', '23%', '42%']" data-duration="700" data-effect="move">
 <img data-lazy-src="images/add.jpg"/>
 </div>
 </div>
 <div data-lazy-background="images/2.jpg">
 <h3 data-pos="['0%', '8%']" data-duration="1000" data-effect="fadein">
 Fadein
 </h3>
 <div data-pos="['44%', '15%']" data-duration="700" data-effect="fadein">
 Text
 </div>
 <div data-pos="['66%', '11%']" data-duration="700" data-effect="fadein">
 and Image
 </div>
 <div data-pos="['29%', '46%']" data-duration="700" data-delay="500" data-effect="fadein">
 <img data-lazy-src="images/add.jpg"/>
 </div>
 </div> 
</div>
<script type="text/javascript">
$(document).ready(function(){
 $('.example-animation').DrSlider(); //Yes! that's it!
});
</script>
<!-- 代码 结束 -->
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

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

성명：

이전 기사：js_javascript 기술로 구현된 초기 슬라이딩 도어 메뉴 효과 코드다음 기사：js_javascript 기술로 구현된 초기 슬라이딩 도어 메뉴 효과 코드

jquery 슬라이드쇼 특수 효과 코드(애니메이션 포함) effect_jquery

관련 기사