基于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 相关文章推荐
jQuery对象和DOM对象相互转化
Apr 24 Javascript
JavaScript 空位补零实现代码
Feb 26 Javascript
JS getStyle获取最终样式函数代码
Apr 01 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
vue 开发之路由配置方法详解
Dec 02 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 header函数分析详解
2011/08/06 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
js实现导航跟随效果
2018/11/17 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
家长会邀请书
2014/01/25 职场文书
公司经理任命书
2014/06/05 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
招商引资工作汇报
2014/10/28 职场文书
教师远程培训心得体会
2016/01/09 职场文书
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
Java 多线程协作作业之信号同步
2022/05/11 Java/Android