基于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 操作文件 实现方法小结
Jul 02 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
微信小程序实现评论功能
Nov 28 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
javascript History对象原理解析
Feb 17 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
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
php把数组值转换成键的方法
2015/07/13 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
python生成密码字典的方法
2018/07/06 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
通过实例解析Python return运行原理
2020/03/04 Python
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
丑小鸭教学反思
2014/02/03 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
个人承诺书
2014/03/26 职场文书
应用心理学专业求职信
2014/08/04 职场文书
安全例会汇报材料
2014/08/23 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
欠条格式范本
2015/07/03 职场文书
Apache自带的ab压力测试工具的实现
2022/07/23 Servers