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相册插件可以帮助你快速搭建 ...
随机推荐
- HTML LIST 输入框自动查询追加框,自动过滤 HTML5
<!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp&q ...
- 集群LVS
集群分为LB负载均衡集群,HA高可用集群,LB高应用集群. 前两种比较常见 LB是更加注重性能处理速度,而HA注重是服务器的在线时间. HA集群一般设有主重,当主服务器当掉时候,重服务器进行工作,此时 ...
- web前端中navigator
<script> if(navigator.cookieEnabled){ document.write("浏览器已启用cookie,请妥善保存个人信息"); }els ...
- JavaScript 组数去重demo
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- day64 url用法以及django的路由系统
此篇博客是以备后查的,用到的时候记得过来查找即可! 路由系统:就是我们的django项目创建的时候自带的那个urls.py 它本身里面是映射的对应关系,一个大的列表里面,一个个元祖,元祖里面是url或 ...
- Mysql乐观锁与悲观锁
乐观锁和悲观锁是两种常见的资源并发锁设计思路,也是并发编程中一个非常重要的基础理念. Mysql的悲观锁 什么是悲观锁(Pessimistic Lock): 悲观锁的特点是先获取锁,再进行业务操作,即 ...
- gevent实现生产者消费者
from gevent import monkey;monkey.patch_all()from gevent.queue import Queue #队列 gevent中的队列import geve ...
- 安卓编程资源文件string中对占位符的使用详解
这里将为你详细介绍占位符的使用,将其学以致用,可以达到简化布局文件,减少字符串资源量. 1.在资源文件中的使用. 打开资源文件中的strings.xml文件,进行编辑.如下图所示: 图 1.0 2. ...
- 如何让自己的Dev C++用上C++11,c++14标准
首先确保Dev C++版本是最新的5.11版 其实用C++11和C++14标准的语法去运行还是会出现结果的,最多warning一下 但完美主义者是不允许这样的 我们可以点击菜单栏的“工具”-> ...
- POJ 2029 Get Many Persimmon Trees （模板题）【二维树状数组】
<题目链接> 题目大意: 给你一个H*W的矩阵,再告诉你有n个坐标有点,问你一个w*h的小矩阵最多能够包括多少个点. 解题分析:二维树状数组模板题. #include <cstdio ...