今天分享一款 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. 更新django到2.x

    django-2.x 已经发布了.想体验一下它的新功能.于是把之前电脑上的django-1.11.7uninstall 掉 一.卸载django-1.11.7: pip3 uninstall djan ...

  2. iphone5 jail break

    dfu恢复恢复备份越狱afc2add删除2个文件,如果只有1个也没问题/var/mobile/Library/Caches/com.apple.mobile.installation.plist/va ...

  3. PHP实现JS的无符号右移(>>>)

    举例: JS: 5>>>2 PHP function uright($a, $n) { $c = 2147483647 >> ($n - 1); return $c &a ...

  4. mysql打开binlog

    修改mysql的配置文件,ubuntu下mysql的配置文件存放位置为:/etc/mysql/my.cnf 找到log_bin配置项,指定一个路径: 重启数据库:/etc/init.d/mysql r ...

  5. android AlertDialog设置点击button不退出(转)

    转载于http://blog.csdn.net/csh159/article/details/8127280 使用的是java里面的反射机制: dialog = new AlertDialog.Bui ...

  6. Java常考面试题(二)

    序言 昨天刚开始的”每日5题面试“这类文章,感觉还不错,把一些平常看似懂了的东西,弄清楚了.就像什么是虚拟机?这个问题,看起来知道,但是要说出个所以然来,又懵逼了,经常回过头来看看做过的面试题,试着用 ...

  7. rpm 安装zabbix 注意

    # grep zabbix /etc/sudoers zabbix ALL=(ALL) NOPASSWD: /sbin/blockdev

  8. Machine Learning Library (MLlib) Guide, BOOKS

    download.microsoft.com/download/0/9/6/096170E9-23A2.../9780735698178.pdf   Microsoft Azure Essential ...

  9. mysql创建唯一索引

    查看索引  show index from 数据库表名 alter table 数据库add index 索引名称(数据库字段名称) PRIMARY KEY(主键索引) ALTER TABLE `ta ...

  10. C#之Console

    Console.Write  表示向控制台直接写入字符串,不进行换行,可继续接着前面的字符写入.Console.WriteLine  表示向控制台写入字符串后换行.Console.Read 表示从控制 ...