左右拖拽显示对比图

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

左右拖拽显示对比图，是用jq封装的

利用鼠标距离左侧（0，0）坐标的横坐标位移来控制绝对定位的left值

再配合背景图fixed属性，来制作视觉差效果

代码如下

 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             $(document).mousemove(function(e) {
58                 if(_move == true)
59                 {
60                     var x = e.pageX - _x;// 鼠标当前位置减去（鼠标当前位置，距离元素左上角的距离 s ）   获得现在左上角距离浏览器左上角的新值
61                     if(x > 0 && x < 1100){
62                         arg.css({'left':x});
63                         mover.css({'left':x+21});
64                     } 
65                     if (x<=0) {
66                         arg.css({'left':'0px'});
67                         mover.css({'left':'21px'});
68                     }
69                     if (x>1053) {
70                         arg.css({'left':'1058px'});
71                         mover.css({'left':'1079px'});
72                     }                
73                 }
74             }).mouseup(function(e){
75                 _move = false;
76             });
77             
78             b = function(){            
79                 var i;
80                 arg.animate({left:'1058px'},800);
81                 mover.animate({left:'1079px'},800,function(){
82                     arg.animate({left:'0px'},800);
83                     mover.animate({left:'21px'},800,function(){
84                         arg.animate({'left':'529px'},800);
85                         mover.animate({'left':'550px'},800);
86                     });    
87                 });            
88             }
89             b();
90             return this;
91         }
92         ab(arg);    
93     }
94 })(jQuery);
95 $('.handle').drag(this,'box2');
96 
97 </script>
98 </body>
99 </html>

封装的不是很彻底，不过主体效果实现了，可以自己拿着修改一下啊

下面的是缩略图

http://files.cnblogs.com/files/Sinhtml/animation.rar