讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

基于jquery的滚动鼠标放大缩小图片效果_jquery

php中文网
发布： 2016-05-16 18:00:04
原创
1706人浏览过

今天要出个鼠标滚动放大缩小图片的功能，看似很简单，从网上一搜，出现的都是onmousewheel的例子，全部只支持IE浏览器，结果查出火狐有对应的DOMMouseScroll来处理这个功能，代码如下,并加上注意的注释项：

Designify
Designify

拖入图片便可自动去除背景✨

Designify 90
查看详情 Designify
复制代码 代码如下:

$(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.detailresizeImg(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请点击这里：滚动鼠标放大缩小图片效果

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：基于jquery的无限级联下拉框js插件_jquery 下一篇：对setInterval在火狐和chrome切换标签产生奇怪的效果之探索，与解决方案！_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
为什么javascript需要对象密封_它限制哪些操作？ 对象密封限制新增属性、删除属性和重新配置属性，但允许修改已有可写属性的值；它比不可扩展多禁删除，比冻结少禁改值，适用于结构稳定而内容需可变的场景。
2025-12-21 16:11:02
292
javascript动画如何实现_怎样用requestAnimationFrame创建流畅动画？ rAF比定时器更适合动画，因其与屏幕刷新率同步、自动暂停、无需手动计算帧间隔；基础用法需递归调用，推荐使用时间戳控制进度；注意取消动画、避免强制重排、优先使用transform/opacity，并可添加polyfill兼容旧浏览器。
2025-12-21 16:06:39
489
javascript原型是什么_原型链如何工作？ JavaScript原型是对象共享属性和方法的机制，原型链通过[[Prototype]]逐级向上查找属性直至null；prototype是函数独有的属性，用于指定实例继承的内容，而__proto__是实例指向其构造函数prototype的内部链接。
2025-12-21 16:05:45
427
如何用javascript实现懒加载_有哪些技术方案？ 懒加载核心是按需加载，推荐使用IntersectionObserverAPI实现，辅以loading="lazy"渐进增强；老项目兼容IE可降级为节流滚动监听；框架中宜封装为Hook或指令，避免关键内容懒加载。
2025-12-21 15:59:47
590
javascript如何实现算法_如何用js解决常见的算法问题 JavaScript算法核心是理解本质、选合适数据结构、写可读可维护代码，强调灵活性与工程实用性，而非极致性能。
2025-12-21 15:59:02
495
Javascript如何实现函数组合_如何构建管道数据流？ 函数组合（compose）从右到左执行，如f(g(h(x)))；管道（pipe）从左到右执行，更符合阅读顺序；二者均通过reduce或reduceRight实现，依赖纯函数与一元化设计以保障可靠性。
2025-12-21 15:50:48
648
javascript高阶函数是什么_map和filter如何使用 JavaScript高阶函数是以函数为参数或返回函数的函数；map对每个元素做一对一转换生成等长新数组，filter按条件筛选生成子集数组，二者可链式组合实现清晰的数据处理逻辑。
2025-12-21 15:43:23
215
javascript怎样操作日期和时间？_javascript的Date对象有哪些方法？ JavaScriptDate对象可处理当前时间及任意时间点，支持创建、获取、设置、格式化等操作；需注意月份从0开始、时区影响及字符串解析兼容性。
2025-12-21 15:39:07
600
什么是箭头函数_它与普通函数有何不同 箭头函数是ES6引入的语法糖，语法更简洁但无this绑定、不能new调用、无arguments和prototype，且无法直接递归。
2025-12-21 15:39:07
611
javascript的数组去重有哪些方法_如何兼顾性能和可读性 JavaScript数组去重首选[...newSet(arr)]，简洁高效且语义清晰；大数组或旧环境用Map手动遍历实现O(n)性能；对象数组需自定义key比较逻辑；封装成uniqBy等函数可提升复用性与可读性。
2025-12-21 15:36:09
510
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部