jQuery實(shí)現(xiàn)的原圖對(duì)比窗簾效果
更新時(shí)間：2014年06月15日 15:58:22 投稿：whsnow
這篇文章主要介紹了jQuery實(shí)現(xiàn)的原圖對(duì)比窗簾效果,需要的朋友可以參考下
效果：
HTML代碼：
<div class="vfx-image-wrap special">
<div class="before-image" style="width: 50%; transition: all 0.3s ease 0s;">
<img alt="" src="js/VFX-before.jpg">
</div>
<div class="after-image">
<img alt="" src="js/VFX-after.jpg">
</div>
<div class="divider-bar" style="left: 50%; transition: all 0.3s ease 0s;"></div>
</div>
JS代碼：
$(function () {
//外DIV
var imageWrap = $('.vfx-image-wrap'),
//前景圖
topImage = $(this).find('.before-image'),
//分割線
divider = $(this).find('.divider-bar'),
stayBounce = $('.toggle-function');
imageWrap.on("mousemove", function (e) {
// Gotta localize top image and divider so it only applies to this
var offsets = $(this).offset(),
fullWidth = $(this).width(),
mouseX = e.pageX - offsets.left,
topImage = $(this).find('.before-image'),
divider = $(this).find('.divider-bar');
if (mouseX < 0) {
mouseX = 0;
} else if (mouseX > fullWidth) {
mouseX = fullWidth
}
$(this).addClass('special');
divider.css({ left: mouseX, transition: 'none' });
topImage.css({ width: mouseX, transition: 'none' });
});
stayBounce.click(function(){
$(this).toggleClass('stay');
});
imageWrap.on("mouseleave", function () {
if (!stayBounce.hasClass('stay')) {
divider.css({ left: '50%', transition: 'all .3s' });
topImage.css({ width: '50%', transition: 'all .3s' });
}
});
});
HTML代碼：
復(fù)制代碼 代碼如下:
<div class="vfx-image-wrap special">
<div class="before-image" style="width: 50%; transition: all 0.3s ease 0s;">
<img alt="" src="js/VFX-before.jpg">
</div>
<div class="after-image">
<img alt="" src="js/VFX-after.jpg">
</div>
<div class="divider-bar" style="left: 50%; transition: all 0.3s ease 0s;"></div>
</div>
JS代碼：
復(fù)制代碼 代碼如下:
$(function () {
//外DIV
var imageWrap = $('.vfx-image-wrap'),
//前景圖
topImage = $(this).find('.before-image'),
//分割線
divider = $(this).find('.divider-bar'),
stayBounce = $('.toggle-function');
imageWrap.on("mousemove", function (e) {
// Gotta localize top image and divider so it only applies to this
var offsets = $(this).offset(),
fullWidth = $(this).width(),
mouseX = e.pageX - offsets.left,
topImage = $(this).find('.before-image'),
divider = $(this).find('.divider-bar');
if (mouseX < 0) {
mouseX = 0;
} else if (mouseX > fullWidth) {
mouseX = fullWidth
}
$(this).addClass('special');
divider.css({ left: mouseX, transition: 'none' });
topImage.css({ width: mouseX, transition: 'none' });
});
stayBounce.click(function(){
$(this).toggleClass('stay');
});
imageWrap.on("mouseleave", function () {
if (!stayBounce.hasClass('stay')) {
divider.css({ left: '50%', transition: 'all .3s' });
topImage.css({ width: '50%', transition: 'all .3s' });
}
});
});
相關(guān)文章
這篇文章主要介紹了jquery日歷控件實(shí)現(xiàn)方法，網(wǎng)上有好多這樣的插件，下面是自己實(shí)現(xiàn)的一個(gè)方法,需要的朋友可以參考下2014-03-03
jquery中checkbox使用方法簡(jiǎn)單實(shí)例演示
這篇文章主要介紹了jquery中checkbox使用方法簡(jiǎn)單實(shí)例演示，感興趣的小伙伴們可以參考一下2015-11-11
jQuery插件簡(jiǎn)單學(xué)習(xí)實(shí)例教程
這篇文章主要介紹了jQuery插件的簡(jiǎn)單用法,列舉了分頁(yè)插件、放大鏡插件、自動(dòng)完成插件、上傳插件、日歷插件等的簡(jiǎn)單使用方法,需要的朋友可以參考下2016-07-07
jQuery的寫(xiě)法不同導(dǎo)致的兼容性問(wèn)題的解決方法
今天用jQuery操作table時(shí)，出現(xiàn)了一個(gè)兼容性的問(wèn)題，以前都說(shuō)jQuery的兼容性是絕對(duì)可靠的，今天發(fā)現(xiàn)了這個(gè)bug！2010-07-07
jquery實(shí)現(xiàn)企業(yè)定位式導(dǎo)航效果
這篇文章主要介紹了jquery實(shí)現(xiàn)企業(yè)定位式導(dǎo)航效果2018-01-01
基于jQuery實(shí)現(xiàn)文字打印動(dòng)態(tài)效果
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)文字打印動(dòng)態(tài)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
在一個(gè)客戶(hù)的case中遇到需要在SharePoint Calendar試圖里面根據(jù)一定的規(guī)則來(lái)顯示或者隱藏記錄，為了取得記錄的handle，可以通過(guò)超鏈接選擇器來(lái)查找2011-05-05
jQuery響應(yīng)enter鍵的實(shí)現(xiàn)思路
當(dāng)用戶(hù)在表單里數(shù)據(jù)完數(shù)據(jù)后，之間按enter鍵就可以執(zhí)行查詢(xún)或者保存的操作。實(shí)現(xiàn)的思路如下2014-04-04
jquery基于layui實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)下拉選擇(省份城市選擇)
本篇文章主要介紹了jquery基于layui實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)下拉選擇(省份城市選擇)，具有一定的實(shí)用價(jià)值，需要的朋友可以參考下2017-06-06
jQuery頁(yè)面刷新(局部、全部)問(wèn)題分析
這篇文章主要針對(duì)jQuery頁(yè)面刷新問(wèn)題為大家進(jìn)行詳細(xì)分析，包括局部刷新、全部刷新，感興趣的朋友可以參考一下2016-01-01