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 相关文章推荐
JObj预览一个JS的框架
Mar 13 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 Javascript
纯js实现手风琴效果
Apr 17 Javascript
node.js中 stream使用教程
Aug 28 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
vue+element实现批量删除功能的示例
Feb 28 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
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
ip签名探针
2006/10/09 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
javascript this用法小结
2008/12/19 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
js new Date()实例测试
2019/10/31 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python中xrange和range的区别
2014/05/13 Python
Python中的choice()方法使用详解
2015/05/15 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
应届生个人求职信模板
2013/11/26 职场文书
军训 自我鉴定
2014/02/03 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
MySQL创建索引需要了解的
2021/04/08 MySQL
Java如何实现树的同构?
2021/06/22 Java/Android
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle