鼠标移动到图片上右边显示放大镜效果。

最新推荐文章于 2024-05-06 17:37:47 发布

xianyao_shi

最新推荐文章于 2024-05-06 17:37:47 发布

阅读量5.6k

点赞数

文章标签： xhtml javascript html

本文链接：https://blog.csdn.net/xianyao_shi/article/details/8468964

版权

这篇博客介绍了一种使用JavaScript实现的网页图片鼠标悬停时显示放大镜的效果。通过HTML和CSS布局，结合JavaScript事件处理和坐标计算，实现了在鼠标移动过程中实时展示放大部分的功能。该代码示例兼容不同浏览器，并且可以防止IE6下的select元素被遮挡。

摘要由CSDN通过智能技术生成

<!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

最低0.47元/天解锁文章

xianyao_shi

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
鼠标移动到图片上右边显示放大镜效果。

Magnifier#magnifier{width:342px;height:420px;position:absolute;top:100px;left:250px;font-size:0;border:1px solid #000;}#img{width:342px;height:420px;}#Browser{
复制链接

扫一扫