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代码
Jul 25 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
JavaScript将数组转换为链表的方法
Feb 16 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 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
PHP的中问验证码
2006/11/25 PHP
php获得当前的脚本网址
2007/12/10 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
JQuery 常用操作代码
2010/03/14 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
通过python爬虫赚钱的方法
2019/01/29 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
Django跨域请求原理及实现代码
2020/11/14 Python
Python如何批量生成和调用变量
2020/11/21 Python
linux面试题参考答案(4)
2013/01/28 面试题
计算机科学与技术应届生求职信
2013/11/07 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
篝火晚会主持词
2014/03/25 职场文书
家长会主持词
2014/03/26 职场文书
班干部演讲稿
2014/04/24 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
校运会加油稿大全
2015/07/22 职场文书
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python