jQuery实现的原图对比窗帘效果


Posted in Javascript onJune 15, 2014

效果:
jQuery实现的原图对比窗帘效果 
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' }); 
} 
}); 
});
Javascript 相关文章推荐
JS event使用方法详解
Apr 28 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
详解JavaScript 的变量
Mar 08 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 #Javascript
js中通过父级进行查找定位元素
Jun 15 #Javascript
js判断浏览器类型为ie6时不执行
Jun 15 #Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 #Javascript
javascript 寻找错误方法整理
Jun 15 #Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 #Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 #Javascript
You might like
用 PHP5 轻松解析 XML
2006/12/04 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
Python并发:多线程与多进程的详解
2019/01/24 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
python多进程并行代码实例
2019/09/30 Python
Python绘图实现显示中文
2019/12/04 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
计算机应届毕业生自荐信范文
2014/02/23 职场文书
检查接待方案
2014/02/27 职场文书
在职员工证明书
2014/09/19 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android