基于jquery的滚动鼠标放大缩小图片效果

今天要出个鼠标滚动放大缩小图片的功能，看似很简单，从网上一搜，出现的都是onmousewheel的例子，全部只支持IE浏览器，结果查出火狐有对应的DOMMouseScroll来处理这个功能，代码如下肢缓雹,并加上注意的注释项：

复制代码历帆

代码如下:

$(function(){

$(".body

img").each(function(){

if($.browser.msie){

$(this).bind("mousewheel",function(e){

var

e=e||event,v=e.wheelDelta||e.detail

if(v>0)

resizeImg(this,false)//放大图片呗

else

resizeImg(this,true)//缩小图片喽

window.event.returnValue

=

false//去掉浏览器默认滚动事件

//e.stopPropagation()

return

false

})

}else{

$(this).bind("DOMMouseScroll",function(event){

if(event.detail<0)

resizeImg(this,false)

else

resizeImg(this,true)

event.preventDefault()//去掉浏览器默认滚动事件

//event.stopPropagation()

})

}

})

function

resizeImg(node,isSmall){

if(!isSmall){

$(node).height($(node).height()*1.2)

}else

{

$(node).height($(node).height()*0.8)

}

}

})

本文的demo请点击这里：滚动哪差鼠标放大缩小图片效果

(function($){//定义作用域

$.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

}

很简单啊，先把图片用css缩小，再用js滑过的时候放大就好啦，图省事我就岁搏把js直慎雀没接写在图片上了，你可以自己抽出来：

<img src="1.jpg" width="50" height="50" onMouseOver="this.width='300'this.height='300'" onMouseOut="this.width='50'this.height='50'">

或者更简单的宽纳，直接用css控制，连js都不用写了：

<style>

#Img1{ width:50pxheight:50px}

#Img1:hover{ width:300pxheight:300px}

</style>

<img src="1.png" width="50" height="50" id="Img1">

---