<>强效果如下:
<强>代码如下:
& lt; !doctype html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>九宫格拼图& lt;/title>
& lt; style>
* {
填充:0;
保证金:0;
边界:0;
}/* *是通配符,给所有的元素去掉默认样式,因为有的浏览器会默认加上一些样式,这可能会给布局带来问题*/身体{
宽度:100%;
高度:100%;
}/*给身体设置100%的高度和宽度,这样就会根据浏览器屏幕大小自动适配*/#{容器
位置:相对;
宽度:620 px;
身高:450 px;
保证金:0汽车;
margin-top: 100 px;
border - radius: 1 px;
}/*这是包裹所有元素的DIV,给他设置620 px的宽和450 px的高,这个大小可以设置为更大,但是不能小,至少要能包含里面所有的元素*/#{游戏
位置:绝对的;
宽度:450 px;
身高:450 px;
border - radius: 5 px;
显示:inline-block;
background - color: # ffe171;
不必:0 0 10 px # ffe171;
}/*这是游戏区的DIV,这个大小是计算出来的,取决于你的小方块的大小。这里我们设置小方块的大小为150 px 150 px,所以这个大小是150 px * 3为450 px */#游戏div {
位置:绝对的;
宽度:149 px;
身高:149 px;
不必:1 px 1 px 2 px # 777;
background - color: # 20 a6fa;
颜色:白色;
text-align:中心;
字体大小:150 px;
行高:150 px;
光标:指针;
-webkit-transition: 0.3秒;/*浏览器前缀,兼容其他浏览器chrome */-moz-transition: firefox 0.3年代;/* */-ms-transition: 0.3秒;/* */-o-transition: 0.3秒;歌剧/* */过渡:0.3秒;
}/*这就是小方块的大小了,定位为绝对定位,这样改变位置不会影响其他元素的位置。宽高都是149 px。注意了,我们还设置了不必:1 px 1 px 2 px # 777;
它还有边框阴影,所以149 px加上边框1 px,它的总宽度是150 px下面的转型:0.3秒是设置过渡时间,这是css3的属性,它会让属性改变呈现过渡动画,所以
当我们改变方块的位置时,它会有一个动画,我们不必自己编写动画函数,这回让你疯狂*/#游戏div:{徘徊
颜色:# ffe171;
}/*给方块设置鼠标悬停动画,当鼠标悬停在元素上面时,会用这里的属性替换上面的属性,移开后又会变为原来的,这里我们是把字体颜色改变*/{#控制
宽度:150 px;
身高:450 px;
显示:inline-block;
浮:正确;
}/*控制区显示:inline-block会让元素呈现块状元素的特性,使得可以改变大小,同时也会具有行内元素的特性,使得不会占据一行空间,浮动:对让元素浮动到右边*/行宽{#控制
高度:25 px;
字体大小:20 px;
颜色:# 222;
margin-top: 10 px;
}/*设置控制区按钮的共同样式*/#{开始
显示:inline-block;
字体大小:28 px;
宽度:100 px;
高度:28 px;
background - color: # 20 a6fa;
颜色:# ffe171;
文本阴影:1 px 1 px 2 px # ffe171;
border - radius: 5 px;
不必:2 px 2 px 5 px # 4 c98f5;
text-align:中心;
光标:指针;
}/*给开始按钮设置属性.cursor:指针属性让鼠标移到元素上面时会显示不同的鼠标形状,指针是手型*/#{重置
显示:inline-block;
字体大小:28 px;
宽度:100 px;
高度:28 px;
background - color: # 20 a6fa;
颜色:# ffe171;
文本阴影:1 px 1 px 2 px # ffe171;/*字体阴影*/border - radius: 5 px;/*圆角属性*/不必:2 px 2 px 5 px # 4 c98f5;/*盒子阴影*/text-align:中心;/*文字居中*/光标:指针;
}/*给重置按钮设置属性*/# d1 {
左:0 px;
}
# d2 {
左:150 px;
}
# d3 {
左:300 px;
}
# d4 {
前:150像素;
}
# d5 {
前:150像素;
左:150 px;
}
# d6 {
前:150像素;
左:300 px;
}
# d7 {
前:300像素;
}
# d8 {
左:150 px;
前:300像素;
}/*这是预先给每个小方块按照顺序排好位置*/& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=叭萜鳌北?
& lt; !——最外面的DIV,用来包含里面的结构——比;
& lt; div id=坝蜗贰痹?
& lt; !——游戏区,大DIV方块——比;
& lt; div id=癲1”在1 & lt;/div>
& lt; !——小DIV,也就是8个小方块。当点击的时候执行移动()函数,参数是显示的编的号,这样我们就知道点击了哪个方块——比;
& lt; div id=癲2”在2 & lt;/div>
& lt; div id=癲3”在3 & lt;/div>
& lt; div id=" d4 "祝辞4 & lt;/div>
& lt; div id=癲5”在5 & lt;/div>
& lt; div id=" d6 "祝辞6 & lt;/div>
& lt; div id=" d7”在7 & lt;/div>
& lt; div id=" d8 "祝辞8 & lt;/div>
& lt;/div>
& lt; div id=翱刂啤北?
& lt; !——游戏控制区——比;
& lt; p>
& lt;行宽id=" timeText "祝辞总用时& lt;/rowspan>
& lt;行宽id=岸ㄊ逼鳌弊４? lt;/rowspan>
& lt;/p>
& lt; !——显示游戏时间区域——比;
& lt; p>
& lt;行宽id="开始"祝辞开始& lt;/rowspan>
& lt;行宽id=爸刂谩痹谥乩? lt;/rowspan>
& lt;/p>
& lt; !——显示控制按钮区域——比;
& lt;/div>
& lt;/div>
& lt; script>
var=0;//保存定时时间
var暂停=true;//设置是否暂停标志,真表示暂停
var set_timer;//设置定时函数
var d=new Array (10);//保存大DIV当前装的小DIV的编了号
var d_direct=新数组(
[0],//为了逻辑更简单,第一个元素我们不用,我们从下标1开始使用
(2、4)//大DIV编号为1的DIV可以去的位置,比如第一块可以去2,4号位置
(1、3、5)
(2,6),
(1、5、7)
(2、4、6、8),
(3、5、9),
4、8,
(5、7、9),
(6、8)
);//保存大DIV编号的可移动位置编的号
var d_posXY=新数组(
[0],//同样,我们不使用第一个元素//第(0,0),一个表示,第二个表示,比如第一块的位置为让:0 px,上图:0 px
(150,0),
(300,0),
[0150],
[150150],
[300150],
[0300],
[150300],
[300300]
);//大DIV编号的位置
[1]=1;d [2]=2; d [3]=3; d [4]=4; d [5]=5; d [6]=6; d [7]=7; d [8]=8; d [9]=0;//默认按照顺序排好,大DIV第九块没有,所以为0,我们用0表示空白块
函数移动(id) {//移动函数,前面我们已将讲了
var i=1;
(i=1;i
