一个图片放大功能，留着备用。
<!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>
<style type="text/css">
#div1 { width:304px; height:222px; position:relative; margin:30px auto 0px;}
#div1 img{width:304px; height:222px;}
#small{ width:100px; height:100px; background:red; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); opacity:0.2;}
.show { width:100%; height:100%; background:red; position:absolute; z-index:10px; filter:alpha(opacity:10); opacity:0.1; left:0px; top:0px; }
#div2 {width:300px; height:300px; position:relative; display:none; overflow:hidden; margin:0px auto 0px;}
#img1 { position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript 图片放大代码</title>
<script type="text/javascript">
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oShow=oDiv.getElementsByTagName('div')[0];
var oSpan=oDiv.getElementsByTagName('span')[0];
var oImg=document.getElementById('img1');
oShow.onmouseover=function()
{
oSpan.style.display='block';
oImg.parentNode.style.display='block';
};
oShow.onmouseout=function()
{
oSpan.style.display='none';
oImg.parentNode.style.display='none';
};
oShow.onmousemove=function(ev)
{
var oEvent=ev||event;
//可以调用计算鼠标坐标的方法，如果有滚动条的话，会出现问题
var x=oEvent.clientX-oDiv.offsetLeft-oSpan.offsetWidth/2;
var y=oEvent.clientY+ document.body.scrollTop-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);
var oImgparent=oImg.parentNode;
oImg.style.left=-percentX*(oImg.offsetWidth-oImgparent.offsetWidth)+'px';
oImg.style.top=-percentY*(oImg.offsetHeight-oImgparent.offsetHeight)+'px';
};
};
</script>
</head>
<body>
<div>
<div id="div1">
<img src="small.jpg" />
<span id="small"></span>
<div id="show" class="show"></div>
</div>
<div id="div2">
<img id="img1" src="big.jpg" />
</div>
</div>
</body>
</html>
分享到：
相关推荐
6. **自定义组件**：从提供的压缩包文件名称CLAmplifyView来看，这可能是一个已经封装好的自定义组件，用于实现图片放大功能。使用自定义组件可以简化代码，提高可复用性和一致性。你可以研究这个组件的源码，了解其...
在这个特定的案例中，这款颜色拾取器还配备了放大功能，使得选取过程更为精确，用户可以更加细致地观察屏幕上的颜色细节。 屏幕颜色拾取器的基本工作原理是捕捉屏幕上的图像，然后通过软件内部的算法分析该位置像素...
本文实例讲述了基于Visual C#实现的图片放大功能代码。可以直接放大像素，类似photoshop的图片放大功能，可用于像素的定位及修改，由于使用了指针需要勾选允许不安全代码选项，读者可将其用于自己的项目中！ 关于几...
通过自定义样式表或者组策略解决IE11浏览网页双击放大的问题，禁用IE双击放大的功能，避免玩游戏时的烦恼。 其中自定义样式表方式有一键配置bat，用起来很简单，将DisableIEScaleOnDClick.bat复制到合适的用于保存...
你是否希望MATLAB有一个放大镜，这样你就可以看到你的小块区域的细节，而不用一次又一次地放大和缩小?只需要把文件放在你的工作空间中，运行‘magnify.m’文件即可，然后使用鼠标左键弹出一个您所控制的放大的veiw。...
图片放大功能
在本项目中，标题"**C#实现类似淘宝图片局部放大功能源码.rar**"指出，我们关注的是一个使用C#编程语言实现的功能，该功能类似于淘宝网站上常见的一种图片查看方式，即当鼠标悬停在图片上时，能够显示图片的局部放大...
"类似淘宝产品图片放大功能的jquery插件"就是为了满足这种需求而设计的，它允许用户在不离开当前页面的情况下，通过鼠标悬停实现图片的局部放大，从而更清晰地查看商品细节。 jQuery是一种广泛使用的JavaScript库，...
本教程将详细讲解如何利用jQuery实现一个类似放大镜效果的图片放大功能，这一功能常用于电商网站，允许用户更清晰地查看商品细节。 首先，我们需要引入jQuery库。在HTML文件中添加以下代码，确保在你的项目中正确...
在网页设计中，实现“鼠标点击图片放大功能”是一个常见的需求，这主要应用于产品展示、图像查看等场景，可以提供用户更好的视觉体验。本资源包含了实现这一功能所需的源代码，包括HTML、JavaScript（jQuery库）以及...
【标题】：“鼠标经过图片放大功能” 在网页设计中，为用户提供良好的交互体验是至关重要的。其中，一种常见的增强用户体验的技巧就是实现“鼠标经过图片放大功能”。这种功能可以让用户在鼠标悬停在图片上时，图片...
在移动端开发中，图片放大功能是一项常见的需求，尤其在用户需要查看细节时。本文将详细介绍如何利用JavaScript、CSS和HTML来实现这一功能，同时结合ASP.NET的后台支持，为移动端应用提供更好的用户体验。 首先，...
5. 考虑响应式设计，确保在不同的设备和屏幕尺寸下，布局和图片放大功能都能正常工作。 这个项目提供了学习和实践使用jQuery和CSS布局技术的机会，对于想要提升前端开发技能的人员来说非常有价值。通过研究这些文件...
总结来说，实现“js仿淘宝主图放大功能”涉及HTML布局、CSS样式和JavaScript事件处理。通过巧妙地结合这三者，我们可以创建一个交互式的、用户体验良好的商品放大镜效果，即使在较旧的浏览器环境下也能正常工作。...
QQ空间作为一个广受欢迎的社交平台，其独特的下拉头像放大功能为用户提供了互动式的体验，增强了用户与应用的连接感。这个“仿QQ空间下拉头像放大功能demo”正是为了实现类似效果而设计的示例代码。 首先，我们需要...
在网页开发中，图片放大功能是一项常见的需求，用于提供用户更清晰查看图片的交互体验。jQuery，一个广泛使用的JavaScript库，提供了丰富的API和方法来简化这一任务。本教程将详细介绍如何利用jQuery实现图片放大...
标题中的“局部图片放大功能 magiczoom”指的是一个网页图片展示技术，它允许用户在鼠标悬停或点击图片时，以放大镜效果查看图片的细节部分。这种技术在电商网站、产品展示页面等需要用户详细查看商品图片的场景中...
图片放大功能通常通过两种方式实现：一是使用 CSS 的 `transform: scale()` 属性来改变图片的大小，二是利用 JavaScript 动态创建一个覆盖在原图上的大图层，当鼠标移动时更新该图层的图片位置和大小，从而实现放大...
在C#编程环境中，实现图片放大功能是一项常见的需求，尤其在图像处理或图形用户界面（GUI）应用中。本文将详细讲解如何通过C#代码来实现这一功能，以实现鼠标点击图片后进行放大的功能。 首先，我们需要创建一个...
- `Kingfisher`是一个流行的图片加载和缓存库，它不仅提供图片的加载和缓存，还包含了一个`KingfisherImageView`子类，可以轻松实现点击图片放大功能。只需设置`allowZooming`属性为`true`，即可开启图片的缩放功能...