可以用js事件“onmouseover”和“onmouseout”来实现。
1、新建html文档，在body标签中添加图片标签，为这个标签设置“id”属性，然后设置图片的默认显示大小css属性：
2、添加“onmouseover”js事件，首先使用“document.getElementById”获取到图片标签，然后定义鼠标移动到图片上时发生的事件，这时图片将会放大：
3、添加“onmouseout”js事件，首先获取图片标签，然后定义鼠标移开图片时发生的事件，这时图片将会缩小：
一般来说图片可以随意更换，但现在JS的图片代码太多了，作者不一样，写法也不一样。我只能这么说，大部分的JS代码里面都写有图片的尺寸，如果你自己换了大图，那么在你下载回来的JS代码里面对应的修改width和height就可以了，还有，注意所有图片尺寸做成一样，这样才美观。
（当然这只是大部分情况，不知道你手上的代码是怎样的，只能建议你试试看，希望对你有帮助）
www.SummuR.com
<html><head>
<title>emu</title>
</head>
<body>
<BR>
原图:<BR>
<img
src=[pp.jpg
onmousemove="zoom()"
id=srcImg>
<BR>
局部放大图:<BR>
<div
style="overflow:hidden"><img
id=zoomImg></div>
<SCRIPT
LANGUAGE="javascript">
<!--
zoomImg.src
=
srcImg.src
srcImg.height
=
srcImg.height/2
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>
这个是随鼠标移动查看放大图片响应的是onmousemove事件
你可以改下
第二种方法:
可自定义CSS样式，控制jQuery插件jQuery
Image
Flyout提示小图片显示效果。
代码
一，包含文件
<script
src="jquery.js"
type="text/javascript"></script>
<script
src="jquery.flyout.js"
type="text/javascript"></script>
<script
src="jquery.easing.js"
type="text/javascript"></script>
二，HTML部分(DIV层内所用图片链接)
<div>jQuery插件flyout弹出图片</div>
<div
id="biuuu">
<a
href="iphone.jpg"
title="jquery.flyout"><img
src="iphone_small.jpg"
alt="iphone"
/></a>
</div>
三，Javascript部分(jQuery插件jQuery
Image
Flyout弹出图片调用)
<script
type="text/javascript">
<!--
$(function()
{
$(#biuuu
a).flyout()
-->
</script>
实例中将ID为biuuu的DIV内所有链接元素<a>增加javascript弹出放大图片功能，其中链接href部分为表示弹出的
大图片路径。使用jQuery插件jQuery
Image
Flyout弹出图片，实现javascript弹出放大图片功能只需要一行代码即可实现。
一，自定义预加载提示图片
$(#biuuu
a).flyout({loadingSrc:thumb-loading.gif,outEase:easeInCirc,inEase:easeOutBounce})
loadingSrc表示预加载提示图片路径
outEase表示弹出图片放大过程使用的jQuery插件Easing
Plugin特效，如:easeInCirc
inEase表示弹出图片缩小过程使用的jQuery插件Easing
Plugin特效，如:easeOutBounce
二，自定义弹出图片后图片显示样式
$(#biuuu
a).flyout({loadingSrc:thumb-loading.gif,outEase:easeOutQuad,inEase:easeInBack,loader:loader2,widthMargin:300,heightMargin:300})
loader表示弹出图片后调用的CSS样式
widthMargin表示弹出图片后显示的margin宽度
heightMargin表示弹出图片后显示的margin高度
jQuery插件jQuery
Image
Flyout弹出图片可自定义定制丰富的图片效果
