基于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 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
js事件绑定快捷键以ctrl+k为例
Sep 30 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 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 HTML代码串截取代码
2008/12/29 PHP
PHP学习 变量使用总结
2011/03/24 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
Python 忽略warning的输出方法
2018/10/18 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
python实现从wind导入数据
2019/12/03 Python
python中round函数如何使用
2020/06/19 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
露营世界:Camping World
2017/02/02 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
标记环介质访问控制协议
2016/03/27 面试题
银行实习鉴定
2013/12/13 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
教师节促销活动方案
2014/02/14 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
复兴之路展览观后感
2015/06/02 职场文书
聘任合同书
2015/09/21 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB