ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryスライドショーアニメーション付き特殊効果コードeffect_jquery
jqueryスライドショーアニメーション付き特殊効果コードeffect_jquery
- WBOYオリジナル
- 2016-05-16 15:42:121266ブラウズ
この記事の例では、アニメーション効果を備えた 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 スライドショー特殊効果コードです。気に入っていただければ幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。