H5图像遮罩-遁地龙卷风

(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>                 

                        

                         

 (1)知识准备

a. :nth-child

  #lol
p:nth-child(1),当前元素p相对于她的父元素的所有子元素,如若第一个因素是p则匹配成功。

  #lol :nth-child(1) 相当于#lol *:nth-child(1)

a.transform-origin   

transform-origin: x-axis y-axis z-axis;

x-axis取值为例left 、center 、right 、length
、%,默认center即50%,指的时x轴坐标原点绝对于元素宽的职务

y-axis取值为例top 、center 、bottom 、length
,%默认center即50%,指的时y轴坐标原点相对于元素高的岗位

 www.4688.com 1

个人感觉将x-axis、y-axis的取值对换会更好,就足以有如此的掌握:在left画y轴,在center画x轴,那么两轴的交点就是坐标轴原点了

 (1)设计思路

     
多少个p元素放在div里,每个p元素的惊人和宽度都和div一样,当鼠标放在div上时,第一个p向上移动(更改marginTop值),当鼠标离开div上时,第一个p向下移动。

b.过渡与转换的整合使用

transition-duration:500ms;

transform:rotate(0deg)

要素旋转到0度用时500ms

(2)知识储备

c. #lol:hover p:nth-child(2)

当鼠标放在id为lol的元素A上时,在A所有的子元素中只要第二个是p元素则匹配成功。

(-1)写在面前

自己用的chrome49,jquery3.0,我获取过399分,信不信由你。

(2)全体代码

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=utf-8>

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>

<title>为了生存</title>

<style type=”text/css”>

      *

      {

           margin:0px;

           padding:0;

      }

      #lol

      {

           width:222px;

           height:221px;

           position:relative;

           overflow:hidden;

           cursor:pointer;

           margin:20px auto;

           border:10px #333 solid;

     

      }

      #lol:hover p:nth-child(2)

      {

           transform:rotate(0deg)

      }

      #lol p:nth-child(2)

      {

           width:222px;

           height:221px;

           position:absolute;

           transition-duration:500ms;

           transform-origin:right bottom;

           transform:rotate(90deg);

           background:orange;

           top:0px;

           left:0px;

      }

</style>    

</head

<body>

      <div id=”lol”>

           <img src=”images/1.jpg”>

           <p>Hello World</p>

      </div>

</body>              

</html>                 

                        

                         

(-1)写在面前

其一idea不是自家的,向这位长辈致敬。我用的是chrome49。用到的图纸资源在自家的百度云盘里http://yun.baidu.com/share/link?shareid=1970396223&uk=1302053889

代码不可以运作,表明你的浏览器版本不够高,加上对应浏览器前缀,还分外,浏览器不协理。

以此案例给了自身很大启发,从剖析案例使用了咋样性质、在到哪边兑现,最终如故看了源代码才到位一模一样。

d.关键代码

#lol:hover p:nth-child(2)/*鼠标放在p元素上时接触*/

      {

           transform:rotate(0deg)

           /*www.4688.com,等价于transform:translate(0px,0px) rotate(0deg)
不要忘记默认属性*/

           /* transition-duration:500ms;transform-origin:right
bottom;不写也是相同的,因为#lol p:nth-child(2)设置了*/

      }

      #lol p:nth-child(2)/*浏览器突显p元素时举办*/

      {

           transition-duration:500ms;

           transform-origin:right bottom;

           transform:rotate(90deg);

           …

      }

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website