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

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. 在js传递参数中含加号(+)的处理方式

    一般情况下,URL 中的参数应使用 url 编码规则,即把参数字符串中除了 -_. 之外的所有非字母数字字符都将被替换成百分号(%)后跟两位十六进制数,空格则编码为加号(+).但是对于带有中文的参数来 ...

  2. Failed to collect certificates from /data/app/vmdl201020547.tmp/base.apk: META-INF/CERT.SF indicates /data/app/vmdl201020547.tmp/base.apk is signed using APK Signature Scheme v2, but no such signature

    错误信息: 12-26 11:08:44.809 1501-1535/system_process E/PackageInstaller: Commit of session 201020547 fa ...

  3. 生成bundle和移除bundle

    1.命令行生成bundle $ php bin/console generate:bundle --namespace=Acme/TestBundle 2.移除bundle(新的bundle) App ...

  4. 异步编程设计模式Demo - AsyncComponentSample

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.C ...

  5. 数据结构与算法javascript描述

    <数据结构与算法javascript描述>--数组篇 导读: 这篇文章比较长,介绍了数组常见的操作方法以及一些注意事项,最后还有几道经典的练习题(面试题). 数组的定义: JavaScri ...

  6. 使用filter统一设置编码

    1.写一个类EncodingFilter.java,实现javax.servlet.Filter(文件命名做到见名知意) package com.filter; import java.io.IOEx ...

  7. ORA-19502: write error on file "", blockno (blocksize=)/linux下磁盘空间满了解决办法--Virtualbox

    今天,在测试环境启动数据库时,报错: SQL> startup; ORACLE instance started. Total System Global Area  285212672 byt ...

  8. Spring AOP 本质(4)

    这一主要看看Spring AOP是如何实现通知包围的.   Spring AOP包围通知在功能上和前置通知加后置通知类似,但还是有区别的:包围通知可以修改返回值,还可以阻止.替换目标方法的执行.   ...

  9. Shell工具：jsondiff.sh

    逻辑很简单,无非就是通过curl在不同的服务器上取得结果集,然后diff即可,不过这里有几点需要注意的地方:首先,JSON就一行,直接 diff会失去意义:其次,JSON中汉字会被编码,不利于查看:另 ...

  10. php利用pdo进行mysql的事务处理机制

    想进行php的事务处理有下面几个步骤 1.关闭自动提交 2.开启事务处理 3.有异常就自动抛出异常提示再回滚 4.开启自动提交 下面是一个小示例利用pdo进行的php mysql事务处理,注意mysq ...