jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】

更新时间：2016年09月20日 14:46:21 作者：朱羽佳

这篇文章主要介绍了jQuery图片前后对比插件beforeAfter用法,结合实例形式分析了beforeAfter插件的功能、参数用法与使用技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下

本文实例讲述了jQuery图片前后对比插件beforeAfter用法。分享给大家供大家参考，具体如下：

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

使用方法：

<!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相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》、《jQuery form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
下面小编就为大家带来一篇jquery无法为动态生成的元素添加点击事件的解决方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
2016-12-12
jquery中eq和get的区别与使用方法
相信大部份人都会把这2个的用法搞错。仔细查看下API文档就可以知道。eq返回的是一个jquery对象，get返回的是一个html 对象数组。
2011-04-04
浅谈jQuery操作类数组的工具方法
在很多时候，JQuery的$()函数都返回一个类似数据的JQuery对象，例如$(‘div’)将返回div里面的所有div元素包装的JQuery对象。在这种情况下，JQuery提供了几个常用的属性和方法来操作JQuery对象。本文将对此进行介绍，下面跟着小编一起来看下吧
2016-12-12
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
这篇文章主要介绍了jquery实现实时改变网页字体大小、字体背景色和颜色的方法,涉及jquery使用css方法动态操作页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
基于jQuery的ajax方法封装
AJAX 是一种用于创建快速动态网页的技术。这篇文章主要介绍了基于jQuery的ajax方法封装的相关资料,需要的朋友可以参考下
2016-07-07
jQuery contains过滤器实现精确匹配使用方法
contains 选择器选取包含指定字符串的元素。该字符串可以是直接包含在元素中的文本，或者被包含于子元素中。经常与其他元素/选择器一起使用，来选择指定的组中包含指定文本的元素
2013-04-04
jQuery插件expander实现图片翻转特效
本文给大家分享的是一款基于jQuery插件expander实现图片翻转特效，一共有6种不同的图片翻转样式，十分的炫酷，有需要的小伙伴可以参考下。
2015-05-05
jQuery源码解读之removeAttr()方法分析
这篇文章主要介绍了jQuery源码解读之removeAttr()方法分析,较为详细的分析了removeAttr方法的实现技巧,非常具有实用价值,需要的朋友可以参考下
2015-02-02
jQuery 获取多选框的值及多选框中文的函数
这篇文章主要介绍了jQuery 获取多选框的值及多选框中文的函数的相关资料,需要的朋友可以参考下
2016-05-05
jQuery实现的图片分组切换焦点图插件
这篇文章主要介绍了jQuery实现的图片分组切换焦点图插件,效果非常棒，而且很实用，推荐给有需要的小伙伴。
2015-01-01

jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具