基于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 鼠标拖动图标技术
Feb 07 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 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实现mysql封装类示例
2014/05/07 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
美国滑板店:Tactics
2020/11/08 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
UNIX文件系统常用命令
2012/05/25 面试题
违反学校规定检讨书
2014/01/18 职场文书
毕业生自荐信格式
2014/03/07 职场文书
厨房管理计划书
2014/04/27 职场文书
机电系毕业生求职信
2014/07/11 职场文书
2015年超市工作总结
2015/04/09 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
Python anaconda安装库命令详解
2021/10/16 Python
Python&Matlab实现樱花的绘制
2022/04/07 Python