今天分享一款 jquery 插件——图片前后对比（beforeAfter），效果如下：

使用方法：

<!DOCTYPE HTML>

<html lang="en">

<head>

    <meta charset="utf-8"/>

    <title>图片前后对比</title>

</head>

<body>

    <div class="beforeafter">

        <img src="data:images/before.jpg" alt="before" height="420" width="748"/>

        <img src="data: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

注意：

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

demo：点此下载

官网地址：http://www.catchmyfame.com/catchmyfame-jquery-plugins/jquery-beforeafter-plugin/

【jquery】图片前后对比效果——beforeAfter的更多相关文章

  1. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  2. 适应手机端的jQuery图片滑块动画DEMO演示

    在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  3. 精心挑选10款优秀的 jQuery 图片左右滚动插件

    在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...

  4. Cropper – 简单的 jQuery 图片裁剪插件

    Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...

  5. 美女jquery图片播放器插件

    相册在线查看http://keleyi.com/keleyi/phtml/image/6.htm 可全屏,可拖动,可自动播放的jquery图片展示插件 使用说明:1.引用css文件:<link ...

  6. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  7. jQuery图片旋转展示收缩效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 我利用网上代码开发的JQuery图片插件

    我利用网上代码开发的JQuery图片插件 代码如下 (function($){ $.fn.FocusPic = function(options){ var defaults = { interval ...

  9. 分享22款响应式的 jQuery 图片滑块插件

    响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...

随机推荐

  1. mybatis 框架动态传入参数${}和#{}之间的区别

    动态SQL是mybatis的强大特性之一,mybatis在对sql语句进行预编译之前,会对sql进行动态解析,解析为一个BoundSql对象,也是在此处对动态sql进行处理.下面让我们先来熟悉下myb ...

  2. tmux使用及配置

    这篇博客跟以前的vim配置一样,都是为了以后本人自己方便备份的tmux配置文件 0.安装 centos默认自带的软件是screen,没有带tmux,所以需要源代码安装 get clone http:/ ...

  3. android studio - Manifest merger failed with multiple errors, see logs

    今天编译运行的时候遇到了“Error:Execution failed for task ':test:processDebugManifest'.> Manifest merger faile ...

  4. Java数据库连接池实现原理

    一般来说,Java应用程序访问数据库的过程是: 装载数据库驱动程序: 通过jdbc建立数据库连接: 访问数据库,执行sql语句: 断开数据库连接. public class DBConnection ...

  5. linux命令（44）:sed，vim；去掉文件中的^M 符号，去掉行首空格和制表符

    注:下面的直接粘贴会出错,要重新输入^M 如何输入^M,先 ctrl+v,然后 ctrl+m 第一种方法: cat -A filename 就可以看到windows下的断元字符 ^M要去除他,最简单用 ...

  6. Frick'ing Terrain Mesh!

    CDLOD地形的实现方法步骤: 1.实现完全二叉树结构的创建2.实现完全四叉树的视锥裁剪与LOD选择(包括节点的部分选择功能)3.使用forward rendering, 实现已选择四叉树节点的普通渲 ...

  7. 【转】（五）unity4.6Ugui中文教程文档-------概要-UGUI Interaction Components

    原创至上,移步请戳:(五)unity4.6Ugui中文教程文档-------概要-UGUI Interaction Components 4.Interaction Components 本节涵盖了处 ...

  8. 【教程】ubuntu下安装NFS服务器

    安装 NFS server mystery@lcw:~$ sudo apt-get install nfs-kernel-server  编辑/etc/exports,添加目标系统的根文件系统映射目录 ...

  9. 将本地代码同步到远程github上

    1.在本地文件夹下建立.gitignore文件,将github下的github/gitignore/Node.gitignore文件复制到.gitignore中: 2.执行命令git add . 3. ...

  10. 设计模式之工厂方法模式（代码用Objective-C展示）

    前面一篇展示了一个简单工厂模式,这一篇主要是对比,工厂方法模式比简单工厂模式好在哪里?为什么要用这个模式?这个模式的精髓在哪里? 就以计算器为例,结果图如下: 加减乘除运算都是继承自基类运算类,然后工 ...