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 相关文章推荐
Javascript操纵Cookie实现购物车程序
Nov 23 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
微信小程序 标签传入数据
May 08 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
如何利用js在两个html窗口间通信
Apr 27 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
PHP5中MVC结构学习
2006/10/09 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
js加解密 脚本解密
2008/02/22 Javascript
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
Js 中debug方式
2010/02/07 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
前端开发基础javaScript的六大作用
2020/08/06 Javascript
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
python调用摄像头显示图像的实例
2018/08/03 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
高级方案规划工程师岗位职责
2013/11/29 职场文书
护士岗位职责
2014/02/16 职场文书
工程承包协议书
2014/04/22 职场文书
操行评语大全
2014/04/30 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技