JQuery手速测试小游戏实现思路详解
2016-09-20 09:21
561 查看
(-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手速测试小游戏实现思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- jQuery validate+artdialog+jquery form实现弹出表单思路详解
- vue实现2048小游戏功能思路详解
- jQuery validate+artdialog+jquery form实现弹出表单思路详解
- jQuery动态添加.active 实现导航效果代码思路详解
- 从零实现一个简易的jQuery框架之二—核心思路详解
- jQuery.Autocomplete实现自动完成功能(详解)
- 利用JQuery实现网页左侧树形菜单(IE6测试通过)
- jQuery.Autocomplete实现自动完成功能(详解)
- jquery实现Ajax小实例开发(图文详解开发流程)
- Jquery 实现Tab效果 思路是js思路
- jQuery.Autocomplete实现自动完成功能(详解)
- jQuery 数据缓存data(name, value)详解及实现
- jQuery 数据缓存data(name, value)详解及实现
- 关于发导航效果 用jquery 实现的小小的测试
- Struts2结合jquery autocomplet插件实现自动提示详解
- iOS_详解iPhone应用自动化测试案例实现
- 利用JQuery实现网页左侧树形菜单(IE6 IE7 Firefox测试通过)
- jQuery.Autocomplete实现自动完成功能(详解)
- jQuery数据缓存data(name, value)详解及实现
- [原创]持续给力:jQuery实现表格隔行变色效果案例详解