本文實例講述了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帶動畫效果幻燈片特效代碼，希望大家可以喜歡。
新聞熱點
疑難解答
