recherche

Maison >interface Web >js tutoriel >Code d'effets spéciaux du diaporama jquery avec animation effect_jquery

Code d'effets spéciaux du diaporama jquery avec animation effect_jquery

WBOY
WBOYoriginal
2016-05-16 15:42:121252parcourir

L'exemple de cet article décrit le plug-in jquery slideshow devrama.slider avec des effets d'animation. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Le plug-in de diaporama jquery devrama.slider avec des effets d'animation peut intégrer du contenu HTML et des effets d'animation de texte dans l'image ciblée. Lors de l'exécution, un effet d'affichage en cascade de graphiques et de texte peut apparaître, et il y a un effet de barre de progression sous l'image.
运行效果图：                                 -------------------查看效果 下载源码----------- ---------

Conseils : Si le navigateur ne fonctionne pas correctement, vous pouvez essayer de changer de mode de navigation.
Le code des effets spéciaux du diaporama jquery avec effet d'animation partagé avec vous est le suivant 

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

Ce qui précède est le code d'effet spécial du diaporama jquery avec effet d'animation partagé avec vous.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Code d'effet de menu de porte coulissante précoce implémenté dans les compétences js_javascriptArticle suivant：Code d'effet de menu de porte coulissante précoce implémenté dans les compétences js_javascript

Articles Liés

Voir plus