这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
看 JS 源码:
很早以前写的一个效果,今天有时间了整理出来 通过 Math.pow(x,y) 的 "幂" 运算来计算大小图片放大缩小的尺寸
- // 放大缩小控制
- 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 方式引用,可以准确读到初始图片的大小
[Ctrl+A 全选 注:
- <!doctype html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <meta name="auther" content="f7" />
- <title>
- 图片放大缩小
- </title>
- <script type="text/javascript">
- // 放大缩小控制
- 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()
- };
- </script>
- </head>
- <body>
- <input type="button" value="放大" onclick="PhotoSize.action(1);" />
- <input type="button" value="缩小" onclick="PhotoSize.action(-1);" />
- <input type="button" value="还原大小" onclick="PhotoSize.action(0);" />
- <input type="button" value="查看当前倍数" onclick="alert(PhotoSize.cpu);" />
- <br>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_1/1490188064_3149.jpg"
- />
- </body>
- </html>
如需引入外部 Js 需刷新才能执行
]来源: http://www.phperz.com/article/17/0414/282922.html