闲来无事，做了一个模块效果
左右拖拽显示对比图，是用jq封装的
利用鼠标距离左侧（0，0）坐标的横坐标位移来控制绝对定位的left值
再配合背景图fixed属性，来制作视觉差效果
代码如下
<!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;// 鼠标当前位置减去（鼠标当前位置，距离元素左上角的距离 s ） 获得现在左上角距离浏览器左上角的新值
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://files.cnblogs.com/files/Sinhtml/animation.rar