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

左右拖拽显示对比图，是用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. Pycharm在创建py文件时,如何自动添加文件头注释(类似于钩子特性)?

    在每次新建一个py文件的时候 1 如何自动添加/usr/bin/env python2 自动添加 coding=utf8 操作方法: File->settings->Editor-> ...

  2. 设计模式（八）：Bridge桥接模式 -- 结构型模式

    1. 概述 在软件系统中,某些类型由于自身的逻辑,它具有两个或多个维度的变化,那么如何应对这种“多维度的变化”?如何利用面向对象的技术来使得该类型能够轻松的沿着多个方向进行变化,而又不引入额外的复杂度 ...

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

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

  4. 【转】secureCRT使用退格键（backspace）出现^H解决办法

    原文网址:http://skykiss.blog.51cto.com/blog/2892603/769771 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将 ...

  5. cf500C New Year Book Reading

    C. New Year Book Reading time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  6. Windows服务器Pyton辅助运维--03.安装Visual Studio 的 Python 开发插件 PTVS

    PTVS (Python Tools for Visual Studio) http://pytools.codeplex.com/ 当前版本:2.1 RC PTVS (Python Tools fo ...

  7. html+css显示代码书写版式

    由于要显示行数,所以需选用html的列表标签ol,以下代码可以显示代码书写版式的效果: <style> .code-part { background: yellow; } .code-p ...

  8. Edit Distance 解答

    Question Given two words word1 and word2, find the minimum number of steps required to convert word1 ...

  9. Servlet的生命周期？

    Servlet何时被创建: 1,默认情况下,当WEB客户第一次请求访问某个Servlet的时候,WEB容器将创建这个Servlet的实例. 2,当web.xml文件中如果<servlet> ...

  10. 电脑上已经安装mysql之后安装wamp，wamp中的mysql无法启动的解决办法

    Wampserver安装完成后无法启动MySQL这有可能是你之前安装过MysqL,因为wampserver内置MySQL.解决的方法就是配置环境变量. 找到我的电脑或计算机右键,打开属性,然后打开高级 ...