最近写的那个放大镜效果在ie浏览器兼容模式下出现了闪烁效果,由此去查询了jQuery的***mouseout***与***mouseover***事件的问题。
mouseout: 只要鼠标指针移出事件所绑定的元素或其子元素,都会触发该事件
mouseleave: 只有鼠标指针移出事件所绑定的元素时,才会触发该事件
如果没有子元素,那么该元素绑定两种事件效果没有区别,只会触发一次事件;如果绑定了mouseout事件的元素存在子元素,那么,每次移入该元素时都会触发一次事件(包括从外部移入和从子元素移入),移入子元素时也会触发一次事件。mouse over和mouseenter差别同理,所以就出现了如上的动态效果闪烁的问题,因为在不停的触发事件。因此我更正了mouseout事件为mouseleave ,mouseover改为了mouseenter。
然后我还发现了选区不准确的问题和跑图的问题(原则上要固定图片),因此一次性改正~
现在效果图如下:
逻辑部分做了更正,将放大区的偏移量二次赋值取消,改为了分情况赋值,更改了选区和放大展示区的大小,使之符合预期效果。
新更新代码如下:
html页面没更改
<div class="occCaseMain focus1">
<div class="occCaseMainL">
<div class="occCaseMainImg bigimageBox">
<img src="./images/Jewelryinspectionsystem.png" class="bigimage">
<div class="magnifier"></div> //鼠标选取区域
</div>
</div>
<div class="right">//放大后展示区域
<img src="" mirror>
</div>
........................
</div>
css更正:
.right {
position: absolute;
overflow: hidden;
width: 350px;
height: 220px;
left: 650px;
top: 0;
display: none;
z-index: 999;
}
.right img{
position: absolute;
width:954px;
height:594px;
}
.magnifier {
width: 240px;
height: 150px;
background: rgba(254, 238, 167, 0.4);
/* 半透明效果 */
position: absolute;
z-index: 2;
display: none;
}
JavaScript:
变更的部分是:边界非边界放大区的分类赋值,事件类型更正:从mouseout事件为mouseleave ,mouseover改为了mouseenter。
function bigger() {
this.init = function (obj) {
var _this = this;
this.dom = $(obj.el);
for (var i in obj) {
this[i] = obj[i]
}
_this.event();
},
this.event=function(){
var _this = this;
this.dom.find(".bigimageBox").mouseenter(function (even) {
_this.dom.find('.magnifier').css('display', 'block'); //遮罩显示
_this.dom.find('.right').css('display', 'block');
})
//当鼠标在原图中移动的时候
this.dom.find(".bigimageBox").mousemove(function (e) {
//放大镜框跟着鼠标移动而移动
//获取鼠标位置
var pageX = e.pageX;
var pageY = e.pageY;
//获取原图在文档中的偏移位置
var offsetX = _this.dom.find('.bigimage').offset().left;
var offsetY = _this.dom.find('.bigimage').offset().top;
//计算鼠标在原图里的相对位置
var relativeX = pageX - offsetX;
var relativeY = pageY - offsetY;
//鼠标在非边界的时候处于放大镜框的中心,根据鼠标位置计算放大镜的位置
var magOffsetX = _this.dom.find('.magnifier').width() / 2;
var magOffsetY = _this.dom.find('.magnifier').height() / 2;
var address = _this.dom.find('.bigimage').attr("src");
_this.dom.find("[mirror]").attr("src", address);
_this.dom.find('.magnifier').css({
left: relativeX - magOffsetX + 'px',
top: relativeY - magOffsetY + 'px'
});
//然后获取放大镜框的最新位置,处理边界情况会使用到
var magX = _this.dom.find('.magnifier').position().left;
var magY = _this.dom.find('.magnifier').position().top;
//处理边界问题!!!!!!!!!!!!!!!!
//首先确定边界!
var maxMagX = _this.dom.find('.bigimage').width() - _this.dom.find('.magnifier').width()
var maxMagY = _this.dom.find('.bigimage').height() - _this.dom.find('.magnifier').height()
// 左边界
var originX = magX * 1.5;
var originY = magY * 1.5;
//实现图片随着放大镜框的移动而移动
//按照比例缩放移动原图窗口中的图片
if (magX <= 0) {
_this.dom.find('.magnifier').css('left', '0px');
}else if (magX >= maxMagX) {
// 右边界
_this.dom.find('.magnifier').css('left', maxMagX + 'px');
}else{
_this.dom.find('[mirror]').css({left: -originX + 'px'})
}
// 上边界
if (magY <= 0) {
_this.dom.find('.magnifier').css('top', '0px');
// 下边界
}else if (magY >= maxMagY) {
_this.dom.find('.magnifier').css('top', maxMagY + 'px');
}else{
_this.dom.find('[mirror]').css({
top: -originY + 'px'
});
}
})
//鼠标离开
this.dom.find('.bigimageBox').mouseleave(function () {
_this.dom.find(".magnifier").css("display", "none");
_this.dom.find('.right').css("display", "none");
})
}
}