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

遇到一种情况，就是运用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>

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

原文地址：https://www.cnblogs.com/sqyambition/p/9074759.html