jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
本文实例讲述了jQuery实现滚动鼠标放大缩小图片的方法。分享给大家供大家参考，具体如下：
在项目制作过程中，遇到了这么一个需求，就开发了一个，记录一下。
首先，需要定义html元素和css样式：
<divstyle="position:relative;"> <asp:ImageID="myImg"runat="server"Width="670px"/> <spanstyle="position:relative;display:none;background:wheat;border:1pxsolidgray;padding:3px;overflow:hidden;"id="NotificationMsg">滚动鼠标中键，可以放大或者缩小图片</span> </div>
在这个样式中，我设置了图片的样式为670px，目的就是避免图片过大的时候，显示到了页面外部的现象。
然后我使用了一个jquerymousewheel的插件来解决鼠标中键的滚动问题，下面是具体的jquery操作代码：
<scripttype="text/javascript">
$(document).ready(function(){
varcount=0;
$("#ctl00_ContentPlaceHolder1_myImg").hover(function(e){
varleft=e.originalEvent.x||e.originalEvent.layerX||0;//gettheleftposition
vartop=e.originalEvent.y||e.originalEvent.layerY||0;//getthetopposition
$("#NotificationMsg").css({'position':'absolute','left':left,'top':top});
$("#NotificationMsg").css("display","block");
},function(){
//alert('mouserout');
$("#NotificationMsg").css("display","none");
}).mousewheel(function(event,delta,deltaX,deltaY){
count++;
varheight=$(this).attr("height");//getinitialheight
varwidth=$(this).attr("width");//getinitialwidth
varstepex=height/width;//getthepercentangeofheight/width
varminHeight=150;//minheight
vartempStep=50;//eveystepforscrolldownorup
$(this).removeAttr('style');
if(delta==1){//up
$(this).attr("height",height+count*tempStep);
$(this).attr("width",width+count*tempStep/stepex);
}
elseif(delta==-1){//down
if(height>minHeight)
$(this).attr("height",height-count*tempStep);
else
$(this).attr("height",tempStep);
if(width>minHeight/stepex)
$(this).attr("width",width-count*tempStep/stepex);
else
$(this).attr("width",tempStep/stepex);
}
event.preventDefault();
count=0;
});
});
</script>
在这段代码中，利用了originalEvent函数来获取鼠标所处的位置，在IE9和firefox下面测试是可以使用的：
varleft=e.originalEvent.x||e.originalEvent.layerX||0;//gettheleftposition vartop=e.originalEvent.y||e.originalEvent.layerY||0;//getthetopposition
然后在代码中，我进行了如下的操作来确定图片的初始高度和宽度以及图片显示的宽高比（目的是实现等比例缩放）：
varheight=$(this).attr("height");//getinitialheight
varwidth=$(this).attr("width");//getinitialwidth
varstepex=height/width;//getthepercentangeofheight/width
varminHeight=150;//minheight
vartempStep=50;//everystepforscrollingdownorup
$(this).removeAttr('style');
其中，tempStep主要是为了实现滚动的时候，能够进行缩小和放大的比率值。做了这之后，我移除了image的width样式，主要是为了实现放大或者缩小。
if(delta==1){//up
$(this).attr("height",height+count*tempStep);
$(this).attr("width",width+count*tempStep/stepex);
}
elseif(delta==-1){//down
if(height>minHeight)
$(this).attr("height",height-count*tempStep);
else
$(this).attr("height",tempStep);
if(width>minHeight/stepex)
$(this).attr("width",width-count*tempStep/stepex);
else
$(this).attr("width",tempStep/stepex);
}
event.preventDefault();
count=0;
上面这段就比较简单了，主要是进行上下滚动判断，然后等比例放大或者缩小图片。event.preventDefault()可以保证在滚动图片的过程中，页面不会随之滚动。
下面附上这个插件：
点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。