这个网站的图片局部放大怎么做的？

1.<html xmlns="http://www.w3.org/1999/xhtml">
2.<head>
3.<title>JS+CSS实现图片放大预览效果（js图片放大预览鼠标滑过的任意位置）_365CSS.CN</title>
4.<script language="JavaScript">
5.
61.</script>
62.<style type="text/css">
63.
72.</style>
73.
74.<body>
75.<div id="head"></div>
76.<div id="smallbox"><img src="http://www.365css.cn/example/tupianfangdayulan/1.jpg" name="smallpic" width="300" height="300" border="0" id="smallpic" onmousemove="move(event)" onmouseover="document.getElementById('bigbox').style.display='';document.getElementById('view').style.display=''" onmouseout="document.getElementById('bigbox').style.display='none';document.getElementById('view').style.display='none'"></div>
77.
78.<div id="bigbox" style="display:none"><div id="bigpico"><img src="http://www.365css.cn/example/tupianfangdayulan/1.jpg" name="bigpic" width="300" height="300" border="0" id="bigpic"></div>
79.</div>
80.<div id="view" onmousemove="move(event) "style="display:none"></div>
81.
82.</body>
83.</html>
楼上的原理讲得很清楚了。
我以前刚学js的时候也写过一段垃圾，本地保存为hta可看到效果。
<html><body oncontextmenu="return false;" scroll="no">
<style type="text/css">
* {
margin:0px;
padding:0px;
border:0px;
}
</style><div id="div1">
<img src="1.jpg" id="img1" title="双击放大,右键恢复!"></img>
</div>
<div id="div2">
<b>每次放大倍数：</b>
<select id="slt1">
<option value="2.0">2.0倍</option>
<option value="2.5">2.5倍</option>
<option value="3.0">3.0倍</option>
<option value="3.5">3.5倍</option>
<option value="4.0" selected>4.0倍</option>
</select>
<label id="l1">当前倍数:<u><b>1</u></b></label>
</div><script type="text/javascript">
/**************************************************************
//脚本开始
**************************************************************/
function $(id){return document.getElementById(id);}function window.onload()
{
with($("div1").style)
{
position = "absolute";
overflow = "hidden";
left = "35%";
top = "10%";
width = "60%";
height = "60%";
border = "1px solid #FFFF00"
}
with($("div2").style)
{
position = "absolute";
left = "35%";
top = "70%";
width = "60%";
border = "1px dotted #000000";
}
$("img1").oncontextmenu();
}/**************************************************************
//处理放大
**************************************************************/
$("img1").ondblclick = function()
{
var x,y;
var imul = parseFloat($("slt1").value);
var ps = this.parentNode;
with(this.style)
{
if(this.offsetWidth / ps.offsetWidth * imul > 200)return; pixelWidth *= imul;
pixelHeight *= imul;
x = ps.offsetWidth / 2 - event.offsetX * imul;
y = ps.offsetHeight / 2 - event.offsetY * imul;
pixelLeft = Math.max(Math.min(0,x),ps.offsetWidth - this.offsetWidth);
pixelTop = Math.max(Math.min(0,y),ps.offsetHeight - this.offsetHeight);

$("l1").innerHTML = "当前倍数:<u><b>" + Math.ceil(pixelWidth / ps.offsetWidth) + "</u></b>";
}
}
/**************************************************************
//拖动
**************************************************************/
var ox,oy;
$("img1").onmousedown = function()
{
ox = event.clientX;
oy = event.clientY;
this.setCapture();
this.attachEvent("onmousemove",myMove);
}function myMove()
{
var x,y;
with($("img1").style)
{
var ps = $("img1").parentNode.style;
x = pixelLeft - ox + event.clientX;
y = pixelTop - oy + event.clientY;
pixelLeft = Math.max(Math.min(0,x),ps.pixelWidth - pixelWidth);
pixelTop = Math.max(Math.min(0,y),ps.pixelHeight - pixelHeight);
ox = event.clientX;
oy = event.clientY;
}
}$("img1").onmouseup = function()
{
this.detachEvent("onmousemove",myMove);
this.releaseCapture();
}
/**************************************************************
//初始化img1
**************************************************************/
$("img1").oncontextmenu = function()
{
with(this.style)
{
position = "absolute";
left = "0px";
top = "0px";
width = "100%";
height = "100%";
cursor = "move";
$("l1").innerHTML = "当前倍数:<u><b>1</u></b>"; }
}</script></body></html>

调试易

这个网站的图片局部放大怎么做的？

解决方案 »