基于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 相关文章推荐
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
js常用DOM方法详解
Feb 04 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 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 fsockopen写的HTTP下载的类
2007/02/22 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
为jQuery增加join方法的实现代码
2010/11/28 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
python每天定时运行某程序代码
2019/08/16 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
中专生自我鉴定范文
2013/12/19 职场文书
婚礼新郎父母答谢词
2014/01/16 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers