闲来无事，做了一个模块效果
左右拖拽显示对比图，是用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