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="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!")

但是具体原因，解决原理原因我还不知道。