jquery带动画效果幻灯片特效代码

首页 > 网络编程 > JavaScript > javascript类库 > jquery 更新日期: 2016-03-31
这篇文章主要介绍了jquery带动画效果幻灯片特效,推荐给大家,有需要的小伙伴可以参考下。

本文实例讲述了jquery带动画效果幻灯片插件devrama.slider。分享给大家供大家参考。具体如下:
jquery带动画效果幻灯片插件devrama.slider是一款可以在焦点图中嵌入html内容和文字动画效果,运行时可出现图文层叠显示效果,且图片下方伴有进度条效果。
运行效果图:                                 -------------------查看效果 下载源码-------------------

jquery带动画效果幻灯片特效代码

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jquery带动画效果幻灯片特效代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery带动画效果幻灯片插件devrama.slider</title>
<link  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带动画效果幻灯片特效代码,希望大家可以喜欢。


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • jQuery实现动画效果的实例代码
    jQuery实现动画效果的实例代码,需要的朋友可以参考一下 代码如下:    <style type="text/css">       table{border:1px solid #666;}       table td{border:1px solid #eee;width:200px;height:200px;}   ...
  • jQuery基于ajax实现带动画效果无刷新柱状图投票代码
    jQuery基于ajax实现带动画效果无刷新柱状图投票代码
    这篇文章主要介绍了jQuery基于ajax实现带动画效果无刷新柱状图投票代码,通过使用jquery动态操作页面元素样式属性实现柱状图投票效果,非常具有实用价值,需要的朋友可以参考下本文实例讲述了jQuery基于ajax实现带动画效果无刷新柱状图投票代码.分享给大家供大家参考.具体如下: 这里介绍的jQuery ajax投票特效,带动画效果 类似进度条风格的柱 ...
  • 基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
    基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
    这是一款基于jQuery的弹出对话框插件,这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效,需要的朋友参考下吧这是一款基于jQuery的弹出对话框插件,这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效,比如旋转飞入.上下抖动飞入等.效果图如下: 效果演示     源码下载 html代码: <div cla ...
  • jQuery平滑旋转幻灯片特效代码分享
    jQuery平滑旋转幻灯片特效代码分享
    这篇文章主要介绍了jQuery平滑旋转幻灯片特效,一个具有自己特色的幻灯片会吸引用户的注意力,让用户产生浏览网站的兴趣至关重要,现在小编推荐给大家一款特别棒的幻灯片,感兴趣的小伙伴可以参考下.本文实例讲述了jQuery平滑旋转幻灯片特效.分享给大家供大家参考.具体如下:这一款基于jQuery实现平滑旋转幻灯片代码,效果超酷,场面相当震撼:图片大小和颜色自定义 ...
  • jQuery超精致图片轮播幻灯片特效代码分享
    jQuery超精致图片轮播幻灯片特效代码分享
    这篇文章主要介绍了jQuery超精致图片轮播幻灯片特效,图片轮播效果特别适合做产品展示,感兴趣的小伙伴可以参考下.本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下:这是一款基于jQuery实现超精致图片轮播幻灯片特效代码,实现过程很简单.运行效果图:                               ------- ...
猜你喜欢