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 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
Node.js模块加载详解
Aug 16 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 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
一个改进的UBB类
2006/10/09 PHP
php中实现记住密码自动登录的代码
2011/03/02 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
基于JQuery的密码强度验证代码
2010/03/01 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
Python之列表实现栈的工作功能
2019/01/28 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
怎样写留学自荐信
2013/11/11 职场文书
语文教育专业应届生求职信
2013/11/23 职场文书
应届生如何写自荐信
2014/01/05 职场文书
新春寄语大全
2014/04/09 职场文书
教师辞职书范文
2015/02/26 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js