html 部分
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>
css 部分
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;}
jquery 部分
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 }
效果圖:
在項目上,圖片是后端實現提供的,圖片的名稱及補的圖片所需要移動的距離,需要后端提供,此處只是單純前端實現,所以,通過隨機的方式,對10張圖片進行隨機選擇,因此,命名方式就比較隨便。所有的圖片(總共20張圖片)都是從https://www.jq22.com/jquery-info21851這里隨機弄了補的圖和背景圖各10張保存的,至於成功和刷新等圖片,是根據https://www.jq22.com/jquery-info20476和https://www.jq22.com/jquery-info21851的圖標圖片,用ps改的,圖標圖片附在最后面。
文章參考:https://www.jq22.com/jquery-info20476
https://www.jq22.com/jquery-info21851
https://www.jq22.com/webqd1345
圖標圖片: