jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】


Posted in Javascript onSeptember 20, 2016

本文实例讲述了jQuery图片前后对比插件beforeAfter用法。分享给大家供大家参考,具体如下:

今天分享一款 jquery 插件——图片前后对比(beforeAfter),效果如下:

jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】

使用方法:

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>图片前后对比</title>
</head>
<body>
  <div class="beforeafter">
    <img src="images/before.jpg" alt="before" height="420" width="748"/>
    <img src="images/after.jpg" alt="after" height="420" width="748"/>
  </div>
</body>
</html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.beforeafter-1.4.js"></script>
<script type="text/javascript">
$(function(){
  $('.beforeafter').beforeAfter({
    imagePath: 'images/'
  });
});
</script>

参数说明(部分):

showFullLinks:是否显示下面的链接,点击链接,将自动显示完整的前或后的图片,默认值:true

imagePath:导航图片的路径(绝对路径或相对路径),导航图片指的是中间绿色条以及左右三角,默认值:/js/beforeAfter/

beforeLinkText:设置前图片下面链接的文字,默认值:Show only before

afterLinkText:设置后图片下面链接的文字,默认值:Show only after

注意:

前后两张图片大小必须一致。

完整实例代码点击此处本站下载

官网地址:

http://www.catchmyfame.com/catchmyfame-jquery-plugins/jquery-beforeafter-plugin/

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
webpack+vue.js快速入门教程
Oct 12 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
JavaScript的一些小技巧分享
Jan 06 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 #Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 #Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 #Javascript
原生js实现ajax方法(超简单)
Sep 20 #Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 #Javascript
原生js封装的一些jquery方法(详解)
Sep 20 #Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 #Javascript
You might like
关于PHP中的Class的几点个人看法
2006/10/09 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
3种php生成唯一id的方法
2015/11/23 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
js禁止回车提交表单的示例代码
2013/12/23 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
Python实现Kmeans聚类算法
2020/06/10 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
浅谈html5 响应式布局
2014/12/24 HTML / CSS
某公司部分笔试题
2013/11/05 面试题
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
《搭石》教学反思
2014/04/07 职场文书
淘宝店策划方案
2014/06/07 职场文书
学习十八大标语
2014/10/09 职场文书
劳动模范获奖感言
2015/07/31 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书