用原生的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. Note for "Some Remarks on Writing Mathematical Proofs"

    John M. Lee is a famous mathematician, who bears the reputation of writing the classical book " ...

  2. c_数据结构_顺序表

    #define OK 1 #define ERROR 0 #define OVERFLOW -2 #define LIST_INIT_SIZE 100 // 线性表存储空间的初始分配量 #define ...

  3. 数仓1.4 |业务数仓搭建| 拉链表| Presto

    电商业务及数据结构 SKU库存量,剩余多少SPU商品聚集的最小单位,,,这类商品的抽象,提取公共的内容 订单表:周期性状态变化(order_info) id 订单编号 total_amount 订单金 ...

  4. 总结sql中in和as的用法

    as有两个用法 1 query时,用来返回重新指定的值 example : select id as systemId from user: 2用来copy另外一张表的所有数据 example:cre ...

  5. 工作记录之 [ python请求url ] v s [ java请求url ]

    背景: 模拟浏览器访问web,发送https请求url,为了实验需求需要获取ipv4数据包 由于不做后续的内容整理(有内部平台分析),故只要写几行代码请求发送https请求url列表中的url即可 开 ...

  6. 最短路（bellman）-hdu1217

    Dijkstra算法是处理单源最短路径的有效算法,但它局限于边的权值非负的情况,若图中出现权值为负的边,Dijkstra算法就会失效,求出的最短路径就可能是错的. 这时候,就需要使用其他的算法来求解最 ...

  7. 【LeetCode算法-7】Reverse Integer

    LeetCode第7题: Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123 Outp ...

  8. POJ 2289 Jamie's Contact Groups 【二分】+【多重匹配】(模板题)

    <题目链接> 题目大意: 有n个人,每个人都有一个或者几个能够归属的分类,将这些人分类到他们能够归属的分类中后,使所含人数最多的分类值最小,求出该分类的所含人数值. 解题分析: 看到求最大 ...

  9. 解决Windows 系统下Chrome中有多个音频界面时 无法静音单个Tab界面的问题

    Open the browser and type this address into the URL bar: chrome://flags In the Search flags box at t ...

  10. css position相对定位与绝对定位彻底搞懂

    定位position position本身就有给...定位的意思 position属性的值: static ---默认值 relative ---相对定位 absolute ---绝对定位 fixed ...