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


Posted in Javascript onAugust 27, 2015

本文实例讲述了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 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带动画效果幻灯片特效代码,希望大家可以喜欢。

Javascript 相关文章推荐
wordpress之js库集合研究介绍
Aug 17 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
javascript中判断json的方法总结
Aug 27 #Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 #Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 #Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 #Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 #Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 #Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 #Javascript
You might like
php下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
PHP5函数小全(分享)
2013/06/06 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
php实现购物车功能(上)
2020/07/23 PHP
PHP数组实例详解
2016/06/26 PHP
PHP实现简易blog的制作
2016/10/24 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
替换python字典中的key值方法
2018/07/06 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
python制作填词游戏步骤详解
2019/05/05 Python
幼儿园教师考核制度
2014/02/01 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
医院党建工作总结2015
2015/05/26 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
Android自定义双向滑动控件
2022/04/19 Java/Android