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