部分的にピクチャーの例を拡大することができて、局部はピクチャーを拡大して、javascript局部はピクチャーを拡大します.
5700 ワード
機能上の必要性から、部分的にページ上の写真を拡大して、画像の中のはっきりしない位置を見極めます.
コードをコピーして.jspまたは.htmlファイルで実行すれば効果が見られます.
一、この局部の拡大はコードを変えてこそ画像の拡大倍率を実現できますが、速度がとてもいいです.マウスは写真の上で拡大した画像を直ちに表示します.下でもう一つマウスをクリックして画像を拡大縮小する効果のコードを送りますが、スピードはこれほど速くないです.
黒い髪 http://heisetoufa.iteye.com
本文に誤りがあると発見したら,批判の指摘を歓迎する.
コードをコピーして.jspまたは.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;
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>
<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>
黒い髪 http://heisetoufa.iteye.com
本文に誤りがあると発見したら,批判の指摘を歓迎する.