用原生的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. 记录一次因代理Controller产生的404问题

    spring 3.2.4 为了给每一个controller配置一个拦截器链 import com.google.common.collect.Lists; import org.aopalliance ...

  2. zookeeper 学习 zookeeper下载部署

    下载 http://mirror.bit.edu.cn/apache/zookeeper/ 校验 解压后得到zookeeper-3.4.10.jar,使用md5sum zookeeper-3.4.10 ...

  3. [转] git rm与git rm --cached

    当我们需要删除暂存区或分支上的文件, 同时工作区也不需要这个文件了, 可以使用 git rm file_path 当我们需要删除暂存区或分支上的文件, 但本地又需要使用, 只是不希望这个文件被版本控制 ...

  4. 使用jquery获取父元素或父节点

    使用jquery获取父元素或父节点,比较简单,jquery提供了丰富的方法来让我们使用jquery获取父元素或父节点   jquery获取父元素方法比较多,比如parent(),parents(),c ...

  5. Ubuntu学习

    一. Ubuntu简介 Ubuntu(乌班图)是一个基于Debian的以桌面应用为主的Linux操作系统,据说其名称来自非洲南部祖鲁语或科萨语的“ubuntu”一词,意思是“人性”.“我的存在是因为大 ...

  6. TopCoder SRM500 Div1 500 分治

    原文链接https://www.cnblogs.com/zhouzhendong/p/SRM500-500.html SRM500 Div1 500 没想到 double 的精度居然没有爆-- 考虑以 ...

  7. BZOJ1458 士兵占领 网络流 最大流 SAP

    原文链接http://www.cnblogs.com/zhouzhendong/p/8384699.html 题目传送门 - BZOJ1458 题意概括 有一个M * N的棋盘,有的格子是障碍.现在你 ...

  8. 01. Numpy模块

    1.科学计算工具-Numpy基础数据结构 1.1.数组ndarray的属性 NumPy数组是一个多维数组对象,称为ndarray.其由两部分组成:① 实际的数据② 描述这些数据的元数据 注意数组格式, ...

  9. Gson的两种实例化方式:

    2018-11-13   09:21:44 Gson的两种实例化方式: 1: 使用new Gson(); 普通实例化方式,不能配置定制化选项 Gson gson = new Gson(); 2: 通过 ...

  10. js判断上传图片文件大小，尺寸，格式

    /** * 文件宽高 * @param eventId id * @param w 宽度 * @param h 高度 * @param callback 回调函数这里判断图片像素的方法是异步的,所以需 ...