<body onload="init()">
<div id="snapDiv">
<img src="Lighthouse.jpg" />
<span id="zoomSpan" style="display: none;"></span>
<div id="mask" class="show"></div>
</div>
<div style="display: none;" id="viewDiv">
<img id="bigImg" src="Lighthouse.jpg" />
</div>
</body>
#snapDiv { width:300px; height:300px; position:relative; margin:30px;}
#snapDiv img{width:300px;/* height:300px;*/}
#snapDiv span {
width:100px; height:100px;
background:#f00;
left:0px;top:0px;
position:absolute;
display:none;
filter:alpha(opacity:20); opacity:0.2;
}
.show {
width:100%;
height:100%;
position:absolute;
z-index:10;
cursor:move;
left:0px; top:0px;
filter:alpha(opacity:1);
opacity:0.01;
/*IE 下必须添加background属性或者 border属性，否则不会触发onmouseover事件*/
background-color:#fff;
}
#viewDiv {
width:300px; height:300px;
border:1px solid #000;
top:10px;right:10px;
position:absolute; display:none; overflow:hidden;}
#viewDiv img { position:absolute;}
function init() {
var oDiv = document.getElementById('snapDiv');
var oShow = document.getElementById('mask');
var oSpan = document.getElementById('zoomSpan');
var oImg = document.getElementById('bigImg');
var snapPic = oDiv.getElementsByTagName('img')[0];
var viewDiv = document.getElementById('viewDiv');
/*重新计算遮盖层长宽*/
oShow.style.width = snapPic.width + 'px';
oShow.style.height = snapPic.height + 'px';
oShow.onmouseover = function() {
oSpan.style.display = 'block';
viewDiv.style.display = 'block';
/* 重新定义长宽，可以确保视图里面放大的区域是一致的。
* 如果oSpan的长宽一致，则viewDiv的长宽也一致。即viewDiv.style.width = viewDiv.style.height*/
viewDiv.style.width = oSpan.offsetWidth*oImg.offsetWidth/snapPic.width + 'px';
viewDiv.style.height = oSpan.offsetHeight*oImg.offsetHeight/snapPic.height + 'px';
};
oShow.onmouseout = function() {
oSpan.style.display = 'none';
viewDiv.style.display = 'none';
};
oShow.onmousemove = function(ev) {
var oEvent = ev || event;
var x = oEvent.clientX - oDiv.offsetLeft - oSpan.offsetWidth / 2;
var y = oEvent.clientY - oDiv.offsetTop - oSpan.offsetHeight / 2;
if (x < 0) {
x = 0;
} else if (x > oShow.offsetWidth - oSpan.offsetWidth) {
x = oShow.offsetWidth - oSpan.offsetWidth;
}
if (y < 0) {
y = 0;
} else if (y > oShow.offsetHeight - oSpan.offsetHeight) {
y = oShow.offsetHeight - oSpan.offsetHeight;
}
oSpan.style.left = x + 'px';
oSpan.style.top = y + 'px';
var percentX = x / (oShow.offsetWidth - oSpan.offsetWidth);
var percentY = y / (oShow.offsetHeight - oSpan.offsetHeight);
oImg.style.left = -percentX
* (oImg.offsetWidth - viewDiv.offsetWidth) + 'px';
oImg.style.top = -percentY
* (oImg.offsetHeight - viewDiv.offsetHeight) + 'px';
};
}
分享到：
相关推荐
在网页设计中，为了提升用户体验，常常会使用到图片放大镜效果。这种效果可以让用户在鼠标悬停在图片上时，看到图片的局部放大视图，就像在实体店中通过放大镜查看商品细节一样。本教程将详细介绍如何使用jQuery实现...
**jQuery 淘宝商品图片放大镜** 在电商网站中，商品图片的展示往往需要具有交互性和细节展示功能，以帮助消费者更好地了解产品。其中，淘宝商品图片放大镜就是一个非常典型的例子，它允许用户在不离开当前页面的...
本文将深入探讨如何利用C#实现一个WinForm窗体中的图片放大镜功能。这个功能允许用户在界面上自由放大图片，查看图像的细节部分。 首先，我们需要创建一个新的WinForm项目。在Visual Studio中，选择"文件" -> "新建...
使用react写一个仿图片放大镜效果使用react写一个仿图片放大镜效果
"精美的图片放大镜"是一种常见的网页交互效果，它允许用户在鼠标悬停或点击时对图片进行放大，以查看细节。这种技术广泛应用于电子商务网站的产品展示，博物馆在线展览，或者任何需要展示图像细节的场景。以下是关于...
在IT领域，图片放大镜效果是一种常见的用户交互技术，它主要应用于网页设计、图像查看软件以及各种图形用户界面中。这种效果使得用户可以方便地在不离开原位的情况下，通过鼠标移动来查看图像的局部细节，提升用户...
**jQuery 图片放大镜插件实现详解** 在网页设计中，为了给用户提供更好的购物体验，尤其是在展示商品细节时，图片放大镜功能变得越来越普遍。jQuery 是一个轻量级、高性能的 JavaScript 库，它简化了HTML文档遍历、...
本项目实现的就是这样的功能，利用JavaScript库jQuery来创建一个图片放大镜效果，模拟了诸如卓越等购物网站的商品图片展示体验。 首先，我们要了解jQuery。jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML...
"jQuery对比图片放大镜查看代码"就是一种能够提升用户体验的技术，它允许用户在鼠标悬停时，对图片进行放大查看，尤其适用于电商产品展示、艺术作品欣赏等领域。本篇文章将详细介绍这一技术的实现原理和具体步骤。 ...
**jQuery 图片放大镜实例详解** 在Web开发中，为用户提供高质量的图片预览体验是提升网站用户体验的重要一环。jQuery图片放大镜插件能够帮助我们实现这一目标，让用户在鼠标悬停或点击图片时看到放大的细节部分，...
在网页设计中，图片放大镜效果是一种常见的交互设计，它能提供用户更细致查看产品细节的能力，尤其在电商网站上非常常见。JavaScript 是实现这种效果的理想选择，因为它可以在客户端动态处理DOM元素，实现即时的视觉...
在网页设计中，图片放大镜效果是一种常见的交互设计，它能提供用户更细致查看商品细节的能力，尤其是在电商网站上，如淘宝。这个效果通常通过JavaScript库实现，其中jQuery是一个广泛使用的选项，因其简洁的API和...
"jquery仿凡客图片放大镜"是一种常见的交互式图片展示技术，它模仿了像淘宝这样的大型购物平台的图片放大功能，让用户在不离开当前页面的情况下，能够清晰地查看商品的细节。下面我们将深入探讨这一技术的工作原理、...
在网页设计中，为了提升用户体验，常常会使用到图片放大镜功能，特别是在电商网站上，用户需要更清晰地查看商品细节。jQuery作为一个轻量级、功能丰富的JavaScript库，提供了实现这种效果的便捷途径。本教程将详细...
在JavaScript（JS）中实现图片放大镜功能是一项常见的前端交互设计任务，主要目的是为用户提供一个可以查看图片细节的工具，类似我们在实体商店中使用的放大镜。这个功能在电商网站、产品展示页面等场合非常常见。...
网页图片放大镜是一种常见于电子商务网站的技术，它允许用户在查看产品图片时，通过鼠标悬停或点击来放大图片的特定区域，以便更清楚地看到细节。这种技术提高了用户体验，尤其是对于那些销售需要细节展示的商品，如...
在网页设计和开发中，有时候为了提供用户更好的交互体验，我们常常会利用JavaScript或相关的库实现一些特殊的效果，比如图片放大镜效果。标题中的"zoomimage"就是这样一个功能，它能够在用户点击图片时，呈现出一个...
在网页设计中，为了提升用户体验，常常会使用到图片放大镜效果。这种效果可以在用户将鼠标悬停在图片上时，使图片的部分区域以更大的比例显示，方便用户查看细节。"jquery图片放大镜效果鼠标移到图片放大CloudZoom...
在网页设计中，为了提升用户体验，常常会使用到图片放大镜效果。这种效果可以让用户在鼠标悬停在图片上时，看到图片的局部放大视图，就像在实体店中通过放大镜观察商品一样。jQuery，一个广泛使用的JavaScript库，...