使命称号:相应式砸蛋页面
使命背景
先辈:方方啊,近来项目也没什么事变,你看这个砸蛋页面不是很悦目,要不你做一个相应式砸蛋页面吧?
体系:郑方方接下先辈的使命 – 郑方方自动剖析使命步骤
使命:相应式砸蛋页面
HTML5与CSS3入门 – 浏览《HTML5秘笈》(0/1)
相应式规划(0/1)
制造Canvas层(0/1)
搭配Javascript(0/1)
搭配PHP掌握器 (0/1)
完成使命(0/1)
人物背景引见:郑方方
主职:小白PHP码畜;副职:Acer
妙技:用饭、睡觉
特性:只身狗
进修正文和代码
相应式规划 Begin
由于我不是前端,所以运用Bootstrap的visible-xs
和hidden-xs
,关于一些特别的请求就是用 @media
来举行调治.
我运用的是不晓得从那里引见的几种尺寸局限,以下:
@media (min-width: 970.1px) and (max-width: 1170px)
@media (min-width: 700.1px) and (max-width: 970px)
@media (min-width: 600px) and (max-width: 700px)
@media (min-width: 400px) and (max-width: 599.99px)
@media (max-width: 399.99px)
关于页面规划,我借助了 http://www.ibootstrap.cn/ 这个网站,以后再把代码下载下来本身举行修正.
Tip:垂直居中(主假如用于蛋一直在页面中心)
position: absolute;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
相应式规划(1/1)Over
制造Canvas层 Begin
制造Canvas层时我把动画分为三个
EggCanvas – 蛋(无其他CSS3结果)
HammerCanvas – 锤子(animation、rotate):锤子砸下去后锤子会复位
BoomCanvas – 爆炸殊效(animation、transform、opacity):Ajax查询后爆炸变大并消逝
Tip:为了让这些结果能兼容更多浏览器,我要这几个结果就会像下面代码,比方我的锤子结果
.AniHammer {
animation: AniHammer 0.5s;
-moz-animation: AniHammer 0.5s; /* Firefox */
-webkit-animation: AniHammer 0.5s; /* Safari and Chrome */
-o-animation: AniHammer 0.5s; /* Opera */
}
@keyframes AniHammer {
/*25% {*/
/*transform: rotate(45deg);*/
/*}*/
50% {
transform: rotate(-135deg);
}
100% {
transform: rotate(0deg);
}
}
@-moz-keyframes AniHammer /* Firefox */
{
/*25% {*/
/*-moz-transform: rotate(45deg);*/
/*}*/
50% {
-moz-transform: rotate(-135deg);
}
100% {
-moz-transform: rotate(0deg);
}
}
@-webkit-keyframes AniHammer /* Safari and Chrome */
{
/*25% {*/
/*-webkit-transform: rotate(45deg);*/
/*}*/
50% {
-webkit-transform: rotate(-135deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
@-o-keyframes AniHammer /* Opera */
{
/*25% {*/
/*-o-transform: rotate(45deg);*/
/*}*/
50% {
-o-transform: rotate(-135deg);
}
100% {
-o-transform: rotate(0deg);
}
}
这一段款式就是在0.5秒内,把动画结果分两步,第一步旋转到-135度,第二步就是旋转回0度.个中的-o-
,-webkit-
,-moz-
就是为了兼容.
搭配Javascript Begin
我不晓得刚打仗的人会怎样想Javascript 和 CSS3 的关联,我最最先的时刻还认为JS能掌握CSS3的动画行动呢,如今我觉得JS只能经由过程掌握元素的Class的attr( )
或许removeclass( )
,来完成我们想要的CSS3的一系列动画行动. (能够我如今还明白不够深,有谁明白的,贫苦给我科普科普)
挪动端和PC端离别对应两个事宜:Touch
事宜和Click
事宜,Touch事宜以下:
var EggTouch = function (){console.log('Hi')};
document.getElementById("LuckEgg").addEventListener('touchstart', EggTouch, false);
然则Canvas层发作的图片,相识过的人都晓得需要用JS去天生图象
// 1.加载蛋的图片
var EggCanvas = document.getElementById("LuckEgg");
var EggContext = EggCanvas.getContext("2d");
var EggImg = new Image();
EggImg.src = "./egg.png";
// 特别注意 - 要图片加载完才会涌现图片
EggImg.onload = function () {
// 还要在这里推断屏幕大小 --- 用于肯定天生的蛋的位置和大小
EggContext.drawImage(EggImg, 30, 20, 240, 120);
};
Tip:
每一次JS掌握带有自动实行的动画结果的元素,使其
display:block
,就会自动实行动画结果;运用
setTimeout( )
来完成某些结果,比方我的Boom结果爆炸持续时间是0.5秒,那末我就要在Boom后0.5秒再去实行其他函数.,如许就可以获得我们想要的结果.
制造Canvas层(1/1)Over
搭配Javascript(1/1)Over
搭配PHP掌握器 Begin
假如你们跟我一样同时运用了Touch和Click这两个事宜,那末能够会出如今浏览器测试的时刻,鼠标点击模拟手机状态下的touch行动,就会有两次POST
传到背景,这就可以够涌现客户投诉说:我砸蛋砸了一次,怎样次数就没了.之类的话语.所以在背景我会用redis
做一个很简单的锁,防备上面的状况的发作.
/** 防备touch 和 click 同时触发 */
self::$lock .= $user['uid'];
self::$luckValue = \Common\Common\MyRedis::getInstance()->get(self::$lock);
if (self::$luckValue && time() - self::$luckValue <= 1) {
exit;
} else {
\Common\Common\MyRedis::getInstance()->set(self::$lock, time(), 2);
}
搭配PHP掌握器 (1/1)
完成使命(1/1)
到此,使命也就做完了,个中一些比方什么字体大小,怎样查数据库,怎样掌握JS的一些营业细节我就不多说了.
毕竟我也只是第一次写博客,文中有什么毛病,或许思绪有题目,还愿望列位看客能指导指导.