JQuery手速测试小游戏实现思路详解


Posted in Javascript onSeptember 20, 2016

(-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手速测试小游戏实现思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
jQuery EasyUI API 中文文档 - Form表单
Oct 06 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
javascript cookie基础应用之记录用户名的方法
Sep 20 #Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 #Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 #Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 #Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 #Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 #Javascript
js Canvas实现圆形时钟教程
Sep 19 #Javascript
You might like
Yii使用技巧大汇总
2015/12/29 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
暑期辅导班宣传单
2015/07/14 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
Python基础之Socket通信原理
2021/04/22 Python
Python Django模型详解
2021/10/05 Python