【jquery】图片前后对比效果——beforeAfter
今天分享一款 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的更多相关文章
- 推荐几款jquery图片切换插件
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
- 适应手机端的jQuery图片滑块动画DEMO演示
在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- 精心挑选10款优秀的 jQuery 图片左右滚动插件
在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
- 美女jquery图片播放器插件
相册在线查看http://keleyi.com/keleyi/phtml/image/6.htm 可全屏,可拖动,可自动播放的jquery图片展示插件 使用说明:1.引用css文件:<link ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- jQuery图片旋转展示收缩效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 我利用网上代码开发的JQuery图片插件
我利用网上代码开发的JQuery图片插件 代码如下 (function($){ $.fn.FocusPic = function(options){ var defaults = { interval ...
- 分享22款响应式的 jQuery 图片滑块插件
响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...
随机推荐
- dd-wrt 中继配置
本配置方法在tp-link 703n v1.6上应用成功 1.首先把703n刷成dd-wrt.这里我刷的是 DD-WRT v24-sp2 (03/15/12) std版本,要刷两个固件,一个facto ...
- unity, 2d rope
https://www.youtube.com/watch?v=l6awvCT29yU
- logstash 如何处理 mongodb 导出来的 _id value数据。 how to custom fields of logstash by mongo mapreduce exported data.(example format: {_id:"xxx"} , value:{})
input { file { path => "c:\aa.json" start_position => "beginning" #sincedb ...
- tomcat重启步骤
tomcat重启步骤1.切换到tomcat目录cd /home/tomcat-home/tomcat-erp/bin2.关闭tomcatsh shutdown.sh3.启动tomcatsh start ...
- css冻结列的效果
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8&quo ...
- 启动 angular-phonecat 项目时出现这玩意 。('The header content contains invalid characters');
最近学习angular, 跟着视频做一个动作,启动 “ angular-phonecat ” 这个项目 敲入 “npm start ” 启动没有问题,但是 "http://localhost ...
- Linux重启命令与如何重启网络?
分享下Linux重启命令的用法,linux如何重启网络的方法? 第一部分,有关Linux重启命令的用法 1.shutdown2.poweroff3.init4.reboot5.halt *---具体说 ...
- IOS UIView自动调整尺寸
自动尺寸调整行为 当您改变视图的边框矩形时,其内嵌子视图的位置和尺寸往往也需要改变,以适应原始视图的新尺寸.如果视图的autoresizesSubviews属性声明被设置为YES,则其子视图会根据au ...
- Xilinx FPGA 的PCIE 设计
写在前面 近两年来和几个单位接触下来,发现PCIe还是一个比较常用的,有些难度的案例,主要是涉及面比较广,需要了解逻辑设计.高速总线.Linux和Windows的驱动设计等相关知识. 这篇文章主要针对 ...
- OVAL学习笔记
很多其它好文章:http://blog.csdn.net/aap159951/article/details/51131937 OVAL由MITRE公司开发.是一 ...