基于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 相关文章推荐
EasyUI中combobox默认值注意事项
Mar 01 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
Sep 27 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
基于JavaScript实现单例模式
Oct 30 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 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执行sql语句的写法
2009/03/10 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
php解决安全问题的方法实例
2019/09/19 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
python判断windows隐藏文件的方法
2014/03/21 Python
python中Apriori算法实现讲解
2017/12/10 Python
Python标准库shutil用法实例详解
2018/08/13 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
详解python 中in 的 用法
2019/12/12 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
农村改厕实施方案
2014/03/22 职场文书
外联部演讲稿
2014/05/24 职场文书
小学见习报告
2014/10/31 职场文书
2014年保密工作总结
2014/11/22 职场文书
邀请函范文
2015/02/02 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS