快捷導(dǎo)航

jquery插件jquery.beforeafter.js實(shí)現(xiàn)左右拖拽分隔條對(duì)比圖片的方法

更新時(shí)間：2015年08月07日 17:13:31 作者：皮蛋

這篇文章主要介紹了jquery插件jquery.beforeafter.js實(shí)現(xiàn)左右拖拽分隔條對(duì)比圖片的方法,可實(shí)現(xiàn)圖片拖拽變換的功能,需要的朋友可以參考下

本文實(shí)例講述了jquery插件jquery.beforeafter.js實(shí)現(xiàn)左右拖拽分隔條對(duì)比圖片的方法。分享給大家供大家參考。具體如下：

左右拖拽切換對(duì)比圖片效果，運(yùn)行效果后，圖片中間有個(gè)拖動(dòng)條，拖動(dòng)左右滑動(dòng)，可看到圖片不一樣的效果，女模特的臉變嫩了，呵呵，其實(shí)是用了兩張背景圖片實(shí)現(xiàn)的，這就需要jquery.beforeafter.js插件了，拖動(dòng)時(shí)候的小圖標(biāo)不見(jiàn)了，路徑可以在jquery.beforeafter.js中設(shè)置，不多說(shuō)了。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/jquery-beforeafter-js-style-codes/

具體代碼如下：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通過(guò)拖拽展示前后圖片對(duì)比效果的jQuery插件jquery.beforeafter</title>
<script type="text/javascript" src="js/jquery-1.6.2.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.3.min.js"></script>
<script type="text/javascript">
$(function(){
  $('#container').beforeAfter({imagePath:'js/'});
  $('#container1').beforeAfter({imagePath:'js/'});
  $('#container2').beforeAfter({imagePath:'js/'});
  $('#container3').beforeAfter({imagePath:'js/'});
  $('#container4').beforeAfter({imagePath:'js/'});
  $('#container5').beforeAfter({imagePath:'js/'});
  $('#container6').beforeAfter({imagePath:'js/'});
});
</script>
 <style> html{display : none ; } </style>
 <script>
 if( self == top ) {
  document.documentElement.style.display = 'block' ; 
 } else {
  top.location = self.location ; 
 }
 </script>
<style type="text/css">
body {
  background: #ccc;
}
#content {
  margin:0 auto;
  width:755px;
}
#container + div.balinks {
<!--margin-left: 200px; -->
}
</style>
</head>
<body>
<div id="content">
<div id="container3">
<div><img alt="before" src="images/blonde1_before.jpg" width="326" height="495" /></div>
<div><img alt="after" src="images/blonde1_after.jpg" width="326" height="495" /></div>
</div>
</div>
</body>
</html>

希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

基于jQuery實(shí)現(xiàn)表格數(shù)據(jù)的動(dòng)態(tài)添加與統(tǒng)計(jì)的代碼
使用jQuery可以大大減輕工作量,在實(shí)際開(kāi)發(fā)中,使用了jQuery的clone(true)函數(shù),該函數(shù)可以創(chuàng)建一個(gè)jQury對(duì)象的副本,并且參數(shù)為true時(shí),可以復(fù)制該元素的所有事件處理函數(shù)。
2011-01-01
jquery實(shí)現(xiàn)仿新浪微博帶動(dòng)畫效果彈出層代碼(可關(guān)閉、可拖動(dòng))
這篇文章主要介紹了jquery實(shí)現(xiàn)仿新浪微博帶動(dòng)畫效果彈出層代碼,具有可關(guān)閉及可拖動(dòng)的功能,涉及jQuery針對(duì)鼠標(biāo)事件的響應(yīng)及頁(yè)面元素屬性的變換功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
基于JQuery實(shí)現(xiàn)CheckBox全選全不選
做項(xiàng)目時(shí)需要實(shí)現(xiàn)CheckBox的全選，我想用JQuery實(shí)現(xiàn)，從網(wǎng)上找了找，網(wǎng)上的確有很多例子，但都不能實(shí)現(xiàn)我想要的全部效果
2011-06-06
jQuery+jqmodal彈出窗口實(shí)現(xiàn)代碼分明
jQuery+jqmodal彈出窗口的制作方法，需要的朋友可以參考下。
2010-06-06
一個(gè)超簡(jiǎn)單的jQuery回調(diào)函數(shù)例子(分享)
下面小編就為大家?guī)?lái)一篇一個(gè)超簡(jiǎn)單的jQuery回調(diào)函數(shù)例子(分享) 。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
jQuery提交多個(gè)表單的小技巧
本節(jié)主要介紹了jQuery提交多個(gè)表單的小技巧,需要的朋友可以參考下
2014-07-07
JQuery 動(dòng)態(tài)擴(kuò)展對(duì)象之另類視角
大家都知道javascript是動(dòng)態(tài)語(yǔ)言，它對(duì)動(dòng)態(tài)的支持是與身俱來(lái)的。
2010-05-05
jQuery動(dòng)態(tài)追加頁(yè)面數(shù)據(jù)以及事件委托詳解
這篇文章主要為大家詳細(xì)介紹了jQuery動(dòng)態(tài)追加頁(yè)面數(shù)據(jù)以及事件委托的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
jQuery+ajax實(shí)現(xiàn)文件上傳功能
這篇文章主要為大家詳細(xì)介紹了jQuery+ajax實(shí)現(xiàn)文件上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
jquery 撲捉回車鍵事件代碼
這篇文章主要介紹了jquery 撲捉回車鍵事件的具體實(shí)現(xiàn),需要的朋友可以參考下
2014-04-04