44.JS--hover事件防重复效果

Posted 2020-11-07 小白纯

遇到一种情况，就是运用hover事件的时候，会出现对象（主要是图片）闪动现象。主要是由于hover事件重复触发导致这一现象。

html:

<p class="smallImg" style="width:500px">
    <img class="eckPcImg" src="/{$theme_cur.thumb}" width="278" height="220" >
    <img class="eckMobileImg" src="/{$theme_cur.thumb_mobile}" width="150" height="220" style="margin-left:20px;" class="tempImages">
 </p>

<p class="smallImg" style="width:500px">
    <img src="/{$v.thumb}" width="280" height="220" class="tempImages">
    <img src="/{$v.thumb_mobile}" width="150" height="220" class="tempImages" style="margin-left:20px;">
</p>

js:

<script >
 $(function(){
 var isBigImgDiv=false;
  var BigImgDiv=‘<div id="btnBigImg" style="z-index:9999;position:fixed;top:50%;left:50%;margin-left:-350px;margin-top:-200px;box-shadow:0 10px 10px #ddd"><img src="" class="tempImages"></div>‘
      $(".smallImg>img").mouseenter(function(){
          if(isBigImgDiv)
          {
             return;
           }
           var imgSrc= $(this).attr("src");

          // console.log(imgSrc);
         $(document.body).append(BigImgDiv);
         $("#btnBigImg img").attr("src",imgSrc);
         $("#btnBigImg img").attr("width",$(this).attr("width")*2);
          $("#btnBigImg img").attr("height",$(this).attr("height")*2);
        isBigImgDiv=true;

       });


     var el = window.document.body;//声明一个变量，默认值为body
     window.document.body.onmouseover = function(event){
       el = event.target;//鼠标每经过一个元素，就把该元素赋值给变量el
      // console.log("class:",$(event.target).attr("class"),"isBigImgDiv:",isBigImgDiv);
       if(($(event.target).attr("class")!="tempImages"&&$(event.target).attr("class")!="eckPcImg"&&$(event.target).attr("class")!="eckMobileImg")&&isBigImgDiv){
       isBigImgDiv=false;
        $("#btnBigImg").remove();
       }
     }



 })

 </script>