显示一个DIV和隐藏一个DIV

首先,我们要显示一个DIV和隐藏一个DIV需要使用css里面使用:

.hide{ display:none;}

.show{display:block;}

在需要显示或隐藏的DIV输入:

<div id="title" class="show"></div>

<div id="title" class="hide"></div>

----------------------------------------------------------

  还有一种点击显示和隐藏方法:

js里面的:

function fun(){
           var div=document.getElementById("div1");
           div1.style.display="none";
       }

<div id="title" onclick="fun()"></div>

----------------------------------------------------------

另外一种方法:

在js里面需要封装一个函数:

function showDIV(id){
        var obj=document.getElementById(id);
       obj.setAttribute("class","show");
      }
       function hideDiv(id){
           var obj=document.getElementById(id);
           obj.setAttribute("class","hide");
       }

只需要在需要显示或隐藏的DIV里面输入:

<div id="stop" onclick="showDIV('end')"></div>

<div id="end">123</div>

需要注意的是:在输入id时,需要加引号。

----------------------------------------------------------

让背景图片动起来:

首先定义1个动画名称:

@keyframes myfirst
    {
         0% {background-position: 1920px 0px;}
        100% {background-position: 0px 0px;}
      }

这里需要注意的是:我们要改变的不是背景图片的宽度,而是背景图片的起始位置。所以用到background-position。

再将定义的动画添加到需要实现移动的div上

#div{ animation: myfirst 7s linear infinite;}

就能够实现背景的移动

----------------------------------------------------------

 在一个大DIV里面,有个小的div,我们需要移动小的DIV,而不影响大的div有3种方法:

1、设置大的div边框,这样移动小的div,大div就不会跟随移动了。

<div id="div1">

<div id="div2"></div>

</div>

在css里面:

#div1{

width:200px;

height:200px;

border: 1px solid red;}

#div2{

width:100px;

height:100px;

border: 1px solid red;

margin:10px auto;    }

2.设置小的div的padding的值,需要注意的是,设置padding想上移动,需要在div的高度上进行相减,不然会改变div 的大小。

#div2{

width:100px;

height:90px;

border: 1px solid red;

padding:10px auto;    }

3.在大div和小div之间加上一个空格和div,设置div的高度为0。

<div id="div1">

<div style:"height:opx;">&nbsp;</div>

<div id="div2"></div>

</div>

----------------------------------------------------------

 在js里面,结束动画移动的时候,我们想让等上几秒才显示另外一个div

需要以下几步:

1,给之前定义的时钟器命名一个id

然后再取消时钟器。

2,再调用setTimeout

function gameOver(){

clearInterval(id);

       setTimeout(function(){
                fun();
                },2000)
}

这样就能实现结束时钟器时,过2秒,显示fun()里面的内容。

html5小游戏基础知识的更多相关文章

  1. HTML5小游戏UI美化版

    HTML5小游戏[是男人就下一百层]UI美化版 之前写的小游戏,要么就比较简单,要么就是比较难看,或者人物本身是不会动的. 结合了其它人的经验,研究了一下精灵运动,就写一个简单的小游戏来试一下. 介绍 ...

  2. 推荐10款超级有趣的HTML5小游戏

    HTML5的发展速度比任何人的都想像都要更快.更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,希望大家能够喜欢! Kern Typ ...

  3. 通通制作Html5小游戏——第二弹(仿flappy bird像素鸟)

    亲爱的博友们,我又回来啦~因为我们技术宅的思想只有技术宅懂得,好不容易写了点好玩的东西发QQ空间,结果只有11的UV,0回复....10分钟ps一个女神的素描效果发QQ空间朋友圈,一大堆回复加赞,作为 ...

  4. HTML5 Canvas(基础知识)

    最近笔者在学习HTML5的新元素<canvas>,会分享一些基础知识以及小例子,最终使用<canvas>实现一个绘制简单图表(条形图.线图或者饼图)的js库,会更新一到两篇文章 ...

  5. HTML5小游戏【是男人就下一百层】UI美化版

    之前写的小游戏,要么就比较简单,要么就是比较难看,或者人物本身是不会动的. 结合了其它人的经验,研究了一下精灵运动,就写一个简单的小游戏来试一下. 介绍一下几个主要的类: Frame:帧的定义,主要描 ...

  6. HTML5小游戏源码收藏

    html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js ...

  7. 菜鸟做HTML5小游戏 - 翻翻乐

    记录下开放过程.做小游戏开发,又要跨平台,flash又不支持iPhone,html5是最好的选择. 先看看最后效果: 好了,开始demo. 1.准备工作: 图片素材(省略...最后代码一起打包) 了解 ...

  8. Html5 小游戏 俄罗斯方块

    导言 在一个风和日丽的一天,看完了疯狂HTML 5+CSS 3+JavaScript讲义,跟着做了书里最后一章的俄罗斯方块小游戏,并做了一些改进,作为自己前端学习的第一站. 游戏效果: 制作思路 因为 ...

  9. HTML5小游戏之见缝插针

    今天给大家带来的就是一款叫做<见缝插针>的游戏.有空你就往里插,直到你无处可插!看你能过多少关! 简洁大气 黑白搭配游戏画面非常的简洁,米白色的背景中央,放置着一个不断旋转的太阳状的球体, ...

随机推荐

  1. 2016/11/17 周四 &lt;javascript的封装简单示例&gt;

    这是一个简单的javascript代码封装的示例以及封装后的调用方法: var ticker={ n:0, add:function() { this.n++; }, show:function() ...

  2. 关于iOS导航控制器隐藏和显示会出现返回键失效,导航栏标题动画异常

    最近做的demo  bug出现了,我觉得这个bug出现得很经典所以贴出来给大家看看, bug演示就是:点击返回键失效出现如下gif图演示的内容 为啥会出现如此奇葩的bug,系统的返回键居然失效了,尴尬 ...

  3. 第12条:考虑实现Comparable接口

    CompareTo方法没有在Object中声明,它是Comparable接口中的唯一的方法,不但允许进行简单的等同性比较,而且允许执行顺序比较.类实现了Comparable接口,就表明它的实例具有内在 ...

  4. php5魔术函数、魔术常量

    魔术函数 1.__construct()  实例化对象时被调用,  当__construct和以类名为函数名的函数同时存在时,__construct将被调用,另一个不被调用. 2.__destruct ...

  5. 数据迁移sql

    1.把数据库test中的表Table1中的数据插入到数据库test2中的表Table2:insert into test2.Table2(a,c,d) select a,c,5 from test.T ...

  6. Linux系列教程(十六)——Linux权限管理之ACL权限

    通过前面的两篇博客我们介绍了Linux系统的用户管理,Linux用户和用户组管理之相关配置文件 讲解了用户管理的相关配置文件,包括用户信息文件/etc/passwd,用户密码文件/etc/shadow ...

  7. [转]PuTTY字体颜色设置

    转载于 https://blog.csdn.net/cyd_shuihan/article/details/77836290 用putty登录Linux,默认配色方案看不清,我们可以自己设置新的字体大 ...

  8. leetcode每日刷题计划-简单篇day10

    跳题,不熟悉的留到周末再做. 保持冷静,不信画饼. num 100 相同的树 Same Tree 做法可能不是特别简洁,注意一下.最后判断完子树以后,要确定根的数值是一样的 然后在isleaf的判定先 ...

  9. 命令行添加subl命令

    添加了此命令后可以使用subl加文件或路径,就能通过命令行使用sublime text打开相应的文件或目录. 这里我的是MacOS,windows系统换路径就好. 第一步 sudo ln -s /Ap ...

  10. bracketed-paste-magic:zle:41: not enough arguments for -U

    原因是zsh的插件出问题了,解法方法如下: 把 ~/.oh-my-zsh/lib/misc.zsh 文件中的第一段 if 注释掉 OK 啦 # ]]; then # for d in $fpath; ...