想做成车修好了和没修好的对比，所以需要两个图片。需要用到的知识点，

1、定位

2、mouse 的事件（代码中体现）

3、鼠标指针的移动距离算法

4、css中，cursor的应用

好了，废话不多说 ，直接上代码

网站需要的素材，接着往下看下载

 <!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;

                     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://pan.baidu.com/s/1pJz8ytP

做了一个js的拉动遮罩层，两个图片分别显示的效果的更多相关文章

  1. js实现页面遮罩层，并且阻止页面body滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 【js & jquery】遮罩层实现禁止a、span、button等元素的鼠标事件

    刚才在写一个界面,其中为了考虑背景图片的缘故,所以没用Button而是用的a标签 在点击之后应该禁用掉a元素,禁用对于button比较容易,加一个disabled就可以了 但是对于a却没有太好的办法, ...

  3. js+html实现遮罩层效果（收藏哦）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script ty ...

  4. 转【js & jquery】遮罩层实现禁止a、span、button等元素的鼠标事件

    /*遮罩层代码 作用:通过遮罩层的方式防止表单提交次数过多 */ function MaskIt(obj){ var hoverdiv = '<div class="divMask&q ...

  5. z-index解决弹出层遮罩层覆盖子div不能显示输出的问题

    // 添加以下代码来进行测试: // ajax 发生错误,就会执行$('body').ajaxError(function(e, xhr, setting, text){    // e - even ...

  6. 关于最近在做的一个js全屏轮播插件

    最近去面试了,对方要求我在一个星期内用原生的js代码写一个全屏轮播的插件,第一想法就是跟照片轮播很相似,只是照片轮播是有定义一个宽高度大小已经确定了的容器用来存储所有照片,然后将照片全部左浮动,利用m ...

  7. JS弹出遮罩层

    // create div var mask=document.createElement("div"); mask.id="mask"; mask.style ...

  8. JS写四个图片滚动显示的效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. QT5-控件-QScrollArea-可以用于把一个窗口分割为多个-比如根据图片大小显示滚动条

    #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QLabel> #incl ...

随机推荐

  1. artDialog的几种基本使用

    1.confirm形式 var dialog=art.dialog({ lock:true, content: '请确认,您是否要删除选中的用吗?', icon: 'question', ok: fu ...

  2. linux安装xunsearch

    首先要确保ubuntu安装了gcc g++ make sudo apt-get install make gcc g++ 然后安装zlib,用来解压的: apt-get install zlib1g- ...

  3. DB_NAME、DB_UNIQUE_NAME、SERVICE_NAME和INSTANCE_NAME等的区别

    摘自:http://space.itpub.net/7922095/viewspace-715406 搭建DG时,突然想起oracle这些为数众多的name,以下是概念整理,仅代表个人观点 DB_NA ...

  4. gridview列显示，截取其中前面的几个字显示出来,当鼠标放上去的时候显示全部——使用LinkButton的方法

    使用LinkButton的方法<asp:LinkButton ToolTip ='<%#Eval("FilePath") %>' runat="serv ...

  5. 董事长、总裁与CEO的区别与实质

    自从信息产业兴起以来,尤其是网络股泡沫产生以来,“CEO”在中国骤然成为一个流行词汇.总经理和总裁们纷纷改称CEO,这个缩写词比它的中译版“首席执行官”更简洁,在中国人心目中更有神圣感,于是便出现了今 ...

  6. IP防护等级

    IP(INGRESS PROTECTION)防护等级系统是由IEC(INTERNATIONAL ELECTROTECHNICAL COMMISSION)所起草,将电器依其防尘防湿气之特性加以分级.这里 ...

  7. mysql Event、存储过程、表命令

    Mysql事件调度器(Event Scheduler)类似于定时器,可以在某一个时间点执行一个SQL语句或一个语句块(BEGIN ... END):或者每隔固定间隔重复执行.类似于Linux下的cro ...

  8. Min and Max

    Min and Max 需要处理不同数据类型; 另外*args, 表示的是位置参数, *kwargs表示的是key参数, args的类型为tuple类型, 参数为min(3, 2)时, args为(3 ...

  9. 【转】Android(4.2) Sensors 学习——G-sensor,Gyroscope驱动移植

    原文网址:http://blog.csdn.net/nxh_love/article/details/11804841 本人对驱动可谓是一点不懂,鉴于公司目前高驱动的人手不够,所以我也只能两眼一抹黑硬 ...

  10. hdu4010-Query on The Trees(lct分裂合并加值查询最大值)

    代码 #include<cstdio> #include<cstring> #include<string> #include<vector> #inc ...