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

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. Windows8.1使用博客客户端写博客

    1.首先去微软官网下载客户端(Windows live writer) http://windows.microsoft.com/zh-cn/windows-live/essentials 安装步骤 ...

  2. 用phpMyAdmin修改mysql数据库密码

    1初始数据库密码为空. 2第一步,点击phpMyAdmin里的用户选项. 3选择root localhost用户名,点击编辑权限. 4此时会出来修改权限的页面,里面可以设置的选项还是比较多的,暂时不管 ...

  3. dynamic和object浅谈

    要想知道dynamic和object的关系必须先理解它们的含义 C# 4.0提供了一个dynamic 关键字.在MSDN里是这样描述:在通过 dynamic 类型实现的操作中,该类型的作用是绕过编译时 ...

  4. WordPress插件制作教程(七): 插件函数之过滤器(Filter)函数

    上一篇对插件函数之动作(Action)函数做了下介绍,这篇在介绍下过滤器(Filters). 过滤器是一类函数,WordPress执行传递和处理数据的过程中,在针对这些数据做出某些动作之前的特定运行( ...

  5. Servlet接收JSP参数乱码问题解决办法

    转自:http://lavasoft.blog.51cto.com/62575/274527/   环境: apache-tomcat-6.0.24.zip jdk1.6.0_16 WindosXP ...

  6. Power on & RESET 之前?

    這是個有趣的問題 ? 當應用系統 或 ic元件模組於初始之前存在的現像為何 是個得住意的問題 ! 因為得考量 是否會對週邊或被控制端造成危害 這也是長常常會是不穩定設計 的原因!得有實務經驗及想像力才 ...

  7. PowerShell_零基础自学课程_9_高级主题：静态类和类的操作

    上次我们说到了,wmi对象和com组件,今天我们继续来看PS中对象的相关内容.主要说一下静态对象和对象的基本操作. 一.静态对象 在PS中有一类特殊的对象,我们不能同过这些类创建新的对象,这些类是不能 ...

  8. UML--核心视图之用例图

    如果说UML是一门语言,那么元素就是UML的基本词汇,视图就是语法. UML通过视图将基本元素组织在一起,形成有意义的句子. 静态视图,顾名思义,就是表达静态事物的.包括用例图.类图和包图. 用例图 ...

  9. Sum Root to Leaf Numbers 解答

    Question Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent ...

  10. 如何在程序中调用Caffe做图像分类

    Caffe是目前深度学习比较优秀好用的一个开源库,采样c++和CUDA实现,具有速度快,模型定义方便等优点.学习了几天过后,发现也有一个不方便的地方,就是在我的程序中调用Caffe做图像分类没有直接的 ...