本文通过一个例子讲述了jQuery图片在插件前后的用法。分享给大家参考，如下：

今天分享了一个jquery插件——前后的图片，效果如下：

用法：

！doctype html html lang=' en ' head meta charset=' utf-8 '/title图片前后比较/title/head body div class=' before after ' img src=' http : images/before . jpg ' alt=' before ' height=' 420 ' width=' 748 '/img src=' http : images/after . jpg ' alt=' after ' height=' 420 ' width=' 748 '/div/body/htmlbeforeafter ')。before after({ imagepath : ' images/' })；});/script参数描述(部分):

ShowFullLinks:是否显示以下链接，点击链接，会自动显示完整的正面或背面图片。默认值为真

ImagePath:导航图片的路径(绝对路径或相对路径)，指中间的绿色条和左右三角形。默认值为/js/before/after/

BeforeLinkText:设置前图下方链接的文本。默认值为“仅在之前显示”

AfterLinkText:设置图片下方链接的文字。默认值为仅在之后显示

注意：

两张图片前后尺寸必须相同。

单击此处下载完整的示例代码。

官方网站地址：

http://www . catch my frame.com/catch my frame-jquery-plugins/jquery-before-after-plugin/

更多对jQuery感兴趣的读者，请查看本网站话题：《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》、《jQuery form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery动画与特效用法总结》。

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