我非常新的JavaScript & jQuery和想用snappuzzle插件： snappuzzle plugin 我認爲我應該只需要下載&鏈接在我的HTML文件將jQuery，jQuery UI的&的snappuzle .js，以及鏈接到一個code.js文件，我把$(document).ready()(如何實現snappuzzle jQuery的
但不知何故，我似乎無法弄清楚該怎麼做才能實現這個插件 - 無論是在我的HTML以及我的什麼應該用javascript
任何人都可以幫助我嗎？
編輯：你知道是否有可能改變拼圖的背景/模板圖片？如在，我想使用另一張圖片作爲模板的來源比謎題本身。我似乎無法找到確實的代碼..
$(document).ready(function() {
});body {
font-family: 'Roboto', sans-serif;
background: #ee9ca7; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #ee9ca7 , #ffdde1); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #ee9ca7 , #ffdde1); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
* {
margin: 0;
padding: 0;
}
.ref_imgWrap {
max-width: 200px;
margin: 0 auto;
overflow: hidden;
margin-top: 1em;
position: relative;
}
.ref_imgWrap img {
max-width: 100%;
float: left;
height: auto;
}
.contRofl_clr,
.wrap {
width: 100%;
float: left;
}
.restartPuzzleWrap {
width: 100%;
float: left;
text-align: center;
padding: 1em 0;
}
.restart_puzzleX999 {
padding: 1.6em;
display: inline-block;
background: orange;
color: #ffffff;
letter-spacing: 1px;
font-weight: 300;
border-radius: 2px;
cursor: pointer;
-webkit-box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
-moz-box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
}
.snappuzzle-piece {
-webkit-box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
-moz-box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
}
/* required snapPuzzle styles */
.puzzleX999_paddedWrap {
width: 100%;
float: left;
position: relative;
overflow: hidden;
}
.puzzleX999_imgWrap {
max-width: 560px;
padding: 5%;
padding-top: 0;
margin: 0 auto;
box-sizing: border-box;
position: relative;
}
.puzzleX999_imgWrap img {
max-width: 100%;
float: left;
height: auto;
}
.puzzleX999_relWrap {
position: relative;
display: block;
max-width: 500px;
float: left;
}
#puzzleX999_Main {
width: 100%;
float: left;
}
.snappuzzle-wrap {
position: relative;
display: block;
}
/*snappuzzle-pile { position: relative; }*/
.snappuzzle-piece {
cursor: move;
}
.snappuzzle-slot {
position: absolute;
background: #fff;
opacity: .8;
}
.snappuzzle-slot-hover {
background: #eee;
}<!DOCTYPE html>
<head>
<title>Test puzzle</title>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<script src="code.js"></script>
<script src="jquery-3.2.1.min.js"></script>
<script src="jquery-ui-1.12.1.js"></script>
<script src="jQuery-snapPuzzle.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js'></script>
</head>
<body>
<div class="contRofl_clr">
<div class="ref_imgWrap">
<img src="https://images.unsplash.com/photo-1462524500090-89443873e2b4?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=991&h=661&q=80" alt="" />
</div>
<div class="restartPuzzleWrap">
<span class="restart_puzzleX999">
Restart Puzzle
</span>
</div>
</div>
<div class="puzzleX999_paddedWrap">
<div class="puzzleX999_imgWrap">
<img class="puzzleX999_img" src="https://images.unsplash.com/photo-1462524500090-89443873e2b4?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=991&h=661&q=80" alt="" />
<div id="puzzleX999_Main">
</div>
</div>
</div>
</body>
</html>
這是一個答案，或者你已經嘗試過的代碼？如果是後者，請編輯成你的問題。 –