$.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
}
这篇文章主要介绍了js实现单击图片放大图片的方法,涉及javascript操作图片的技巧与onclick事件的用法,需要的朋友可以参考下本文实例讲述了js实现单击图片放大图片的方法。分享给大家供大家参考。具体实现方法如下：
代码如下:
<html>
<title>单击图片即可放大图片</title>
<body>
点击图片预览效果。<br>
<img
src="/images/m01.jpg"
onclick="this.width+=50this.height+=50"
onclick="javascript:window.open(this.src)"
style="cursor:pointer"/>
<img
src="/images/m02.jpg"
onclick="this.style.zoom='2'"
onclick="javascript:window.open(this.src)"
style="cursor:pointer"/>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
