基于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中的isXX系列
Aug 01 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
vue登录注册实例详解
Sep 14 Javascript
js实现拖动缓动效果
Jan 13 Javascript
Vue基于localStorage存储信息代码实例
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的加密方式及原理
2012/06/14 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
html5的localstorage详解
2017/05/09 HTML / CSS
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
俄语专业职业生涯规划
2014/02/26 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
2014年度个人工作总结
2014/11/07 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
Python保存并浏览用户的历史记录
2022/04/29 Python