基于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 相关文章推荐
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
用jquery实现下拉菜单效果的代码
Jul 25 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
jquery实现弹出层效果实例
May 19 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
记录一次开发微信网页分享的步骤
May 07 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
递归列出所有文件和目录
2006/10/09 PHP
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
Java中final关键字详解
2015/08/10 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
整理AngularJS中的一些常用指令
2015/06/16 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
python2和python3哪个使用率高
2020/06/23 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
python xlsxwriter模块的使用
2020/12/24 Python
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
年度安全生产目标责任书
2014/07/23 职场文书
民族学专业求职信
2014/07/28 职场文书
白酒营销策划方案
2014/08/17 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
冰峪沟导游词
2015/02/09 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
校车安全管理责任书
2015/05/11 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
Python绘制分类图的方法
2021/04/20 Python
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android