<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Magnifier</title>
<style type="text/css">
#magnifier{
width:342px;
height:420px;
position:absolute;
top:100px;
left:250px;
font-size:0;
border:1px solid #000;
}
#img{
width:342px;
height:420px;
}
#Browser{
border:1px solid #000;
z-index:100;
position:absolute;
background:#555;
}
#mag{
border:1px solid #000;
overflow:hidden;
z-index:100;
}
</style>
<script type="text/javascript">
function getEventObject(W3CEvent) { //事件标准化函数
return W3CEvent || window.event;
}
function getPointerPosition(e) { //兼容浏览器的鼠标x,y获得函数
e = e || getEventObject(e);
var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
return { 'x':x,'y':y };
}
functio
鼠标移动到图片上右边显示放大镜效果。
最新推荐文章于 2023-05-21 16:35:04 发布
这篇博客介绍了一种使用JavaScript实现的网页图片鼠标悬停时显示放大镜的效果。通过HTML和CSS布局,结合JavaScript事件处理和坐标计算,实现了在鼠标移动过程中实时展示放大部分的功能。该代码示例兼容不同浏览器,并且可以防止IE6下的select元素被遮挡。
摘要由CSDN通过智能技术生成