ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery：mouseenterイベントとmouseleaveイベントによりちらつきの問題が発生する
jQuery：mouseenterイベントとmouseleaveイベントによりちらつきの問題が発生する
- 黄舟オリジナル
- 2017-06-28 10:11:033359ブラウズ
みなさん、こんにちは。今日は画像拡大鏡用の jquery プラグインを作成します。これは、JD.com の製品写真の拡大鏡に似ています。
mouseenterとmouseleaveを画像オブジェクトにバインドした後、マウスが画像上を移動すると、mouseenterとmouseleaveが同時にトリガーされ、ちらつきが発生することがわかりました。ただし、mouseenter と Mouseleave が、たとえ同時にであっても繰り返し呼び出されるとは予想していません。どうやって解決すればいいでしょうか？オンラインでいくつかの方法を試しましたが、役に立ちませんでした。
皆さんありがとうございました。
$.fn.magnify = function() {
//var glassBox = options.glassBox || {};
//var detailBox = options.detailBox || {};
var glassBox = $('<span></span>');
glassBox.css({
"width": this.width() / 2 + 'px',
"height": this.height() /2 + 'px',
"background-color": 'grey',
"position": "absolute",
"left" : '0px',
"top": '0px',
'opacity': '0.2',
'display': 'none',
'border': '1px solid blue',
'z-index': 10
});
$(this).after(glassBox);
//glassBox.hide();
var detailBox = $('<div></div>');
var detailImage = $('<img></img>');
detailBox.css({
"width": this.width(),
"height": this.height(),
"display": 'none',
"position": 'relative',
"overflow": 'hidden'
//"background-color": 'lime'
});
detailImage.css({
"position": 'absolute'
});
detailImage.attr("src", this.attr("src"));
detailBox.append(detailImage);
this.after(detailBox);
this.mouseenter(function(event){
//event.stopPropagation();
glassBox.get(0).style.display = 'block';
detailBox.get(0).style.display = 'block';
});
this.mouseleave(function(event){
//event.stopPropagation();
if (event.relatedTarget !== "span") {
glassBox.get(0).style.display = 'none';
detailBox.get(0).style.display = 'none';
}
});
this.mousemove(function(event) {
/* Act on the event */
var x = event.pageX - this.offsetLeft - glassBox.width() / 2;
var y = event.pageY - this.offsetTop - glassBox.height() /2;
if (x < 0 ) {
x = 0;
} else if ( x > this.offsetWidth - glassBox.width()) {
x = this.offsetWidth - glassBox.width();
}
if (y < 0) {
y = 0;
} else if (y > this.offsetHeight - glassBox.height()) {
y = this.offsetHeight - glassBox.height();
}
glassBox.css({
left: x + 'px',
top: y + 'px'
});
detailImage.css({
"left": -3.5 * (event.pageX - this.offsetLeft) + 'px',
"top": -3.5 * (event.pageY - this.offsetTop) + 'px'
});
});
}HTMLは以下の通りです:
<html>
<head>
<script src="jquery-1.11.3.js"></script>
<script src="magnify.js"></script>
</head>
<style>
#imgTarget{
width: 300px;
height: 200px;
}
#imageArea{
position: relative;
}
</style>
<body>
<div id="imageArea">
<img id="imgTarget" src="car.jpg"/>
</div>
<script>
$( document ).ready( function(){
$("#imgTarget").magnify();
} );
</script>
</body>
</html>ちらつきの原因は以下の通りです:
mouseenterのmouseleaveイベントをimgにバインドしました
mouseenter imgのとき、imgの上層にglassBox
glassBoxを生成したので、 img とマウス カーソルをブロックすると、img の Mouseleave が生成されます
そこで、コードは再度 glassBox display=none を設定し、マウスは img に再度入ることができます
解決策 1
mouseenter Mouseleave を使用する代わりに、mousemove で直接、マウスの位置は img の範囲内にあります。
解決策 2
img と同じサイズのオーバーレイを作成します:
<div id="imageArea"> <img id="imgTarget" src="card.jpg"/> <div id="overlay"></div> </div>
#overlay {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 200px;
background: red;
opacity: 0.5;
z-index: 3;
}img glassBox オーバーレイの z-index 順序を保証します:
glassBox.css({
"width": this.width() / 2 + 'px',
"height": this.height() /2 + 'px',
"background-color": 'grey',
"position": "absolute",
"left" : '0px',
"top": '0px',
'opacity': '0.2',
'display': 'none',
'border': '1px solid blue',
'z-index': 2 // 保证glassBox在overlay的下面，在img的上面
});イベントはオーバーレイにバインドされます:
$( document ).ready( function(){
$("#overlay").magnify();
} );以上がjQuery：mouseenterイベントとmouseleaveイベントによりちらつきの問題が発生するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。