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 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
vue自定义指令用法经典实例小结
Mar 16 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的控制语句
2006/10/09 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
JavaScript时间转换处理函数
2015/04/14 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
js数组去重的方法总结
2019/01/18 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
2019/08/02 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
Python实现获取命令行输出结果的方法
2017/06/10 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
django form和field具体方法和属性说明
2020/07/09 Python
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
2014年社区植树节活动方案
2014/02/28 职场文书
2014年销售部工作总结
2014/12/01 职场文书
校运会新闻稿
2015/07/17 职场文书
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang