用原生的javascript實現方格拼圖效果 1.新建文件夾 代碼如下： 01.html 01.js 01.css 圖片 遇到一個問題： 在js代碼中的第9行和第10行，本來是一條語句，但我直接用鍵盤迴車把它們分成兩行時，會出現錯誤： 錯誤：syntaxerror:未結束的字元串。 Google之後 ...
用原生的javascript實現方格拼圖效果
1.新建文件夾
代碼如下：
01.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>方格拼圖效果</title> 6 <link rel="stylesheet" href="01.css" type="text/css"> 7 <script type="text/javascript" src="01.js"></script> 8 </head> 9 <body> 10 </body> 11 </html>
01.js
1 window.onload=function(){ 2 //1,圖片的尺寸是700px*700px，插入一個7*7的div群 3 for(var i=0;i<7;i++){ 4 for(var j=0;j<7;j++){ 5 6 //2,定義一個div群組 7 var divs=document.createElement("div"); 8 //3,給每個div添加相應的樣式 9 divs.style.cssText="width:100px;height:100px;\ 10 background-color:black;position:absolute;border:1px solid #fff;"; 11 //4,把它添加到body中 12 document.body.appendChild(divs); 13 //5,把每個div分開 14 divs.style.left=j*100+"px"; 15 divs.style.top=i*100+"px"; 16 //6,添加背景圖之後要通過背景圖的position找到位置 17 divs.style.backgroundPositionX=-j*100+"px"; 18 divs.style.backgroundPositionY=-i*100+"px"; 19 //7,當前沒有觸碰的時候背景是透明的 20 divs.style.opacity="0"; 21 //8,給每個div增加onmouseover事件，改變透明度 22 divs.onmouseover=function(){ 23 this.style.opacity="1"; 24 } 25 } 26 } 27 }
01.css
1 *{ 2 margin:0; 3 padding:0; 4 } 5 div{ 6 background-image: url("棋魂.jpg"); 7 background-repeat:no-repeat; 8 }
圖片
遇到一個問題：
在js代碼中的第9行和第10行，本來是一條語句，但我直接用鍵盤迴車把它們分成兩行時，會出現錯誤：
錯誤：syntaxerror:未結束的字元串。
Google之後可以在要斷開處結尾加一個反斜杠“\” ，就不會出現錯誤。
網址：http://stackoverflow.com/questions/508269/how-do-i-break-a-string-across-more-than-one-line-of-code-in-javascript
eg：
1 alert("Hello Linshuling 2 good!")
出現和上面同樣的錯誤。
改為：
1 alert("Hello Linshuling"+ 2 "good!")
或是：
1 alert("Hello Linshuling\ 2 good!")
但是具體原因，解決原理原因我還不知道。
