用原生的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. bzoj4428

    题解: f[i]=f[n/(j+1)向上取整]+p*j+k 然后可以通过枚举每个数的因子来做 时间复杂度nlogn(打表看了一下sigma (i因子个数) 是比较接近nlogn的) 可以有方法优化到n ...

  2. BZOJ 4282(慎二的随机数列

    题解: 网上题解还没看 我的方法是用平衡树维护一个单调栈 由于N用了一定是赚的 所以它的作用是让f[i+1]=f[i]+1 这个是可以记录的 就跟noip蚯蚓那题一样 然后插入一个值的时候查询前面的最 ...

  3. Python hasattr,getattr,setattr,delattr

    #!/usr/bin/env python # -*- coding:utf-8 -*- # 作者:Presley # 邮箱:1209989516@qq.com # 时间:2018-11-04 # 反 ...

  4. Anslib 使用错误归纳

    一.遇到问题 [root@localhost ansible]# ansible test43 -m ping -kSSH password: 192.168.30.43 | FAILED! => ...

  5. js网页下载csv格式的表格

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. BZOJ1823 [JSOI2010]满汉全席 2-sat

    原文链接http://www.cnblogs.com/zhouzhendong/p/8125944.html 题目传送门 - BZOJ1823 题意概括 有n道菜,分别可以做成满式和汉式(每道菜只能做 ...

  7. SSM整合——完全版

    1, 2, 3, 4,项目建立好后: 覆盖pom.xml,地址在:https://blog.csdn.net/mark_lirenhe/article/details/80875266 alt+F5= ...

  8. CSS选择器 + Xpath + 正则表达式整理（有空再整理）

    选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstna ...

  9. Raspberry Camera详解+picamera库+Opencv控制

    使用树莓派的摄像头,将树莓派自身提供的picamera的API数据转换为Python Oencv可用图像数据: # import the necessary packages from picamer ...

  10. 爬虫3 requests基础2 代理 证书 重定向 响应时间

    import requests # 代理 # proxy = { # 'http':'http://182.61.29.114.6868' # } # res = requests.get('http ...