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中的16进制字符(改进)
Nov 21 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
Aug 20 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
vue组件系列之TagsInput详解
May 14 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
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 图片上传实现代码 带详细注释
2010/04/29 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
node.js 中国天气预报 简单实现
2016/06/06 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
2017/02/02 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
Windows下PyMongo下载及安装教程
2015/04/27 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
Python2与Python3的区别点整理
2019/12/12 Python
Python远程linux执行命令实现
2020/11/11 Python
pytorch中index_select()的用法详解
2021/01/06 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
文明教师事迹材料
2014/01/16 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
nginx服务器的下载安装与使用详解
2021/08/02 Servers
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL