基于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数组的扩展实现代码集合
Jun 01 Javascript
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
javascript将浮点数转换成整数的三个方法
Jun 23 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
vue el-table实现行内编辑功能
Dec 11 Javascript
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 Javascript
javascript实现拼图游戏
Jan 29 Javascript
vue中axios封装使用的完整教程
Mar 03 Vue.js
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学习笔记 数组的常用函数
2011/06/13 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
centos7之Python3.74安装教程
2019/08/15 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
迎接领导欢迎词
2014/01/11 职场文书
会计学专业学生的求职信范文
2014/01/27 职场文书
初三新学期计划书
2014/05/03 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
PHP 时间处理类Carbon
2022/05/20 PHP