$.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
}
制作图片的放大效果我考虑到的方法是将原始图片绘制到canvas上，然后在对canvas进行局部裁剪最后对裁剪的部分进行放大，这样就可以实现放大镜的效果。
这里我给出一个实现这个想法的示例。该示例实际上就是运用HTML5 canvas中对画布进行裁剪与保存画布状态的相关知识实现的。
上面是给出示例的效果图。这是不是你想要的放大镜效果呢？
下面我们来看下示例代码：在这个示例中当你点击图片时图片就会出现上图效果，再一次点击时就变成原始图片了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>放大镜</title>
<!—HTML代码设计：一个简单的canvas元素-->
</head>
<body>
<div id="result-stub" class="well hidden">
<canvas id="canvas" width="345" height="345">
<p>你的浏览器不支持canvas元素</p>
</canvas>
</div>
<script>
window.onload=function() {
//获取canvas对象以及图片对象
var
canvas = document.getElementById('canvas'),
img = new Image(),
context = null,
dataUrl = null,
//设置一个标记，该标记的作用是控制我们点击canvas时放大镜效果的消失和出现
isMagnified = false,
//init函数只要是在图片加载时绘制出图形
init = function() {
img.onload = function() {
//绘制原始图片
context.drawImage(img, 0, 0)
//将图片信息转化为二进制信息或者URL信息存储在dataUrl中方便后面调用
dataUrl = canvas.toDataURL()
}
img.src = 'fist-pump-baby.jpg'
//设置标记值
isMagnified = false
},
//magnify函数的作用是绘制具有放大镜效果的图形
magnify = function() {
//保存当前画布的绘制状态即画布绘制原始图片的状态。方便我们在后面恢复到绘制原始图片的状态
context.save()
//因为放大镜的圆圈和把手是通过canvas绘制的这里设置了一些绘制把手和圆圈的样式属性。
context.lineWidth = 10// 线条宽度
context.shadowColor = '#000'// 阴影的颜色黑色
context.shadowBlur = 15// 模糊级别为15
context.shadowOffsetX = 5// 形状与阴影的水平距离5
context.shadowOffsetY = 5// 形状与阴影的垂直距离5
//保存画布当前状态即我们设置阴影属性后的状态方便后面使用
context.save()
//绘制出放大镜把手的图形
context.beginPath()
context.moveTo(230, 230)
context.lineCap = 'round'
context.lineWidth = 30
context.lineTo(285, 285)
context.stroke()
//对图片进行裁剪，裁剪出的图形是一个圆形。
context.beginPath()
context.arc(
150,
150,
115,
0,
Math.PI * 2,
true)
context.clip()
//创建一个新的Image对象，这个Image对象的图片资源是前面存储在dataUrl中的图片资源。所以这个Image对象和之前初始化的Image对象是完全一样的。
var magnified = new Image()
magnified.src = dataUrl
//对Image对象进行放大1.5倍，并进行绘制。注意此时的画布状态时裁剪为一个圆形的状态，所以这里绘制的也仅仅是图片中的一个圆形区域。这里为了绘制出图片中娃娃的脸设置了绘制的图片有一定的偏移量。
context.scale(1.5, 1.5)
context.drawImage(img, -40, -40)
//调用restore()函数将画布状态恢复到绘制把放大镜把手时的状态，即具有阴影属性
context.restore()
//绘制放大镜的圆圈，即绘制刚刚我们裁剪出来图片的边框。这样刚刚裁剪出来的圆形图形就会正好处于放大镜的圆圈中。
context.arc(
150,
150,
115,
0,
Math.PI * 2,
true)
context.stroke()
//重置画布，将画布恢复到绘制元素图片的状态，以方便绘制出放大效果后，再次点击是绘制原始图片。
context.restore()；
//设置标记值，实现点击后放大效果消失。
isMagnified = true
}
//加载初始化代码，即当运行页面时会在页面绘制出一个原始图像
init()
//监听画布的点击事件，当点击页面的图像时会根据标记的值来进行判断是否对画布进行方大处理
$('canvas').click(function() {
if (isMagnified) {
init()//绘制原始图像
}
else {
magnify()//绘制放大的图像
}
})
}
</script>
<script src="jquery.js"></script>
</body>
</html>
对于这些知识在一个叫秒秒学的教程网站上有相关的学习资料，有兴趣的可以自己去看看，希望对你有帮助。
<!DOCTYPE html><html>
<head>
<meta charset="gb2312" />
<title>放大镜</title>
<style>
img{ vertical-align:bottom}
.mod_zoom{ overflow:hiddenzoom:1}
.mod_zoom .p1 { float:leftposition:relativeheight:350pxwidth:350pxmargin-right:5px}
.mod_zoom .p1 .mask{ position:absoluteleft:0top:0width:175pxheight:175pxbackground-color:#fede4fopacity:0.3filter: alpha(opacity=30)display:none}
.mod_zoom .p2{ position:relativewidth:400pxheight:400pxoverflow:hiddendisplay:none}
.mod_zoom .p2 .img{ position:absoluteleft:0top:0}
.mod_zoom .ph{width:100%height:350pxposition:absolutetop:0left:0cursor:crosshair
/*background-color:red*/
/*如果给它绑定事件处理函数，IE中不设置background-color属性就不触发事件*/ }
</style>
</head>
<body>
<div>
<div class="mod_zoom">
<div class="p1" id="p1">
<img src="http://img14.360buyimg.com/n1/4071/b350e77e-fc74-4173-81b5-dfe54f425ef6.jpg" id="z1" />
<span class="mask" id="m"></span>
<span class="ph" id="eventproxy"></span>
</div>
<div class="p2" id="p2">
<img src="http://img14.360buyimg.com/n0/4071/b350e77e-fc74-4173-81b5-dfe54f425ef6.jpg" class="img" id="z2" />
</div>
</div>
</div>
<script>
function PhotoZoomer(elements){
this.mask = elements.mask//蒙版
this.container = elements.container //原图容器
this.originimg = elements.originimg//原图
this.eventproxy = elements.eventproxy
this.bigContainer = elements.bigContainer//大图容器
this.bigimg = elements.bigimg//大图
this.visible = false
this._bind()
}
PhotoZoomer.prototype = {
display: function(style){
var self = this
self.mask.style.display = style
self.bigContainer.style.display = style
},
//计算放大蒙版位置
zoom: function(clientX, clientY){
var self = this,
//位置比例
rate = {},
//放大蒙版最大活动范围
maxrange = {
offsetLeft: self.container.offsetWidth - self.mask.offsetWidth,
offsetTop: self.container.offsetHeight - self.mask.offsetHeight
},
//mask left
left = clientX - self.container.offsetLeft - self.mask.offsetWidth/2,
//mask top
top = clientY - self.container.offsetTop - self.mask.offsetHeight/2
if(left <0) {
left = 0
}else if(left>maxrange.offsetLeft) {
left = maxrange.offsetLeft
}
if(top <0) {
top = 0
}else if(top >maxrange.offsetTop){
top = maxrange.offsetTop
}
//alert(maxrange.offsetTop)
rate.left = left / maxrange.offsetLeft
rate.top = top / maxrange.offsetTop
self.mask.style.left = left + 'px'
self.mask.style.top = top + 'px'
self.bigimg.style.left = -rate.left * (self.bigimg.offsetWidth - self.bigContainer.offsetWidth) + "px"
self.bigimg.style.top = -rate.top * (self.bigimg.offsetHeight - self.bigContainer.offsetHeight) + "px"
},
_bind: function(){
var self = this
self.container.onmouseover = function(e){
e = e || window.event
var target = e.targe || e.srcElement
self.display("block")
this.visible = true
}
self.container.onmouseout = function(e){
e = e || window.event
var target = e.targe || e.srcElement
self.display("none")
this.visible = false
}
self.container.onmousemove = function(e){
e = e || window.event
if(!this.visible )return//防止元素大小计算错误
self.zoom(e.clientX, e.clientY)
}
}
}
function get(id){
return document.getElementById(id)
}
var elements = {
mask: get("m"),
container: get("p1"),
originimg: get("z1"),
bigContainer: get("p2"),
bigimg: get("z2"),
eventproxy: get("eventproxy")
}
var zoomer = new PhotoZoomer(elements)
// alert(elements.container.offsetParent.tagName)
</script>
</body>
</html>
