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

admin · 发表于 2014-4-26 22:10:24

您需要登录才可以下载或查看，没有账号？立即注册

x

基于jquery的滚动鼠标放大缩小图片效果，需要的朋友可以参考下。
今天要出个鼠标滚动放大缩小图片的功能，看似很简单，从网上一搜，出现的都是onmousewheel的例子，全部只支持IE浏览器，结果查出火狐有对应的DOMMouseScroll来处理这个功能，代码如下：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>基于jquery的滚动鼠标放大缩小图片效果</title>
</head>
<body>
<div class="body"><img src="http://www.phpin.net/static/image/common/logo.png" /></div>
<script src="http://libs.baidu.com/jquery/1.6.4/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".body img").each(function(){
if($.browser.mozilla){
$(this).bind("DOMMouseScroll",function(event){
if(event.detail<0)
resizeImg(this,false);
else
resizeImg(this,true);
event.preventDefault()
//event.stopPropagation();
})
}else{
$(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;
})
}
});
function resizeImg(node,isSmall){
if(!isSmall)
$(node).height($(node).height()*1.2);
else
$(node).height($(node).height()*0.8);
}
});
</script>
</body>
</html>

复制代码

PS：注意本实例中使用的jquery只能是1.2.6~1.6.4版本，1.7以后JQ不再支持。敬请注意

		自动登录	找回密码
密码			立即注册

[jQuery/Js/AJAX] 基于jquery的滚动鼠标放大缩小图片效果