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 相关文章推荐
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
Angular排序实例详解
Jun 28 Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 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 date函数常用时间处理方法
2015/05/11 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
javascript中clone对象详解
2014/12/03 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
python函数缺省值与引用学习笔记分享
2013/02/10 Python
python简单程序读取串口信息的方法
2015/03/13 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
关于python写入文件自动换行的问题
2018/06/23 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
利用python实现汉诺塔游戏
2021/03/01 Python
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
幼儿教师个人求职信范文
2013/09/21 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
通信工程求职信
2014/07/16 职场文书
老公保证书
2015/01/17 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android
python神经网络ResNet50模型
2022/05/06 Python