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

javascript 图片放大缩小功能实现代码_图象特效

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

看JS源码：

QCMS 轻量级企业建站系统6.0.5
QCMS 轻量级企业建站系统6.0.5

QCMS企业建站系统是通过MVC架构开发的一套PHP轻量级系统，开源，小巧，易用，功能强大、可以自定义模块，容易二次开发，可以称得上是万能CMS系统，可用于企业站，文章站，图片站，下载站，你只要能想得到，就能做的到。 QCMS V6.0.0 主要功能描述特色说明： 简单易用的模板标签，是我们系统的核心组成部分，系统对SEO更友好，源代码全部开放，毫无保留！ 1 内容模块有 ，新

QCMS 轻量级企业建站系统6.0.5 0
查看详情 QCMS 轻量级企业建站系统6.0.5
复制代码 代码如下:

// 放大缩小控制
var PhotoSize = {
zoom: 0, // 缩放率
count: 0, // 缩放次数
cpu: 0, // 当前缩放倍数值
elem: "", // 图片节点
photoWidth: 0, // 图片初始宽度记录
photoHeight: 0, // 图片初始高度记录

init: function(){
this.elem = document.getElementById("focusphoto");
this.photoWidth = this.elem.scrollWidth;
this.photoHeight = this.elem.scrollHeight;

this.zoom = 1.2; // 设置基本参数
this.count = 0;
this.cpu = 1;
},

action: function(x){
if(x === 0){
this.cpu = 1;
this.count = 0;
}else{
this.count += x; // 添加记录
this.cpu = Math.pow(this.zoom, this.count); // 任意次幂运算
};
this.elem.style.width = this.photoWidth * this.cpu +"px";
this.elem.style.height = this.photoHeight * this.cpu +"px";
}
};
// 启动放大缩小效果 用onload方式加载，防止第一次点击获取不到图片的宽高
window.onload = function(){PhotoSize.init()};

建议最好采用onload方式引用，可以准确读到初始图片的大小

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：JavaScript实现页面滚动图片加载(仿lazyload效果)_javascript技巧 下一篇：关于html+ashx开发中几个问题的解决方法_jquery
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript设计模式_观察者模式实战 观察者模式是一种一对多的依赖关系设计模式，当主题对象状态改变时，所有依赖它的观察者都会收到通知并自动更新。其核心角色包括发布者（Subject）和观察者（Observer），发布者维护观察者列表并提供添加、删除及通知接口，观察者实现更新方法以响应通知。JavaScript中可通过类手动实现该模式，常用于事件系统、状态管理和组件通信等场景。例如，自定义事件总线或简化版状态管理均可基于此模式构建。与发布订阅模式相比，观察者模式中发布者与观察者直接关联，耦合度较高，而发布订阅通过中间调度层解耦，更为松
2025-11-23 22:35:07
527
现代JavaScript_Temporal日期API Temporal是JavaScript即将引入的全新日期时间API，旨在解决传统Date对象的可变性、时区处理混乱等问题。它提供不可变的时间实例和清晰的类型区分，如Temporal.PlainDateTime（不带时区）、Temporal.ZonedDateTime（带时区）、Temporal.PlainDate（仅日期）和Temporal.Duration（时间间隔），支持安全、精确的时间操作。通过统一的解析、格式化、时区转换和日期计算接口，如from()、add()、since()等方法，提
2025-11-23 22:35:02
705
JavaScript函数式响应编程_RxJS观察者模式 RxJS通过Observable实现函数式响应编程，利用观察者模式处理异步事件流。1.Observable作为数据源，可被Observer订阅，支持next、error、complete回调；2.操作符如map、filter、debounceTime等提供链式调用的函数式变换，生成新流而不改变原流；3.广泛应用于表单防抖、路由监听、HTTP请求串联等场景，提升异步逻辑的可读与可维护性。
2025-11-23 22:35:02
925
JavaScript_PWA渐进式Web应用开发 PWA是一种结合网页与原生应用优势的技术，由Google提出，核心理念为渐进增强，具备可安装、离线可用、响应式设计、HTTPS安全传输和推送通知等特性；JavaScript通过ServiceWorker实现资源缓存与离线访问，利用Push与NotificationAPI实现消息推送，开发时需配置manifest.json、sw.js和服务注册逻辑，部署需HTTPS并注意缓存策略与文件路径，最终提供跨设备的流畅用户体验。
2025-11-23 22:33:34
205
JavaScript_神经网络与深度学习 JavaScript能做深度学习。借助TensorFlow.js和ONNX.js，可在浏览器中实现模型训练与推理；利用WebGL加速张量运算，支持本地化数据处理，适用于交互式AI、教育演示和边缘计算场景；通过示例展示构建XOR分类模型的完整流程，包括数据准备、模型搭建、训练与预测；尽管存在训练速度慢、内存受限等局限，合理使用预训练模型、模型量化与异步计算可提升性能。
2025-11-23 22:32:02
883
JavaScript编译原理_Babel插件开发指南 Babel插件开发基于AST实现代码转换，核心流程包括解析、转换和生成三阶段。插件在转换阶段通过访问器模式操作AST节点，如StringLiteral、Identifier等，借助@babel/types进行节点修改。掌握AST结构与路径操作是关键，可用于语法降级、宏展开、代码注入等场景。
2025-11-23 22:31:52
592
JavaScript工程化_代码分割策略 按路由分割结合公共依赖提取和预加载优化代码性能。使用动态import拆分路由组件，SplitChunksPlugin抽取公共库，魔法注释实现预加载与预取，高频组件内联、低频功能独立分割，并通过分析工具持续优化，平衡拆分粒度。
2025-11-23 22:31:30
707
JavaScript引擎解析_V8内部工作原理 V8通过解析生成AST，经Ignition解释执行并监控热点函数，由TurboFan优化编译；采用分代GC管理内存，利用隐藏类与内联缓存提升属性访问速度。
2025-11-23 22:29:49
519
JavaScript性能分析_火焰图解读 火焰图是JavaScript性能分析中用于定位瓶颈的可视化工具，通过展示函数调用栈和CPU时间分布，帮助识别耗时长的代码路径。其横向宽度表示函数执行时间占比，越宽代表消耗时间越多；纵向堆叠显示调用层级，顶部为当前执行函数，底部为调用源头。颜色仅作区分无特定含义，相同函数可能被合并显示。常见性能问题表现为：宽高较大的函数块提示计算密集或阻塞操作，频繁小块函数暗示重复调用，连续执行区域反映主线程占用过久，大量微任务堆积则可能导致事件循环延迟。优化时应从最宽顶部函数向下追溯根源，检查重复计算、高频事件
2025-11-23 22:29:02
666
函数式编程JavaScript_高阶函数与组合 高阶函数指接收函数或返回函数的函数，如map、filter；函数组合理论上是(f∘g)(x)=f(g(x))，JavaScript中通过compose实现多函数链式调用，提升代码可读性与维护性。
2025-11-23 22:29:02
959
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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

  • PHP学习

  • 技术支持

  • 返回顶部