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


Posted in Javascript onOctober 27, 2011

今天要出个鼠标滚动放大缩小图片的功能,看似很简单,从网上一搜,出现的都是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请点击这里:滚动鼠标放大缩小图片效果
Javascript 相关文章推荐
Javascript与vbscript数据共享
Jan 09 Javascript
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 #Javascript
VBS通过WMI监视注册表变动的代码
Oct 27 #Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 #Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 #Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 #Javascript
JavaScript学习笔记(二) js对象
Oct 25 #Javascript
JavaScript学习笔记(一) js基本语法
Oct 25 #Javascript
You might like
Admin generator, filters and I18n
2011/10/06 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
如何给Python代码进行加密
2020/01/10 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
存储过程和sql语句的优缺点
2014/07/02 面试题
新闻专业个人求职信
2013/12/19 职场文书
骨干教师培训制度
2014/01/13 职场文书
偷看我的初中毕业鉴定
2014/01/29 职场文书
销售竞赛活动方案
2014/08/23 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
长江三峡导游词
2015/01/31 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
OpenCV实现常见的四种图像几何变换
2022/04/01 Python
关于的python五子棋的算法
2022/05/02 Python
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL