期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

JS移入移出效果详解

  如果把鼠标移入和鼠标移出都增加运动效果,则需要使用运动函数但是,有一个很重要的问题需要注意的是,鼠标移入移出的顺序问题,如果把移入移出事件都加在父元素的身上,则需要做如下处理

  由于鼠标从子元素移动到父元素上时,会触发子元素的移出事件,通过冒泡也会触发父元素移出事件。此时,有两种方法解决该问题。一种是在子元素移出事件中阻止冒泡,另一种是在父元素移出事件设置target判断条件。当target为父元素本身时才执行

  鼠标从父元素移动到子元素的过程中,会按照顺序触发父元素的移出事件、子元素的移入事件以及父元素的移入事件

  为了避免触发移入事件。此时,使用开关变量对移入事件的代码进行限制。移出事件代码完成之前不执行移入事件代码

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  </head>  <body>  <style>  #test{      width: 100px;      height: 100px;      background-color: lightblue;      text-align:center;      position:absolute;      top: 0;      left: -100px;  }      #test-in{      width: 30px;      height: 60px;      background-color: orange;      margin-left: 100px;      position:relative;      top: 20px;  }  </style>  <div id="test">      <div id="test-in">分享到</div>  </div>      <script>  var testIn = document.getElementById('test-in');  var timer1,timer2;  var onOff = false;  test.onmouseover = function(){      if(!onOff){              clearInterval(timer1);          timer1 = setInterval(function(){              if(!onOff){                  if(test.offsetLeft < 0){                      test.style.left = test.offsetLeft + 10 + 'px';                  }else{                      test.style.left = '0';                      clearInterval(timer1);                      timer1 = 0;                  }                                  }else{                  clearInterval(timer1);              }          },30);      }  }  test.onmouseout = function(e){      e = e || event;      var target = e.target || e.srcElement;      if(target === test){          //当触发父元素移出事件时,开启开关          onOff = true;          clearInterval(timer2);          timer2 = setInterval(function(){              if(test.offsetLeft > -100){                  test.style.left = test.offsetLeft - 10 + 'px';              }else{                  test.style.left = '-100px';                  clearInterval(timer2);                  timer2 = 0;                  //当运动结束后,关闭开关                  onOff = false;              }              },30);              }  }  </script>    </body>  </html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册