想做成车修好了和没修好的对比，所以需要两个图片。需要用到的知识点，
1、定位
2、mouse 的事件（代码中体现）
3、鼠标指针的移动距离算法
4、css中，cursor的应用
好了，废话不多说 ，直接上代码
网站需要的素材，接着往下看下载
<!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;
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://pan.baidu.com/s/1pJz8ytP