可局部放大图片的例子，局部放大图片，javascript局部放大图片

关键字: 可局部放大图片局部放大图片 javascript局部放大图片

因为功能上的需要，要局部放大页面上的图片，以看清图片中不清楚的位置

代码复制到.jsp或.html文件里执行就可看到效果

一、这个局部放大只能通过改代码才能实现图片放大的倍率，但是速度很好，鼠标在图片上动放大的图片及时显示，在下面我再发一个可通过鼠标点击图片放大缩小局部放大图片的效果的代码，但速度没有这个快

Html代码

<html>
<head>
<title>emu</title>
</head>
<body>
<BR>
原图：<BR>
<img src="http://reimg.360quan.com/400/300/album/album.static.360quan.com/019/731/51/200711091844017907.jpg"
onmousemove='zoom()' id=srcImg>
<BR>
局部放大图：<BR>
<div style='overflow:hidden'><img id=zoomImg></div>
<script language="javascript" type="text/javascript">
<!--
zoomImg.src = srcImg.src;
srcImgsrcImg.height = srcImg.height;
var zoomRate = 5;
zoomImg.height = srcImg.height*zoomRate;
zoomImg.parentNode.style.width = srcImg.width;
zoomImg.parentNode.style.height = srcImg.height;
function zoom(){
var elm = event.srcElement;
h = elm.offsetHeight/zoomRate/2;
w = elm.offsetWidth/zoomRate/2;
var x = event.x-elm.offsetLeft;
xx=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w;
zoomImg.style.marginLeft=(w-x)*zoomRate;
var y = event.y-elm.offsetTop;
yy=y<(elm.offsetHeight-h)?y<h?h:y:elm.offsetHeight-h;
zoomImg.style.marginTop=(h-y)*zoomRate;
}
//-->
</script>
</body>
</html>

<html>
<head>
<title>emu</title>
</head>
<body>
<BR>
原图：<BR>
<img src="http://reimg.360quan.com/400/300/album/album.static.360quan.com/019/731/51/200711091844017907.jpg" οnmοusemοve='zoom()' id=srcImg>
<BR>
局部放大图：<BR>
<div style='overflow:hidden'><img id=zoomImg></div><script language="javascript" type="text/javascript">
<!--
zoomImg.src = srcImg.src;
srcImg.height = srcImg.height;
var zoomRate = 5;
zoomImg.height = srcImg.height*zoomRate;
zoomImg.parentNode.style.width = srcImg.width;
zoomImg.parentNode.style.height = srcImg.height;
function zoom(){
var elm = event.srcElement;
h = elm.offsetHeight/zoomRate/2;
w = elm.offsetWidth/zoomRate/2;
var x = event.x-elm.offsetLeft;
x=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w;
zoomImg.style.marginLeft=(w-x)*zoomRate;
var y = event.y-elm.offsetTop;
y=y<(elm.offsetHeight-h)?y<h?h:y:elm.offsetHeight-h;
zoomImg.style.marginTop=(h-y)*zoomRate;
}
//-->
</script>
</body>
</html>

二、这个可通过鼠标点击图片放大缩小局部放大的图片的效果的代码，但速度稍微慢点

Html代码

<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<title>标本资料</title>
<script language="javascript">
var iDivHeight = 250;
var iDivWidth = 250;
var iMultiple = 8;
function show(src, sFileName)
{
if ((event.button == 1) && (event.ctrlKey == true))
iMultiple -= 1;
else
if (event.button == 1)
iMultiple += 1;
if (iMultiple < 2) iMultiple = 2;
if (iMultiple > 14) iMultiple = 14;
var iPosX, iPosY;
var iMouseX = event.offsetX;
var iMouseY = event.offsetY;
var iBigImgWidth = src.clientWidth * iMultiple;
var iBigImgHeight = src.clientHeight * iMultiple;
if (iBigImgWidth <= iDivWidth)
{
iPosX = (iDivWidth - iBigImgWidth) / 2;
}
else
{
if ((iMouseX * iMultiple) <= (iDivWidth / 2))
{
iPosX = 0;
}
else
{
if (((src.clientWidth - iMouseX) * iMultiple) <= (iDivWidth / 2))
{
iPosX = -(iBigImgWidth - iDivWidth);
}
else
{
iPosX = -(iMouseX * iMultiple - iDivWidth / 2);
}
}
}
if (iBigImgHeight <= iDivHeight)
{
iPosY = (iDivHeight - iBigImgHeight) / 2;
}
else
{
if ((iMouseY * iMultiple) <= (iDivHeight / 2))
{
iPosY = 0;
}
else
{
if (((src.clientHeight - iMouseY) * iMultiple) <= (iDivHeight / 2))
{
iPosY = -(iBigImgHeight - iDivHeight);
}
else
{
iPosY = -(iMouseY * iMultiple - iDivHeight / 2);
}
}
}
div1.style.height = iDivHeight;
div1.style.width = iDivWidth;
if (div1.innerHTML == "")
{
div1.innerHTML = "<img id=BigImg style='position:relative'>";
BigImg.src = "http://biomuseum.zsu.edu.cn/ASP/search/hexapod/big_pic/" + sFileName;
}
BigImg.width = iBigImgWidth;
BigImg.height = iBigImgHeight;
BigImg.style.top = iPosY;
BigImg.style.left = iPosX;
}
</script>
</head>
<body>
<p></p>
<table cellspacing="0" cellpadding="1" width="727" align="center" border="0">
<tr>
<td align="middle">
<table bordercolor="#000000" height="301" cellspacing="0" cellpadding="0" width="302" bgcolor="#deffde" border="1">
<tr>
<td align="middle">
<marquee scrolldelay="120" width="80%"><font size="2">将鼠标移入标本图中，右方显示局部放大图；单击鼠标左键，可以增大放大倍数；鼠标单击时同时按Ctrl键则减小放大倍数。</font></marquee><br>
<img onmousemove="show(this, 'B-000002.jpg')" onmousedown="show(this, 'B-000002.jpg')" id="imgSource" src="01/B-000002.jpg">
</td>
</tr>
</table>
</td>
<td style="WIDTH: 15px" width="15"></td>
<td align="middle">
<table bordercolor="#000000" height="301" cellspacing="0" cellpadding="0" width="302" bgcolor="#deffde" border="1">
<tr>
<td align="middle"><a href="01/B-000002.jpg" target="_blank">打开原图</a>
<div id="div1" style="OVERFLOW: hidden">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p></p>
</body>
</html>

转载于:https://www.cnblogs.com/worfdream/archive/2010/08/15/1800145.html

可局部放大图片的例子，局部放大图片，javascript局部放大图片相关推荐

javascript判断图片是否加载完成方法整理
有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果.本文主要整理了几种常见的javascipt判断图片加载 ...
asp.net mvc下的多语言方案包含Html，Javascript和图片
在网上查阅了众多方案,觉得路过秋天的方案解耦性比较好,可以不使用微软的Resource文件,而是将所有的词汇放入在一个txt的词典之中,便于维护. 步骤如下: 1)在整个程序的入口处global.a ...
使用Javascript获取图片坐标以及宽度高度的方法
首先说下获取图片宽度与长度的问题: <script type="text/javascript">function lpimgClick(img,event){var ...
[转]【Android】9-patch图片以及例子说明
1.何为9-patch? NinePatch图片以*.9.png结尾,和普通图片(png图片)的区别是四周多了一个边框(如下图所示): 采用NinePatch图片做背景,可使背景随着内容的拉伸(缩小) ...
用JavaScript实现图片剪切效果
学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第 ...
html实现图片加载动画效果,HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% 代码如下: ...
JavaScript导出图片和数据到Excel
JavaScript导出图片和数据到Excel 以下方法可以利用json数据将图片地址生成图片导出到Excel,同样也可以将数据导出到Excel.解决网上许多方法关于导出图片到Excel却无法让图片在 ...
JavaScript实现图片旋转构成3D圆环代码
代码简介: 很炫的图片展示特效,由一组图片构成一个3D的圆环状,并自动旋转,鼠标放到某一图片上会自动停止,JavaScript 的功能真够强大,你是不是后悔没有学好JS呢? 代码内容: View Co ...
javascript 获取图片原始尺寸
javascript 获取图片原始尺寸 1 function getImgInfo(url){ 2 var img = new Image(), loaded = false; 3 var info ...
怎样在JavaScript添加图片
想要使用JavaScript添加图片,可以先使用createElement()方法创建一个img元素,并向img元素的src属性赋图片的URL地址值:然后使用appendChild()方法将img元素 ...

可局部放大图片的例子，局部放大图片，javascript局部放大图片

可局部放大图片的例子，局部放大图片，javascript局部放大图片相关推荐

最新文章

热门文章