JQuery手速测试小游戏实现思路详解
更新时间：2016年09月20日 09:21:59 作者：遁地龙卷风
这篇文章主要介绍了JQuery手速测试小游戏实现思路详解,本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下
(-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图表动画插件Highcharts Examples
官方提供免费的下载包以及详细的文档说明，非常的值得收藏。2011-04-04
下面小编就为大家带来一篇运用jQuery写的验证表单(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
jQuery1.6 使用方法，需要的朋友可以参考下。2011-11-11
本文主要是记录一个项目中用到的对输出的json进行格式化的小技巧，也是看到一位朋友分享的，这里mark一下，有需要的小伙伴也可以参考下。2014-11-11
uploadify ，简单实用的flash上传组件，兼容性良好。 现已有html5版本2012-06-06
这篇文章主要介绍了jQuery基于函数重载实现自定义Alert函数样式的方法,涉及jQuery函数重载及页面元素属性动态操作的相关技巧,需要的朋友可以参考下2016-07-07
这篇文章主要介绍了jQuery实现下滑菜单导航效果代码,通过jquery操作鼠标事件及页面样式动态操作实现下滑菜单导航功能,非常具有实用价值,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了jquery easyUI中ajax异步校验用户名，感兴趣的小伙伴们可以参考一下2016-08-08
遍历每一行的同时一定要记住这里是gridviewrow不是datarow，找到这个选中项在执行删除2013-04-04
利用jQuery及AJAX技术定时更新GridView的某一列数据
这篇文章主要介绍了利用jQuery及AJAX技术定时更新GridView的某一列数据的方法,这里的GridView是指C#软件开发中的GridView控件,需要的朋友可以参考下2015-12-12
最新评论