基于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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 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新手NOTICE错误常见解决方法
2011/12/07 PHP
解析php入库和出库
2013/06/25 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
php文件上传的两种实现方法
2016/04/04 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
用python删除java文件头上版权信息的方法
2014/07/31 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
Python3匿名函数用法示例
2018/07/25 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
浅析Python __name__ 是什么
2020/07/07 Python
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
上海期货面试题
2014/01/31 面试题
活动总结格式范文
2014/04/26 职场文书
赔偿协议书
2015/01/27 职场文书
西安兵马俑导游词
2015/02/02 职场文书
幼儿园六一主持词
2015/06/30 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书