jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法


Posted in Javascript onAugust 07, 2015

本文实例讲述了jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法。分享给大家供大家参考。具体如下:

左右拖拽切换对比图片效果,运行效果后,图片中间有个拖动条,拖动左右滑动,可看到图片不一样的效果,女模特的脸变嫩了,呵呵,其实是用了两张背景图片实现的,这就需要jquery.beforeafter.js插件了,拖动时候的小图标不见了,路径可以在jquery.beforeafter.js中设置,不多说了。

运行效果截图如下:

jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通过拖拽展示前后图片对比效果的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>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
bootstrap表单示例代码分享
May 18 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 #Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 #Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 #Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 #Javascript
css如何让浮动元素水平居中
Aug 07 #Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 #Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 #Javascript
You might like
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
讲解Python中if语句的嵌套用法
2015/05/14 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
Python基于百度云文字识别API
2018/12/13 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
校园公益广告语
2014/03/13 职场文书
大学生简历求职信
2014/06/24 职场文书
募捐感谢信
2015/01/22 职场文书
合同审查法律意见书
2015/06/04 职场文书
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电