工作出现较大调整,更新速度将放缓

JS实现放大镜效果

HTML5&CSS3 Alan 5年前 (2014-09-13) 305次浏览 0个评论

电商网站中会经常出现图片的放大效果,在产品页面尤为常见,如淘宝、京东、一号店等网站都会采用悬浮鼠标在右侧出现图片放大效果。
要实现这种效果可能过JS或jQuery等代码来实现,示例效果如下(通过将鼠标悬浮在下面的图片上进行查看):

首先通过getElementById或其它方法来获取各个对象,然后通过onmouseover和onmouseout事件来显示和隐藏放大镜和右侧图片,示例代码如下:

objMark.onmouseover = function(){
objFloatBox.style.display = "block";
objBigBox.style.display = "block";
}

objMark.onmouseout = function(){
objFloatBox.style.display = "none";
objBigBox.style.display = "none";
}

核心代码为onmousemove事件

objMark.onmouseover = function(){

objFloatBox.style.display = "block";
objBigBox.style.display = "block";
}

objMark.onmouseout = function(){

objFloatBox.style.display = "none";
objBigBox.style.display = "none";
}

objMark.onmousemove =function(ev){
var _event = ev || window.event;//使用window.event解决IE兼容问题

var left = _event.clientX - objDemo.offsetLeft - objMark.offsetLeft - objFloatBox.offsetWidth/2;
var top = _event.clientY - objDemo.offsetTop - objMark.offsetTop - objFloatBox.offsetHeight/2;
//解决放大镜框脱离出左侧小图片的问题
if(left <0){ left = 0; }else if(left > (objMark.offsetWidth - objFloatBox.offsetWidth)){
left = objMark.offsetWidth - objFloatBox.offsetWidth;
}
if(top < 0){ top = 0; }else if(top > (objMark.offsetHeight - objFloatBox.offsetHeight)){
top = objMark.offsetHeight - objFloatBox.offsetHeight;
}
//鼠标移动获取放大镜悬浮框的位置
objFloatBox.style.left = left+ "px";
objFloatBox.style.top = top + "px";
//计算大图片显示相对小图片的放大比例
var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);
//鼠标移动获取右侧大图片的位置
objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
}

喜欢 (0)
[]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址