基于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数组长度问题代码说明
Jan 20 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
vue实现简单实时汇率计算功能
Jan 15 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
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
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
javascript this用法小结
2008/12/19 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
python爬虫---requests库的用法详解
2020/09/28 Python
如何基于Python按行合并两个txt
2020/11/03 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
市场营销专业毕业生求职信
2014/07/21 职场文书
学生病假条怎么写
2015/08/17 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
vue3中provide && inject的使用
2021/07/01 Vue.js
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL
浅析python中特殊文件和特殊函数
2022/02/24 Python