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

时间:2021-12-18 04:32:40

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