Tips_方格拼图效果
用原生的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_方格拼图效果的更多相关文章
- Java_Class 16方格拼图游戏
public class Main { public static void main(String[] args) { // TODO Auto-generated method stub Game ...
- 一款基于jQuery/CSS3实现拼图效果的相册
之前为大家介绍了 HTML5 3D立体图片相册, HTML5图片相册重力感应特效, 基于CSS3图片可倾斜摆放的动画相册 今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度 ...
- 基于jQuery/CSS3实现拼图效果的相册插件
今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度倾斜放置在页面上,点击图片缩略图就可以展开图片,并且图片是由所有缩略图拼接而成,图片展开和收拢的动画效果也非常不错.当然图 ...
- 拼图游戏js
实现算法: 1. JavaScript动态生成拼图:通过生成16个div,且除最后一个div不使用背景图片以外,其他div都设置拼图图片为背景.然后通过调整background-position来实现 ...
- Atitit 常用比较复杂的图像滤镜 attilax大总结
Atitit 常用比较复杂的图像滤镜 attilax大总结 像素画滤镜 水彩油画滤镜 素描滤镜 梦幻镜 特点是中央集焦,周围景物朦化微带光晕,使人产生如入梦境的感觉.常用于拍摄婚纱.明星照,也用于其它 ...
- Atitit 图像处理 常用8大滤镜效果 Jhlabs 图像处理类库 java常用图像处理类库
Atitit 图像处理 常用8大滤镜效果 Jhlabs 图像处理类库 java常用图像处理类库1.1. 5种常用的Photoshop滤镜,分别针对照片的曝光.风格色调.黑白照片处理.锐利度.降噪这五大 ...
- 8个华丽的HTML5相册动画欣赏
HTML5的图片动画非常丰富,我们也在网站上分享过很多关于HTML5的图片动画.相册在网络中也十分常见,本文我们要分享一些比较华丽的jQuery/HTML5相册动画,希望大家喜欢. 1.HTML5 3 ...
- 【技术文档】《算法设计与分析导论》R.C.T.Lee等·第5章 树搜索策略
计算机中许多问题的解空间可以用一棵树来表示,最优解就在树中的一个分支上,因此,我们在解这类问题时可以采用树搜索策略,最经典的问题包括0/1背包问题.旅行商问题.哈密顿回路问题,还有8数码问题(就是我们 ...
- 8个超炫酷的jQuery相册插件欣赏
在网页中,相册应用十分常见,如果你经常逛一些社交网站,那么你应该会注意到很多各式各样的网页相册应用.今天我们要来分享一些最新收集的jQuery相册插件,这些精美的jQuery相册插件可以帮助你快速搭建 ...
随机推荐
- 【Android】修改Android 模拟器IMEI
修改Android 模拟器IMEI 在.....\android_sdk\tools文件下找到emulator-arm.exe,使用UltraEdit文本编辑器打开,搜索CGSN关键字,把000000 ...
- centos的基本操作
1.ssh连接阿里云一段时间不操作自动断开打开/etc/ssh/sshd_config添加或修改: ClientAliveInterval 120ClientAliveCountMax 0 2.挂载数 ...
- Codeforces 989D A Shade of Moonlight
A Shade of Moonlight 列列式子发现, 对于同一个云来说只有反向的云才能和它相交, 然后我们发现这个东西有单调性,然后二分就好啦. #include<bits/stdc++.h ...
- Codeforces 1101F Trucks and Cities dp (看题解)
Trucks and Cities 一个很显然的做法就是二分然后对于每个车贪心取check, 这肯定会TLE, 感觉会给人一种贪心去写的误导... 感觉有这个误导之后很难往dp那个方向靠.. dp[ ...
- spring ,springmvc,mybatis 最基本的整合，没有多余的jar包和依赖 2018.9.29日
最基本的ssm框架整合 本案例采用2018商业版intellij idea 编辑器 maven项目管理工具 tomcat8.5 接着上一篇使用springmvc最基本配置开始 https: ...
- P1233 木棍加工 dp LIS
题目描述 一堆木头棍子共有n根,每根棍子的长度和宽度都是已知的.棍子可以被一台机器一个接一个地加工.机器处理一根棍子之前需要准备时间.准备时间是这样定义的: 第一根棍子的准备时间为1分钟: 如果刚处理 ...
- README 语法记录
转自:nblogs.com/liugang-vip/p/6337580.html 正文: 1.标题的几种写法: 第一种: 前面带#号,后面带文字,分别表示h1-h6,上图可以看出,只到h6,而 ...
- 贪心+优先队列之更改优先级-hdu1896
题目描述: 题目理解: Sempr从位置0往前走,一路上他会遇到石子,如果这颗石子是他遇到的第奇数颗石子,那么他就把石子往前扔出去,如果他遇到的是第偶数颗石子,他会把它留在原地.需要注意的是,Semp ...
- 20165220 2017-2018-2《Java程序设计》课程总结
每周作业链接汇总: 20165220 我期望的师生关系 20165220 学习基础和C语言基础调查 20165220 Linux安装及学习 20165220 第一周学习总结 20165220 第二周学 ...
- hexo添加404公益界面
http://hellolb.top/2018/08/16/hexo添加404公益界面/ hexo个人博客添加404公益界面,这里我使用的腾讯404公益界面 我的博客主题是hexo+yilia,其实所 ...