你的位置:首页 > Java教程

[Java教程]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>