基于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工具函数代码
Feb 17 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
javascript的正则匹配方法学习
Feb 24 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 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
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
PHP中的事务使用实例
2015/05/26 PHP
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
Python实现CET查分的方法
2015/03/10 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
Python定时任务sched模块用法示例
2018/07/16 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
python实现机器学习之多元线性回归
2018/09/06 Python
python实现石头剪刀布程序
2021/01/20 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
python循环输出三角形图案的例子
2019/11/22 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
python 检测图片是否有马赛克
2020/12/01 Python
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
企划经理的岗位职责
2013/11/17 职场文书
保险公司早会主持词
2014/03/22 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
个人廉洁自律总结
2015/03/06 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python
详解Vue3使用axios的配置教程
2022/04/29 Vue.js
SQL Server中搜索特定的对象
2022/05/25 SQL Server
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python