做了一个js的拉动遮罩层，两个图片分别显示的效果

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

1、定位

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

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

4、css中，cursor的应用

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

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

 

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>无标题文档</title>
  6 <style>
  7 body {overflow:hidden;background:#000;}* {margin:0;padding:0;}
  8 .wrap {width:1100px;height:610px;border:solid 1px #ddd;margin:0 auto;position:relative;overflow:hidden;background:#fff;}
  9 .box1,.box2 {width:1100px;height:610px;position:absolute;left:0;top:0;}
 10 .box1 {z-index:2;background:url(images/car-01.png) center fixed no-repeat;}
 11 .box2 {z-index:3;background:url(images/car-02.png) center #ddd fixed no-repeat;left:550px;}
 12 .handle {width:42px;height:42px;background:url(images/hand.png) no-repeat;position:absolute;left:529px;z-index:10;top:400px;}
 13 
 14 .cursor {cursor:url(images/6.ico),auto;}
 15 .nocur {cursor:default;}
 16 </style>
 17 <script src="js/jquery-1.7.2.min.js"></script>
 18 </head>
 19 
 20 <body id="body">
 21 <div class="wrap">
 22     <div class="box1"></div>
 23     <div class="box2"></div>
 24     <div class="handle"></div>
 25 </div>
 26 
 27 <script>
 28 
 29 ;(function($){
 30     $.fn.drag = function(arg,mover){
 31         var _move = false;//先给不让移动
 32         mover = $('.'+mover)
 33         var _x; 
 34         var _y; 
 35         arg = this;
 36         function ab(arg){    
 37             arg.mouseover(function(){
 38                 $('body').addClass('cursor');
 39             });    
 40             arg.mouseout(function(){
 41                 $('body').removeClass('cursor');    
 42             });
 43             arg.mousedown(function(){
 44                 this.style.cursor = 'url(images/5.ico),auto';
 45             });
 46             arg.mouseup(function(){
 47                 this.style.cursor = 'url(images/6.ico),auto';
 48             });
 49             
 50             arg.click(function(e) {
 51                 var e = e || window.event;
 52                 //alert('按下鼠标');
 53                 }).mousedown(function(e) {
 54                 _move = true;
 55                 _x = e.pageX - parseInt(arg.css('left'));// _x
 56                 
 57                 
 58             });
 59             $(document).mousemove(function(e) {
 60                 if(_move == true)
 61                 {
 62                     var x = e.pageX - _x;
 63                     if(x > 0 && x < 1100){
 64                         arg.css({'left':x});
 65                         mover.css({'left':x+21});
 66                     } 
 67                     if (x<=0) {
 68                         arg.css({'left':'0px'});
 69                         mover.css({'left':'21px'});
 70                     }
 71                     if (x>1053) {
 72                         arg.css({'left':'1058px'});
 73                         mover.css({'left':'1079px'});
 74                     }
 75                     
 76                 }
 77             }).mouseup(function(e){
 78                 _move = false;
 79             });
 80             
 81             b = function(){
 82                 
 83                 var i;
 84                 arg.animate({left:'1058px'},800);
 85                 mover.animate({left:'1079px'},800,function(){
 86                     arg.animate({left:'0px'},800);
 87                     mover.animate({left:'21px'},800,function(){
 88                         arg.animate({'left':'529px'},800);
 89                         mover.animate({'left':'550px'},800);
 90                     });    
 91                 });
 92             
 93             }
 94             b();
 95             return this;
 96         }
 97         ab(arg);
 98         
 99     }
100 })(jQuery);
101 
102 $('.handle').drag(this,'box2');
103 
104 </script>
105 </body>
106 </html>
View Code

 

 

 

具体的文件在附件中。请下载
http://pan.baidu.com/s/1pJz8ytP

 

posted @ 2014-09-12 13:39  丶漏电姐姐  阅读(1094)  评论(0)  编辑  收藏  举报