用原生的javascript实现方格拼图效果

1.新建文件夹

代码如下：

01.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>方格拼图效果</title>

     <link rel="stylesheet" href="01.css" type="text/css">

     <script  type="text/javascript" src="01.js"></script>

 </head>

 <body>

 </body>

 </html>

01.js

 window.onload=function(){

     //1,图片的尺寸是700px*700px，插入一个7*7的div群

     for(var i=0;i<7;i++){

         for(var j=0;j<7;j++){

             //2,定义一个div群组

             var divs=document.createElement("div");

             //3,给每个div添加相应的样式

             divs.style.cssText="width:100px;height:100px;\

             background-color:black;position:absolute;border:1px solid #fff;";

             //4,把它添加到body中

             document.body.appendChild(divs);

             //5,把每个div分开

             divs.style.left=j*100+"px";

             divs.style.top=i*100+"px";

             //6,添加背景图之后要通过背景图的position找到位置

             divs.style.backgroundPositionX=-j*100+"px";

             divs.style.backgroundPositionY=-i*100+"px";

             //7,当前没有触碰的时候背景是透明的

             divs.style.opacity="0";

             //8,给每个div增加onmouseover事件，改变透明度

             divs.onmouseover=function(){

                 this.style.opacity="1";

             }

         }

     }

 }

01.css

 *{

     margin:;

     padding:;

 }

 div{

     background-image: url("棋魂.jpg");

     background-repeat:no-repeat;

 }

图片

遇到一个问题：

在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：

 alert("Hello Linshuling

         good!")

出现和上面同样的错误。

改为：

 alert("Hello Linshuling"+

         "good!")

或是：

 alert("Hello Linshuling\

         good!")

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

Tips_方格拼图效果的更多相关文章

  1. Java_Class 16方格拼图游戏

    public class Main { public static void main(String[] args) { // TODO Auto-generated method stub Game ...

  2. 一款基于jQuery/CSS3实现拼图效果的相册

    之前为大家介绍了 HTML5 3D立体图片相册, HTML5图片相册重力感应特效, 基于CSS3图片可倾斜摆放的动画相册 今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度 ...

  3. 基于jQuery/CSS3实现拼图效果的相册插件

    今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度倾斜放置在页面上,点击图片缩略图就可以展开图片,并且图片是由所有缩略图拼接而成,图片展开和收拢的动画效果也非常不错.当然图 ...

  4. 拼图游戏js

    实现算法: 1. JavaScript动态生成拼图:通过生成16个div,且除最后一个div不使用背景图片以外,其他div都设置拼图图片为背景.然后通过调整background-position来实现 ...

  5. Atitit 常用比较复杂的图像滤镜 attilax大总结

    Atitit 常用比较复杂的图像滤镜 attilax大总结 像素画滤镜 水彩油画滤镜 素描滤镜 梦幻镜 特点是中央集焦,周围景物朦化微带光晕,使人产生如入梦境的感觉.常用于拍摄婚纱.明星照,也用于其它 ...

  6. Atitit 图像处理 常用8大滤镜效果 Jhlabs 图像处理类库 java常用图像处理类库

    Atitit 图像处理 常用8大滤镜效果 Jhlabs 图像处理类库 java常用图像处理类库1.1. 5种常用的Photoshop滤镜,分别针对照片的曝光.风格色调.黑白照片处理.锐利度.降噪这五大 ...

  7. 8个华丽的HTML5相册动画欣赏

    HTML5的图片动画非常丰富,我们也在网站上分享过很多关于HTML5的图片动画.相册在网络中也十分常见,本文我们要分享一些比较华丽的jQuery/HTML5相册动画,希望大家喜欢. 1.HTML5 3 ...

  8. 【技术文档】《算法设计与分析导论》R.C.T.Lee等·第5章 树搜索策略

    计算机中许多问题的解空间可以用一棵树来表示,最优解就在树中的一个分支上,因此,我们在解这类问题时可以采用树搜索策略,最经典的问题包括0/1背包问题.旅行商问题.哈密顿回路问题,还有8数码问题(就是我们 ...

  9. 8个超炫酷的jQuery相册插件欣赏

    在网页中,相册应用十分常见,如果你经常逛一些社交网站,那么你应该会注意到很多各式各样的网页相册应用.今天我们要来分享一些最新收集的jQuery相册插件,这些精美的jQuery相册插件可以帮助你快速搭建 ...

随机推荐

  1. BZOJ4675

    题解: 考虑这么一件事情,n个人买彩票,在不断抽走卡片的时候,他们的中奖概率是不变的 所以在这道题中,由于每个人的操作次数是确定的,所以选每k个点的概率是相同的(因为如果我们逐一考虑每一次操作这个问题 ...

  2. 第二种掌握的排序Q-Q

    #include<stdio.h> int main() {     int s[10000]={0};     int i=0,j=0,n=0,x=0;     scanf(" ...

  3. Busybox制作ARM(iTOP4412) 根文件系统

    本记录来源与自身操作过程. 1.制作环境 PC环境:外部Winows8.1 内部则为vmware11+ubuntu12.04 嵌入式设备:iTOP4412 交叉工具:arm-none-linux-gn ...

  4. Python_subprocess模块

    subprocess中,允许生成新的进程,连接到input/output/error管道,并获取他们的返回(状态)码,主要用于替换os.system/os.spawn*几个旧的模块和方法 subpro ...

  5. vsftp为不同用户设置不同的ftp的根目录

    需求 要求ftp登录后的根目录是/var/test/,但是又不能影响其他用户的登录路径,因为有些程序是直接在根目录进行操作的,而没有目录切换的过程.操作过程新建用户 useradd test1user ...

  6. Codeforces 295E Yaroslav and Points 线段树

    Yaroslav and Points 明明区间合并一下就好的东西, 为什么我会写得这么麻烦的方法啊啊啊. #include<bits/stdc++.h> #define LL long ...

  7. python中@staticmethod、@classmethod和实例方法

    1.形式上的异同点: 在形式上,Python中:实例方法必须有self,类方法用@classmethod装饰必须有cls,静态方法用@staticmethod装饰不必加cls或self,如下代码所示: ...

  8. loadrunner之运行方式：线程还是进程？

    loadrunner controller将使用驱动程序mmdrv运行Vuser. 用户可以在controller的run-time setting中选择Vuser的运行方式: 是多进程方式还是多线程 ...

  9. Idea中快捷键与小技巧的总结-->持续更新

    1.Scala类或单例对象中快速声明实例对象: eg. new SparkContext(conf).var 系统会自动提示,可以自动补全,如图: 2.ctrl+i与ctrl+o的区别: ctrl + ...

  10. Java大数相加（多个大数相加）-hdu1250

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1250 题目描述: 题目大意是:已知一个Hat's Fibonacci序列,该序列满足F(1) = 1, ...