kod kesan khas tayangan slaid jquery dengan effect_jquery animasi-tutorial js-php.cn

kod kesan khas tayangan slaid jquery dengan effect_jquery animasi

WBOY

Lepaskan： 2016-05-16 15:42:12

asal

1247 orang telah melayarinya

Contoh dalam artikel ini menerangkan pemalam tayangan slaid jquery devrama.slider dengan kesan animasi. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Pemalam tayangan slaid jquery devrama.slider dengan kesan animasi boleh membenamkan kandungan HTML dan kesan animasi teks dalam imej fokus Apabila berjalan, kesan paparan berlatarkan grafik dan teks boleh muncul, dan terdapat kesan bar kemajuan di bawah gambar.
运行效果图： -------------------查看效果下载源-码--

Petua: Jika penyemak imbas tidak berfungsi dengan betul, anda boleh cuba menukar mod penyemakan imbas.

Kod kesan khas tayangan slaid jquery dengan kesan animasi yang dikongsi dengan anda adalah seperti berikut

<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>

Salin selepas log masuk

Di atas ialah kod kesan khas tayangan slaid jquery dengan kesan animasi yang dikongsi dengan anda.