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

左右拖拽显示对比图，是用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. 基于.NET MVC的高性能IOC插件化架构（一）

    最近闲下来,整理了下最近写的代码,先写写架构,后面再分享几个我自己写的插件 最近经过反复对比,IOC框架选择了Autofac,原因很简单,性能出众,这篇博文是我的各大IOC框架的性能测试:http:/ ...

  2. eclips常用快捷键

    本文取自:Eclipse中常用快捷键 - yizhang88的专栏 - 博客频道 - CSDN.NET http://blog.csdn.net/yizhang88/article/details/2 ...

  3. 转：对于linux下system()函数的深度理解(整理)

    这几天调程序(嵌入式linux),发现程序有时就莫名其妙的死掉,每次都定位在程序中不同的system()函数,直接在shell下输入system()函数中调用的命令也都一切正常.就没理这个bug,以为 ...

  4. Recommending music on Spotify with deep learning 采用深度学习算法为Spotify做基于内容的音乐推荐

    本文参考http://blog.csdn.net/zdy0_2004/article/details/43896015译文以及原文file:///F:/%E6%9C%BA%E5%99%A8%E5%AD ...

  5. 如何让多个Activity共用一个Menu

    我们可以定义一个自己的CommActivity继承自Activity,然后让每个自定义Activity继承CommActivity,就可以做到. 例如: public class CommActivi ...

  6. 输出宽字符数组 C++

    std::cout << "ASCII and ANSI" << std::endl;std::wcout << L"INSERT M ...

  7. Yii创建前台和后台登录表单和通过扩展 CWebUser 增加信息到 Yii::app()->user

    我参考了这篇文章来构建项目的前台和后台的目录结构.感谢Andy的这篇文章.按照所有的步骤,您将有单独的前台和后台面板,如: http://localhost/index.php // 前台 http: ...

  8. Hadoop生态圈技术图谱

    当下Hadoop已经成长为一个庞大的体系,貌似只要和海量数据相关的,没有哪个领域缺少Hadoop的身影,下面是一个Hadoop生态系统的图谱,详细的列举了在Hadoop这个生态系统中出现的各种数据工具 ...

  9. CATransform3D 讲解

    最近看到一个3D动画效果,决定认真就研究一下.从网上看到很多介绍,下面详细的讲解一下CATransform3D CATransform3D结构成员的意义. structCATransform3D { ...

  10. HDU 1501 & POJ 2192 Zipper(dp记忆化搜索)

    题意:给定三个串,问c串是否能由a,b串任意组合在一起组成,但注意a,b串任意组合需要保证a,b原串的顺序 例如ab,cd可组成acbd,但不能组成adcb. 分析:对字符串上的dp还是不敏感啊,虽然 ...