基于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 相关文章推荐
js 利用image对象实现图片的预加载提高访问速度
Mar 29 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 Javascript
js获取checkbox值的方法
Jan 28 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 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
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
解析php中call_user_func_array的作用
2013/06/07 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
js对象的比较
2011/02/26 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
python实现简单爬虫功能的示例
2016/10/24 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
基于python 凸包问题的解决
2020/04/16 Python
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
市场营销大学生职业规划书
2014/02/25 职场文书
浪费资源的建议书
2014/03/12 职场文书
大型营销活动计划书
2014/04/28 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python
设置IIS Express并发数
2022/07/07 Servers