jQuery圖片前后對比插件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>
參數(shù)說明（部分）：
showFullLinks：是否顯示下面的鏈接，點擊鏈接，將自動顯示完整的前或后的圖片，默認(rèn)值：true
imagePath：導(dǎo)航圖片的路徑（絕對路徑或相對路徑），導(dǎo)航圖片指的是中間綠色條以及左右三角，默認(rèn)值：/js/beforeAfter/
beforeLinkText：設(shè)置前圖片下面鏈接的文字，默認(rèn)值：Show only before
afterLinkText：設(shè)置后圖片下面鏈接的文字，默認(rèn)值：Show only after
注意：
前后兩張圖片大小必須一致。
完整實例代碼點擊此處本站下載。
官網(wǎng)地址：
http://www.catchmyfame.com/catchmyfame-jquery-plugins/jquery-beforeafter-plugin/
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery form操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- jquery?追加元素append、prepend、before、after用法與區(qū)別分析
- jQuery 追加元素的方法如append、prepend、before
- jQuery中append、insertBefore、after與insertAfter的簡單用法與注意事項
- jQuery使用before()和after()在元素前后添加內(nèi)容的方法
- jQuery中的insertBefore(),insertAfter(),after(),before()區(qū)別介紹
- jQuery插入節(jié)點和移動節(jié)點用法示例(insertAfter、insertBefore方法)
- jquery插件jquery.beforeafter.js實現(xiàn)左右拖拽分隔條對比圖片的方法
- 解決jQuery使用append添加的元素事件無效的問題
- jquery append與appendTo方法比較
- jQuery使用prepend()方法在元素前添加內(nèi)容用法實例
- jQuery添加新內(nèi)容的四個常用方法分析【append，prepend，after，before】
相關(guān)文章
jquery無法為動態(tài)生成的元素添加點擊事件的解決方法(推薦)
下面小編就為大家?guī)硪黄猨query無法為動態(tài)生成的元素添加點擊事件的解決方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-12-12
相信大部份人都會把這2個的用法搞錯。仔細(xì)查看下API文檔就可以知道。eq返回的是一個jquery對象，get返回的是一個html 對象數(shù)組。2011-04-04
在很多時候，JQuery的$()函數(shù)都返回一個類似數(shù)據(jù)的JQuery對象，例如$(‘div’)將返回div里面的所有div元素包裝的JQuery對象。在這種情況下，JQuery提供了幾個常用的屬性和方法來操作JQuery對象。本文將對此進(jìn)行介紹，下面跟著小編一起來看下吧2016-12-12
jquery實現(xiàn)實時改變網(wǎng)頁字體大小、字體背景色和顏色的方法
這篇文章主要介紹了jquery實現(xiàn)實時改變網(wǎng)頁字體大小、字體背景色和顏色的方法,涉及jquery使用css方法動態(tài)操作頁面元素樣式的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。這篇文章主要介紹了基于jQuery的ajax方法封裝的相關(guān)資料,需要的朋友可以參考下2016-07-07
jQuery contains過濾器實現(xiàn)精確匹配使用方法
contains 選擇器選取包含指定字符串的元素。該字符串可以是直接包含在元素中的文本，或者被包含于子元素中。經(jīng)常與其他元素/選擇器一起使用，來選擇指定的組中包含指定文本的元素2013-04-04
jQuery插件expander實現(xiàn)圖片翻轉(zhuǎn)特效
本文給大家分享的是一款基于jQuery插件expander實現(xiàn)圖片翻轉(zhuǎn)特效，一共有6種不同的圖片翻轉(zhuǎn)樣式，十分的炫酷，有需要的小伙伴可以參考下。2015-05-05
這篇文章主要介紹了jQuery源碼解讀之removeAttr()方法分析,較為詳細(xì)的分析了removeAttr方法的實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了jQuery 獲取多選框的值及多選框中文的函數(shù)的相關(guān)資料,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了jQuery實現(xiàn)的圖片分組切換焦點圖插件,效果非常棒，而且很實用，推薦給有需要的小伙伴。2015-01-01