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 相关文章推荐
jQuery中contents()方法用法实例
Jan 08 Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
jquery append与appendTo方法比较
May 24 jQuery
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
JS实现滑动插件
Jan 15 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 Javascript
Vue快速实现通用表单验证的方法
Feb 24 Javascript
JS删除对象中某一属性案例详解
Sep 08 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中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
php实现httpclient类示例
2014/04/08 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
numpy.array 操作使用简单总结
2019/11/08 Python
python连接mongodb集群方法详解
2020/02/13 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
干部考核评语
2014/04/29 职场文书
文明班集体申报材料
2014/05/23 职场文书
企业承诺书怎么写
2014/05/24 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
施工安全保证书
2015/05/09 职场文书
公司职员入党自传书
2015/06/26 职场文书
酒店温馨提示语
2015/07/14 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python