(-1)写在前面

我用的chrome49，jquery3.0，我得到过399分，信不信由你。

(1)设计思路

两个p元素放在div里，每个p元素的高度和宽度都和div一样，当鼠标放在div上时，第一个p向上移动(更改marginTop值)，当鼠标离开div上时，第一个p向下移动。

(2)知识储备

a. :nth-child

　　#lol p:nth-child(1),当前元素p相对于他的父元素的所有子元素，如果第一个元素是p则匹配成功。

　　#lol :nth-child(1) 相当于#lol *:nth-child(1)

(3) 代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset=utf-8>

<script  type="text/javascript" src="debug-jquery-3.0.0.js"></script>

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<title>为了生活</title>

<style type="text/css">

*

{

margin:0px;

padding:0;

}

body

{

position:absolute;

}

#lol

{

width:400px;

height:400px;

position:absolute;

overflow:hidden;

cursor:pointer;

}

#lol p

{

width:400px;

height:400px;

}

#lol p:nth-child(1)

{

background:blue;

}

#lol p:nth-child(2)

{

background:orange;

}

</style>

<script type="text/javascript">

$(function()

{

var $lol = $("#lol"),

$oneP = $lol.children().first(),

$score = $("#score");

$lol.centerPos();

$lol.hover(function()

{

$oneP.animate({marginTop:-$oneP.height()},400)

},function()

{

var number = -parseInt($oneP.css("marginTop"));

if(number == $oneP[0].offsetHeight)

{

number = 0;

}

$(score).text(number);

$oneP.stop(true,false).animate({marginTop:0},400);

})

})

$.fn.centerPos = function()

{

var parent;

this.each(function(index)

{

parent = this.parentNode;

if(parent == document.body)

{

parent = window;

}

var position = $(this).css("position");

if(position == "fixed" || position=="absolute")

{

$(this).css("left",($(parent).width()-this.offsetWidth)/2+"px")

.css("top",($(parent).height()-this.offsetHeight)/2+"px");

}

else

{

window.console.error("没有设置有效的position值");

}

})

return this;

}

</script>

</head

<body>

<div>当前得分：<span id="score">0</span>分</div>

<div id="lol">

<p></p>

<p></p>

</div>

</body>

</html>

JQuery测手速小游戏-遁地龙卷风的更多相关文章

  1. 在HTML页面中有jQuery实现实现拼图小游戏

    1.用jQuery实现拼图小游戏 2.首先获得td的点击事件.再进行交换位置 3.下面这种仅供参考 4.下面这些是HTMl标签 当这个世界变得越来越复杂的时候,内心最需保持一份简单一份纯真:

  2. 几款用jQuery写的h5小游戏

    人人都说前端用来做游戏是一件很困难的事情,遇到这些js的逻辑性问题,是不是有点懵?其实,做完一款游戏之后就会发现,没啥难的地方,差不多都是换汤不换药,作为爱玩游戏的我,也总结收集了几款比较流行的小软件 ...

  3. jQuery网页版五子棋小游戏源码下载

    体验效果:http://hovertree.com/texiao/game/4/ 网页五子棋源代码: <!DOCTYPE html> <html> <head> & ...

  4. jQuery实现拼图小游戏

    小熊维尼拼图                                                                                    2017-07-23 ...

  5. Vue.js小游戏：测试CF打狙速度

    此项目只测试反应速度,即手点击鼠标的反应速度 html代码 <div id="top">请等待图片变颜色,颜色便的那一刻即可点击测手速</div> < ...

  6. Python 小游戏 Bunny

    最近在学习Python,所以上网找了一个小程序练练手. 关于这款名为[Bunny]的小游戏,详细请看下面的链接: http://www.oschina.net/translate/beginning- ...

  7. 打字机游戏Ⅱ之手速pk

    前言 demo预览->typewriter gameⅡ (chrome only 没做兼容) 别看一开始时速度不快,会线性增长的哦,反正楼主的score还没达到过40... 为什么叫Ⅱ呢?之前写 ...

  8. js、jQuery实现2048小游戏

    2048小游戏 一.游戏简介:  2048是一款休闲益智类的数字叠加小游戏 二. 游戏玩法: 在4*4的16宫格中,您可以选择上.下.左.右四个方向进行操作,数字会按方向移动,相邻的两个数字相同就会合 ...

  9. .NET手撸2048小游戏

    .NET手撸2048小游戏 2048是一款益智小游戏,得益于其规则简单,又和2的倍数有关,因此广为人知,特别是广受程序员的喜爱. 本文将再次使用我自制的"准游戏引擎"FlysEng ...

随机推荐

  1. virtualenv中ImportError: No module named django

    问题现象:在代码py文件中,import django 报错,但是在python shell中直接执行这个语句没错, 网上搜索了下,自己测试了下,确定原因是由于使用了python中的virtualen ...

  2. Altium Designer 15 --- Design PCB Frame by Rhinoceros

    step 1: Draw a PCB shape and the main component placed in the PCB. The drawing sheet should be in th ...

  3. map转json

    if (javaObject instanceof Map) { Map<Object, Object> map = (Map<Object, Object>) javaObj ...

  4. SQL Server编程（05）游标【转载】

    在关系数据库中,我们对于查询的思考是面向集合的.而游标打破了这一规则,游标使得我们思考方式变为逐行进行.对于类C的开发人员来着,这样的思考方式会更加舒服. 正常面向集合的思维方式是: 而对于游标来说: ...

  5. 转: CvMat，Mat和IplImage之间的转化和拷贝

    1.CvMat之间的复制 //注意:深拷贝 - 单独分配空间,两者相互独立 CvMat* a; CvMat* b = cvCloneMat(a); //copy a to b 2.Mat之间的复制 / ...

  6. Win8下安装.Net3.5的完美策略

    在Win8中运行之前的.Net版本(4.0以下)写的程序时,会出现需要安装.Net 3.5的提示.但是你使用在线安装的话是无法成功的,在线升级会遇到错误0x800F0906.明明Win8系统集成的是. ...

  7. UIProgressView(进度条控件)

    UIProgressView *pr=[[UIProgressView alloc]init]; pr.frame=CGRectMake(150.0, 190.0, 130.0, 30.0);//进度 ...

  8. JavaWeb学习笔记——开发动态WEB资源（五）servlet身份验证

    本工程的功能是实现Javaweb的servlet身份验证 一下是login.html文件中的代码 <!DOCTYPE html> <html> <head> < ...

  9. 网站为什么要做SEO

    网站为什么要做seo,不做seo可以吗?因为seo是获得流量比较稳定.长久的方式,也是自身品牌的最好的方式.我们做的网站必须有用户访问或者被用户知道才有价值和意义,而想被用户所了解的话,必须做网络营销 ...

  10. CSS浮动属性Float介绍

    #cnblogs_post_body h6 {font-size: 16px;font-weight: bold;} 什么是CSS Float? float 是 css 的定位属性.在传统的印刷布局中 ...