用原生的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. [转] node升级到8.0.0在vscode启动js执行文件报错

    由于升级node 到 8.0.0 版本 vscode 启动一直报错: `node --debug` and `node --debug-brk` are invalid. Please use `no ...

  2. 【Android】Android 多个APK数据共享

    Android给每个APK进程分配一个单独的用户空间,其manifest中的userid就是对应一个Linux用户(Android 系统是基于Linux)的.所以不同APK(用户)间互相访问数据默认是 ...

  3. net core体系-web应用程序-3项目结构、配置文件详解

    一.应用程序文件结构 如下图所示,相比于Asp.Net项目,在新建的Asp.Net Core项目中,没有了Global.asax以及Web.config这样的文件,但多了几个其他主要的文件,它们分别为 ...

  4. 函数防抖 debounce

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. Codeforces 1017F The Neutral Zone 数论

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF1017F.html 题目传送门 - CF1017F 题意 假设一个数 $x$ 分解质因数后得到结果 $x=p ...

  6. NOIP2016提高组Day1T2 天天爱跑步 树链剖分 LCA 倍增 差分

    原文链接https://www.cnblogs.com/zhouzhendong/p/9275606.html 题目传送门 - 洛谷P1600 题目传送门 - LOJ#2359 题目传送门 - Vij ...

  7. pythonclass,day1-day2.

    由于是小白,真的一点点的基础都没有,所以压力确实有点大的.全程都是在碰壁,没有明白的地方,装个软件都问题层出不穷,别人几秒钟搞定的,我需要几十分钟,甚至更久...真的是,太强烈的挫败感了,整个人被乌云 ...

  8. Django中的Request和Response

    接触Django这么久了,从来没有好好学习关于Django中的Request和Response对象.借着文件上传下载的相关工作,现在总结一下也不错. 当一个页面请求过来,Django会自动创建一个Re ...

  9. 初窥Java之三

    一.基本数据类型之浮点型 每个数据它自身都有一个默认的类型,如果直接打印小数,默认类型就为double类型: float和double表示小数的精度不是特别的高,如果对于精确度要求非常的高,我们 都使 ...

  10. JavaEE 之 Mybatis

    1.Mybatis a.定义:MyBatis 是支持普通 SQL查询,存储过程和高级映射的优秀持久层框架 b.步骤: ①在src下创建 SqlMapConfig.xml 及 datasource.pr ...