闲来无事，做了一个模块效果

左右拖拽显示对比图，是用jq封装的

利用鼠标距离左侧（0，0）坐标的横坐标位移来控制绝对定位的left值

再配合背景图fixed属性，来制作视觉差效果

代码如下

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>左右推拽显示对比图</title>

 <style>

 body {overflow:hidden;background:#000;}* {margin:0;padding:0;}

 .wrap {width:1100px;height:610px;border:solid 1px #ddd;margin:0 auto;position:relative;overflow:hidden;background:#fff;}

 .box1,.box2 {width:1100px;height:610px;position:absolute;left:0;top:0;}

 .box1 {z-index:2;background:url(images/car-01.png) center fixed no-repeat;}

 .box2 {z-index:3;background:url(images/car-02.png) center #ddd fixed no-repeat;left:550px;}

 .handle {width:42px;height:42px;background:url(images/hand.png) no-repeat;position:absolute;left:529px;z-index:10;top:400px;}

 .cursor {cursor:url(images/6.ico),auto;}

 .nocur {cursor:default;}

 </style>

 <script src="js/jquery-1.7.2.min.js"></script>

 </head>

 <body id="body">

 <div class="wrap">

     <div class="box1"></div>

     <div class="box2"></div>

     <div class="handle"></div>

 </div>

 <script>

 ;(function($){

     $.fn.drag = function(arg,mover){

         var _move = false;//先给不让移动

         mover = $('.'+mover)

         var _x;

         var _y; //鼠标离左上角的值

         arg = this;

         function ab(arg){

             arg.mouseover(function(){

                 $('body').addClass('cursor');

             });

             arg.mouseout(function(){

                 $('body').removeClass('cursor');

             });

             arg.mousedown(function(){

                 this.style.cursor = 'url(images/5.ico),auto';

             });

             arg.mouseup(function(){

                 this.style.cursor = 'url(images/6.ico),auto';

             });

             arg.click(function(e) {

                 var e = e || window.event;

                 //alert('按下鼠标');

                 }).mousedown(function(e) {

                 _move = true;

                 _x = e.pageX - parseInt(arg.css('left'));//获取左上角坐标 _x

             });

             $(document).mousemove(function(e) {

                 if(_move == true)

                 {

                     var x = e.pageX - _x;// 鼠标当前位置减去（鼠标当前位置，距离元素左上角的距离 s ）   获得现在左上角距离浏览器左上角的新值

                     if(x > 0 && x < 1100){

                         arg.css({'left':x});

                         mover.css({'left':x+21});

                     }

                     if (x<=0) {

                         arg.css({'left':'0px'});

                         mover.css({'left':'21px'});

                     }

                     if (x>1053) {

                         arg.css({'left':'1058px'});

                         mover.css({'left':'1079px'});

                     }

                 }

             }).mouseup(function(e){

                 _move = false;

             });

             b = function(){

                 var i;

                 arg.animate({left:'1058px'},800);

                 mover.animate({left:'1079px'},800,function(){

                     arg.animate({left:'0px'},800);

                     mover.animate({left:'21px'},800,function(){

                         arg.animate({'left':'529px'},800);

                         mover.animate({'left':'550px'},800);

                     });

                 });

             }

             b();

             return this;

         }

         ab(arg);

     }

 })(jQuery);

 $('.handle').drag(this,'box2');

 </script>

 </body>

 </html>

封装的不是很彻底，不过主体效果实现了，可以自己拿着修改一下啊

下面的是缩略图

http://files.cnblogs.com/files/Sinhtml/animation.rar

左右推拽显示对比图 - jQyery封装 - 附源文件的更多相关文章

  1. android 项目学习随笔十七（ListView、GridView显示组图）

    ListView.GridView显示组图,处理机制相同 <?xml version="1.0" encoding="utf-8"?> <Li ...

  2. Winform中Picture控件图片的拖拽显示

    注解:最近做了一个小工具,在Winform中对Picture控件有一个需求,可以通过鼠标从外部拖拽图片到控件的上,释放鼠标,显示图片! 首先你需要对你的整个Fom窗口的AllowDrop设置Ture ...

  3. excel在一个图表内，显示折线图和柱状图

      折线图和柱状图,在同一个图表中拆分显示   一个图,设置主坐标轴 另外一个图,设置次坐标轴     拆分,通过调整纵坐标的最小值和最大值来实现     关于图表的标题,选中图表,选择布局,然后图表 ...

  4. iOS8自定义推送显示按钮及推送优化

    http://www.jianshu.com/p/803bfaae989e iOS8自定义推送显示按钮及推送优化 字数1435 阅读473 评论0 喜欢2 导语 在iOS8中,推送消息不再只是简单地点 ...

  5. Chart图表整合——面积对比图、扇形图、柱状图

    一. chart图表demo网址 网址:http://antv.alipay.com/zh-cn/f2/3.x/demo/index.html 二. 本文主要对面积对比图,扇形图,柱状图三大常见图进行 ...

  6. Android 使用pl.droidsonroids.gif.GifImageView在安卓中显示动图遇到的问题

    在做一款聊天软件,其中聊天界面需要发送表情,而表情都是动图,在安卓中想要显示动图,就要借助第三方框架,我选的是pl.droidsonroids.gif.GifImageView. 使用方法如下:你在g ...

  7. CS5642-V3与OV5642-FPC通过icamera测试方向的对比图

    有朋友会有如此的疑问:CS5642-V3与OV5642-FPC在采集板上通过icamera测试图像方向是一样吗?通过本文您会找到答案   测试:CS5642-V3与OV5642-FPC的管脚在上 以下 ...

  8. Intel和AMD的CPU性能对比图

    Intel和AMD的CPU性能对比图:

  9. pixijs shader颗粒化显示贴图

    pixijs shader颗粒化显示贴图 const app = new PIXI.Application({ transparent: true }); document.body.appendCh ...

随机推荐

  1. js前台与后台数据交互

    客户端脚本一般都在前台,这里讲的是(1)在后台调用前台定义的脚本(2)在后台如何注册客户端脚本 用途 何时使用服务器代码向页中添加客户端脚本: u 当客户端脚本的内容依赖于直到运行时才可用的信息时 u ...

  2. C++Primer charpter1.

    一.输入输出流 endl:会刷新buffer.刷新之后你才能看到.不手动用endl的话,就只能依靠系统自动刷.程序崩溃的话,你看到的调试信息可能是错误的. >>:   两个连续的符号 ci ...

  3. ssh 文件传输

    在linux下一般用scp这个命令来通过ssh传输文件. 1.从服务器上下载文件scp username@servername:/path/filename /var/www/local_dir(本地 ...

  4. 存储过程中update,然后用sql%判断update是否成功的存储过程

    --更新用户状态 PROCEDURE P_UPDATE_USER_STATUS ( v_SrcID IN NUMERIC, v_DstID IN NUMERIC, v_DstType IN NUMER ...

  5. android 设置背景为空(透明)

    在给控件设置背景时像ps那样的背景透明 在3.0以下可以使用 imageView.setBackgroundResource(android.R.id.empty); 但是这个方法在3.0以上会出现 ...

  6. 转：redis windows下的环境搭建

    原文来自于:http://www.2cto.com/os/201204/125971.html   下载地址:https://github.com/dmajkic/redis/downloads 下载 ...

  7. DBUtils框架

    一.O-R Mapping 简介    一]概念:可以理解为对象和数据库的映射.    二]常用O-R Mapping映射工具        1)Hibernate(全自动框架)        2)l ...

  8. 设计模式 ( 二十一 )：Vistor访问者模式 -- 行为型

    1.概述 在软件开发过程中,对于系统中的某些对象,它们存储在同一个集合collection中,且具有不同的类型,而且对于该集合中的对象,可以接受一类称为访问者的对象来访问,而且不同的访问者其访问方式有 ...

  9. HDU_2024——判断字符串是否是c语言合法标识符

    Problem Description 输入一个字符串,判断其是否是C的合法标识符.   Input 输入数据包含多个测试实例,数据的第一行是一个整数n,表示测试实例的个数,然后是n行输入数据,每行是 ...

  10. HDU_2017——统计数字字符出现的个数

    Problem Description 对于给定的一个字符串,统计其中数字字符出现的次数.   Input 输入数据有多行,第一行是一个整数n,表示测试实例的个数,后面跟着n行,每行包括一个由字母和数 ...