首页

源码搜藏网

首页 > 网页特效 > 焦点图 >

jquery特效带动画效果幻灯片插件

创建时间:2014-09-23 09:49  

jquery特效带动画效果幻灯片插件
jquery特效带动画效果幻灯片插件
效果预览 立即下载
jquery特效带动画效果幻灯片插件jquery带动画效果幻灯片插件devrama.slider是一款可以在焦点图中嵌入html内容和文字动画效果。jquery动画效果图文结合左右箭头 所属专题:幻灯片代码

<!-- 代码 开始 -->
<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>
<!-- 代码 结束 -->
上一篇:jquery特效实现京东商城首页焦点图
下一篇:jQuery全屏3D旋转木马焦点图

相关内容

热门推荐