基于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 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
js生成随机数的方法实例
Oct 16 Javascript
jquery调整表格行tr上下顺序实例讲解
Jan 09 Javascript
DWR中各种java方法的调用
May 04 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
VsCode插件整理(小结)
Sep 14 Javascript
vuex与组件联合使用的方法
May 10 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
cypress测试本地web应用
Jun 01 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 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往windows中添加用户
2006/12/06 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
python 从远程服务器下载东西的代码
2013/02/10 Python
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
python简单的函数定义和用法实例
2015/05/07 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
python 输出所有大小写字母的方法
2019/01/02 Python
python实现可变变量名方法详解
2019/07/01 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
生物专业个人自荐信范文
2013/11/29 职场文书
企业为何需要商业计划书
2013/12/26 职场文书
法定授权委托证明书
2014/09/27 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
python小型的音频操作库mp3Play
2022/04/24 Python
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python