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小技巧
Mar 01 Javascript
JS验证身份证有效性示例
Oct 11 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
JS+Ajax实现百度智能搜索框
Aug 04 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
Vue实现图片与文字混输效果
Dec 04 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
PHP获取当前所在目录位置的方法
2014/11/26 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
PHP钩子实现方法解析
2019/05/21 PHP
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
关键字final的用法
2013/10/02 面试题
销售人员自我评价怎么写
2013/09/19 职场文书
医学院护理专业应届生求职信
2013/11/12 职场文书
机电一体化应届生求职信范文
2014/01/24 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
和谐社区口号
2014/06/19 职场文书
公司门卫岗位职责
2015/04/13 职场文书
详解Vue slot插槽
2021/11/20 Vue.js