遇到一种情况,就是运用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>转载于:https://www.cnblogs.com/sqyambition/p/9074759.html
