快捷導(dǎo)航

jquery帶動(dòng)畫效果幻燈片特效代碼

更新時(shí)間：2015年08月27日 14:43:16 投稿：lijiao

這篇文章主要介紹了jquery帶動(dòng)畫效果幻燈片特效，推薦給大家，有需要的小伙伴可以參考下。

本文實(shí)例講述了jquery帶動(dòng)畫效果幻燈片插件devrama.slider。分享給大家供大家參考。具體如下：
jquery帶動(dòng)畫效果幻燈片插件devrama.slider是一款可以在焦點(diǎn)圖中嵌入html內(nèi)容和文字動(dòng)畫效果，運(yùn)行時(shí)可出現(xiàn)圖文層疊顯示效果，且圖片下方伴有進(jìn)度條效果。
運(yùn)行效果圖： -------------------查看效果下載源碼-------------------

小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。
為大家分享的jquery帶動(dòng)畫效果幻燈片特效代碼如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery帶動(dòng)畫效果幻燈片插件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>
<!-- 代碼 結(jié)束 -->
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

以上就是為大家分享的jquery帶動(dòng)畫效果幻燈片特效代碼，希望大家可以喜歡。

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)區(qū)域打印功能代碼詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)區(qū)域打印功能代碼詳解的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
jquery ajax后臺(tái)返回list,前臺(tái)用jquery遍歷list的實(shí)現(xiàn)
下面小編就為大家?guī)硪黄猨query ajax后臺(tái)返回list,前臺(tái)用jquery遍歷list的實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10
JQuery 獲取和設(shè)置Select選項(xiàng)的代碼
JQuery獲取和設(shè)置Select選項(xiàng)
2010-02-02
jquery中$(#form :input)與$(#form input)的區(qū)別
本節(jié)為大家介紹下jquery 中$(#form :input)與$(#form input)的區(qū)別,需要的朋友可以參考下
2014-08-08
jQuery操作表格（table）的常用方法、技巧匯總
雖然現(xiàn)在DIV+CSS進(jìn)行頁(yè)的布局大行其道，但是很多地方使用table還是有很多優(yōu)勢(shì)，用table展示數(shù)據(jù)是比較方便的，下面匯總了jQuery操作Table tr td常用的方法，熟記這些操作技巧，下次再使用的到時(shí)候，會(huì)讓你如魚得水，提高開發(fā)效率
2014-04-04
jqPaginator結(jié)合express實(shí)現(xiàn)分頁(yè)展示內(nèi)容效果
這篇文章主要為大家詳細(xì)介紹了jqPaginator結(jié)合express實(shí)現(xiàn)分頁(yè)展示內(nèi)容效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
Jquery實(shí)現(xiàn)圖片預(yù)加載與延時(shí)加載的方法
這篇文章主要介紹了Jquery實(shí)現(xiàn)圖片預(yù)加載與延時(shí)加載的方法,分別介紹了原生javascript與jQuery插件實(shí)現(xiàn)圖片的預(yù)加載及延遲加載的方法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
jQuery層級(jí)選擇器_動(dòng)力節(jié)點(diǎn)節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery層級(jí)選擇器的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
jquery實(shí)現(xiàn)帶縮略圖的全屏圖片畫廊效果實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)帶縮略圖的全屏圖片畫廊效果,實(shí)例分析了jquery帶縮略圖的全屏效果圖片實(shí)現(xiàn)技巧,并附有完整的源碼下載,需要的朋友可以參考下
2015-06-06
bootstrap data與jquery .data
最近在做項(xiàng)目的時(shí)候用到了bootstrap，在使用中發(fā)現(xiàn)其data與jquery的data有些不一樣的地方，記錄一下，分享給大家
2014-07-07