基于jquery的滚动鼠标放大缩小图片效果
更新时间：2011年10月27日 23:25:48 作者：
基于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(){
$(".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请点击这里：滚动鼠标放大缩小图片效果
相关文章
本文通过一段示例代码给大家介绍了基于jQuery解决ios10以上版本缩放问题，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-11-11
下面就日常最常用的，在Form表单中如何获取被中选的Radio值做一小小的示例，感兴趣的朋友可以参考下2013-08-08
Backstretch是一款简单的jQuery插件，可以帮助你给网页添加一个动态的背景图片，可以自动调整大小适应屏幕的尺寸，当然这样做的缺点是当图片尺寸比屏幕小的时候,图片会因为自动延伸而变形，所以我们可以劲量使用高分辨率大尺寸的图片做背景,更重要的是支持图片的自动切换2015-04-04
因为垃圾回收的存在，让javascript等高级语言开发者产生了一个错误的认识，以为可以不用关心内存管理,需要的朋友可以了解下2012-12-12
这篇文章主要介绍了jQuery实现输入框的放大和缩小功能,涉及jQuery基于事件响应的页面元素属性动态变换相关操作技巧,需要的朋友可以参考下2018-07-07
hover属性在书写css时大家都不会陌生了吧live主要用于对动态加载出来的元素绑定事件，下来将为大家详细介绍下两者的使用，感兴趣的朋友可不要错过了哈2013-03-03
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
焦点图片切换在网页制作的商品展示中经常会用到，这样的效果可以给用户带来耳目一新的感觉同时也是用户比较追捧的，本文也实现了一个这样的焦点图片切换效果,感兴趣的你可以参考下啊，希望本文对你有所帮助2013-01-01
jquery+swiper组件实现时间轴滑动年份tab切换效果
这篇文章主要介绍了jquery+swiper组件实现时间轴滑动年份tab切换效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-12-12
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
今天同事让我帮他一起解决一个问题，关于兼容的bug问题，在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果（不能点击），而在谷歌中却是好的，下面小编附上原因分析及解决办法，有需要的朋友可以参考下2016-08-08
animate动画示例(泪奔的小孩)及stop和delay的使用
实现原理：停止动画，当一个元素有一个动画队列时，停止的是当前动画，紧接着执行下一个动画，具体代码如下，感兴趣的朋友可以参考下哈，希望对你学习jquery动画有所帮助2013-05-05
最新评论