基于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 判断中文字符长度的函数代码
Aug 27 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
学习javascript文件加载优化
Feb 19 Javascript
Javascript之String对象详解
Jun 08 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
Vue仿支付宝支付功能
May 25 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
JavaScript实现前端倒计时效果
Feb 09 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制作百度词典查词采集器
2015/01/29 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
JS 时间显示效果代码
2009/08/23 Javascript
ajax 缓存 问题 requestheader
2010/08/01 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
javascript兼容性(实例讲解)
2017/08/15 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
python文件操作整理汇总
2014/10/21 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
anaconda如何查看并管理python环境
2019/07/05 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
文明教师事迹材料
2014/01/16 职场文书
公司拓展活动方案
2014/02/13 职场文书
小小商店教学反思
2014/04/27 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
学校花圃的标语
2014/06/18 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
php字符串倒叙
2021/04/01 PHP
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫