可以用js事件“onmouseover”和“onmouseout”来实现。

1、新建html文档，在body标签中添加图片标签，为这个标签设置“id”属性，然后设置图片的默认显示大小css属性：

2、添加“onmouseover”js事件，首先使用“document.getElementById”获取到图片标签，然后定义鼠标移动到图片上时发生的事件，这时图片将会放大：

3、添加“onmouseout”js事件，首先获取图片标签，然后定义鼠标移开图片时发生的事件，这时图片将会缩小：

$.fn.imagezoom=function(options){/*自定义插件imageszoom，options代表形参（属性自定义）*/

var settings={

xzoom: 350, /*放大图的宽度(默认是 350)*/

yzoom: 350, /*放大图的高度(默认是 350)*/

offset: 10, /*离原图的距离(默认是 10)*/

position: "right", /*放大图的定位(默认是 "right")*/

preload:1

}

if(options){

$.extend(settings,options)

}

var noalt=''

var self=this

$(this).bind("mouseenter",function(ev){/*鼠标经过时添加一个事件处理程序*/

var imageLeft=$(this).offset().left

var imageTop=$(this).offset().top

var imageWidth=$(this).get(0).offsetWidth

var imageHeight=$(this).get(0).offsetHeight

var boxLeft=$(this).parent().offset().left

var boxTop=$(this).parent().offset().top

var boxWidth=$(this).parent().width()

var boxHeight=$(this).parent().height()

noalt=$(this).attr("alt")

var bigimage=$(this).attr("rel")

$(this).attr("alt",'')

if($("div.zoomDiv").get().length==0){

$(document.body).append("<div class='zoomDiv'><img class='bigimg' src='"+bigimage+"'/></div>"+

"<div class='zoomMask'></div>")

}

if(settings.position=="right"){

if(boxLeft+boxWidth+settings.offset+settings.xzoom>screen.width){

leftpos=boxLeft-settings.offset-settings.xzoom

}else{

leftpos=boxLeft+boxWidth+settings.offset

}

}else{

leftpos=imageLeft-settings.xzoom-settings.offset

if(leftpos<0){

leftpos=imageLeft+imageWidth+settings.offset

}

}

$("div.zoomDiv").css({top:boxTop,left:leftpos})

$("div.zoomDiv").width(settings.xzoom)

$("div.zoomDiv").height(settings.yzoom)

$("div.zoomDiv").show()

$(this).css('cursor','crosshair')/*光标呈现十字线*/

$(document.body).mousemove(function(e){/*当移动鼠标时*/

mouse=new MouseEvent(e)

if(mouse.x<imageLeft||mouse.x>imageLeft+imageWidth||mouse.y<imageTop||mouse.y>imageTop+imageHeight){

mouseOutImage()/*判断鼠标是否超出图片范围*/

return

}

var bigwidth=$(".bigimg").get(0).offsetWidth/*最大宽度*/

var bigheight=$(".bigimg").get(0).offsetHeight/*最大高度*/

var scaley='x'/*x轴比例 */

var scalex='y'/*y轴比例 */

/*随鼠标移动显示大图*/

if(isNaN(scalex)|isNaN(scaley)){/*x、y轴比例不是数字时*/

var scalex=(bigwidth/imageWidth)

var scaley=(bigheight/imageHeight)

$("div.zoomMask").width((settings.xzoom)/scalex)

$("div.zoomMask").height((settings.yzoom)/scaley)

$("div.zoomMask").css('visibility','visible')/*规定元素可见*/

}

xpos=mouse.x-$("div.zoomMask").width()/2

ypos=mouse.y-$("div.zoomMask").height()/2

xposs=mouse.x-$("div.zoomMask").width()/2-imageLeft

yposs=mouse.y-$("div.zoomMask").height()/2-imageTop

xpos=(mouse.x-$("div.zoomMask").width()/2<imageLeft)

? imageLeft:(mouse.x+$(".zoomMask").width()/2>imageWidth+imageLeft)

? (imageWidth+imageLeft-$("div.zoomMask").width()):xpos

ypos=(mouse.y-$("div.zoomMask").height()/2<imageTop)

? imageTop:(mouse.y+$("div.zoomMask").height()/2>imageHeight+imageTop)

? (imageHeight+imageTop-$("div.zoomMask").height()):ypos

$("div.zoomMask").css({top:ypos,left:xpos})

$("div.zoomDiv").get(0).scrollLeft=xposs*scalex

$("div.zoomDiv").get(0).scrollTop=yposs*scaley

})

})

function mouseOutImage(){/*定义鼠标离开图片方法*/

$(self).attr("alt",noalt)

$(document.body).unbind("mousemove")/*移除在页面中鼠标指针事件*/

$("div.zoomMask").remove()/*移除所有的div.zoomMask*/

$("div.zoomDiv").remove()/*移除所有的div.zoomDiv*/

}

count=0

if(settings.preload){

/*在boby元素的结尾（仍然在内部）插入指定内容*/

$('body').append("<div style='display:none' class='jqPreload"+count+"'></div>")

$(this).each(function(){/*规定为每个匹配元素规定运行的函数*/

var imagetopreload=$(this).attr("rel")/*图片预加载*/

var content=jQuery('.jqPreload'+count+'').html()

jQuery('.jqPreload'+count+'').html(content+'<img src=\"'+imagetopreload+'\">')

})

}

}

})(jQuery)

function MouseEvent(e){/*记录鼠标x，y坐标*/

this.x=e.pageX/*鼠标指针位置*/

this.y=e.pageY

}