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

左右拖拽显示对比图，是用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程序设计语言练习题1-15

    练习1-15 重新编写1.2节中的温度转换程序,使用函数实现温度转换计算. 代码如下: #include <stdio.h> // 包含标准库的信息. float fahrToCelsiu ...

  3. P1337 fibonacci数列（tyvj）

    http://www.tyvj.cn/p/1337 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 著名的斐波那契数列f[n]=1               ...

  4. git仓库迁移和更新远程仓库地址

    一.git仓库迁移 1,从原仓库clone或pull到本地仓库 git clone project_name ​[old_remote_repository_address] 2,​在新的git创建一 ...

  5. hdu 2583 permutation 动态规划

    Problem Description Permutation plays a very important role in Combinatorics. For example ,1 2 3 4  ...

  6. hadoop2.2.0伪分布模式64位安装

    hadoop2.2.0伪分布模式64位安装用到的软件:jdk-6u45-linux-x64.bin,hadoop-2.2.0.x86_64.tar.gz 修改主机名vim /etc/sysconfig ...

  7. bui上手体验

    在最近的项目中,接触到了bui这个后台管理框架 主页地址:http://builive.com/ 主页上也有一个后台管理的Demo:http://builive.com/apps/default/ma ...

  8. 导航条上UIBarButtonItem的更改方法（使用initWithCustomView:btn）

    UINavigationController *nav = [[[UINavigationController alloc] initWithRootViewController:self.newMe ...

  9. [转]Android 使用Scroller实现绚丽的ListView左右滑动删除Item效果

    转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17539199),请尊重他人的辛勤劳动成果,谢谢! 我在上一 ...

  10. Socket tips: UDP Echo service - Server code

    #include <stdio.h> #include <stdlib.h> #include <sys/types.h> #include <sys/soc ...