1 <div class="yz">
 2     <div class="img">
 3         <img class="bg" src="1.png" alt="">　　                                      
 4         <img class="bg-part" src="1a.png" alt="">　　
 5         <div></div>
 6     </div>
 7     <div class="hd">
 8         <p>按住左边滑块，拖动完成上方拼图</p>
 9         <div class="hd-bg"></div>
10         <div class="hk"></div>
11     </div>
12 </div>
13 
14 <!-- 为了验证成功的html部分 -->
15 <div class="aaa"></div>

 1 *{margin:0;padding: 0}
 2 .yz{width: 310px;margin: 20px auto;}
 3 .img{width: 310px;height: 155px;position: relative;}
 4 .img .bg{width: 100%;}
 5 .img .bg-part{position: absolute;top: 0;left: 0;}
 6 .img div{position: absolute;top: 0;right: 0;width: 24px;height: 24px;background-image: url(bg.png);background-position: -6px -113px;cursor: pointer;}
 7 .hd{position: relative;width: 310px;height: 30px;margin-top: 10px;background: #ECE4DD;border-radius: 20px;}
 8 .hd p{height: 30px;line-height: 30px;margin-left:50px;}
 9 .hd .hd-bg{width: 310px;height: 30px;position: absolute;top: 0;left: 0;z-index: 1;}
10 .hd .hk{position: absolute;width: 38px;height: 38px;top: -3px;left: 0;background-image: url(bg.png);background-position: 0 0;z-index: 10;cursor: pointer;}
11 .hd .hk.active{background-position: 0 -37px;}
12 .hd .hk.success{background-position: 0 -74px;}
13 
14 //为了验证成功的样式
15 .aaa{font-size: 24px;font-weight: bold;color: #f00;text-align: center;}

 1 var fixedLeft;
 2 var isSuccess = false;
 3 var isSlide = true;
 4 $(function(){
 5     renew();
 6     $(".hk").mousedown(function(e){
 7         if(isSlide == false){
 8             return;
 9         }
10         var _this = $(this);
11         //e.pageX 鼠标距离整个页面左边的距离
12         var pageX = e.pageX;    //pageX 鼠标最开始的位置
13         //滑块所能移动的总长度
14         var distance = $(".hd").width - $(_this).width();
15         $(this).addClass("active");
16         $(document).mousemove(function(e){
17             //鼠标距离最开始按下的点所移动的距离
18             var x = e.pageX - pageX;
19             if(x < 0){
20                 x = 0;
21             }else if(x > distance){
22                 x = distance;
23             }
24             if(x >= fixedLeft - 2 && x <= fixedLeft + 2){
25                 isSuccess = true;
26             }else{
27                 isSuccess = false;
28             }
29             $(_this).css("left",x);
30             $(".bg-part").css("left",x);
31         })
32         $(document).mouseup(function() {
33             if(isSuccess){
34                 $(_this).removeClass("active").addClass("success").css("left",fixedLeft);
35                 $(".bg-part").css("left",fixedLeft);
36                 isSlide = false;
37                 // 为了验证成功的js
38                 $(".aaa").text("成功了");
39             }else{
40                 $(_this).removeClass("active").css("left","0");
41                 $(".bg-part").css("left","0");
42             }
43             $(document).off(‘mousemove‘);
44         });
45     })
46     $(".img").find("div").click(function(){
47         renew();
48     })
49     
50 })
51 function renew(){
52     // 为了验证成功的js
53     $(".aaa").text("");
54     isSuccess = false;
55     isSlide = true;
56     $(".hk").removeClass("active").removeClass("success").css("left","0");
57     $(".bg-part").css("left","0");
58     var num = Math.floor(Math.random()*10);
59     $(".img").find(".bg").attr("src",num+".png");
60     $(".img").find(".bg-part").attr("src",num+"a.png");
61     switch(num){　
62         case 0:
63             fixedLeft = 117;
64             break;
65         case 1:
66             fixedLeft = 167;
67             break;
68         case 2:
69             fixedLeft = 125;
70             break;
71         case 3:
72             fixedLeft = 157;
73             break;
74         case 4:
75             fixedLeft = 71;
76             break;
77         case 5:
78             fixedLeft = 117;
79             break;
80         case 6:
81             fixedLeft = 143;
82             break;
83         case 7:
84             fixedLeft = 144;
85             break;
86         case 8:
87             fixedLeft = 182;
88             break;
89         default:
90             fixedLeft = 125;
91     }
92 }