Tips_方格拼图效果
用原生的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!")
但是具体原因，解决原理原因我还不知道。
