JavaScript 实现用户点击图片放大

2022-09-03 09:11:29

JavaScript 实现用户点击图片放大

一、契机

情况是这样的，之前推荐朋友去建站。后面他专门写了一篇文章说如何实现 "用户点击图片实现放大效果"，俺就好好 “拜读” 了一下。其实他是使用 "img" 配合 "a" 实现 "target" 参数当前窗口打开。本着学(jiao)习(yu)的精神，研究了一下午也出结果了。在此分享给大家，如有问题欢迎留言告知，感激不尽。

二、2W1H

什么是 JS ( javascript )
怎么想到的？又是如何实现代码的编写？
为什么会在代码过程遇到什么问题？

三：JavaScript 是什么

JavaScript 是属于网络的脚本语言！
JavaScript 是因特网上最流行的脚本语言。
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。

var imgWimgW=document.getElementsByTagName("img");

var imgLen=imgWimgW.length;

for(var i=0;i<=imgLen;i++){

	if(imgWimgW[i].width<600){

		imgWimgW[i].width=imgWimgW[i].width * 2

    }

}

JavaScript，一种高级编程语言，通过解释执行，是一门动态类型，面向对象（基于原型）的直译语言[4]。它已经由ECMA（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化[4]。它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、FireFox、Safari、Opera）支持。JavaScript是一门基于原型、函数先行的语言[5]，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本，数组，日期以及正则表达式等，不支持I/O，比如网络，存储和图形等，但这些都可以由它的宿主环境提供支持。

虽然JavaScript与Java这门语言不管是在名字上，或是在语法上都有很多相似性，但这两门编程语言从设计之初就有很大的不同，JavaScript的语言设计主要受到了Self（一种基于原型的编程语言）和Scheme（一门函数式编程语言）的影响[5]。在语法结构上它又与C语言有很多相似（例如if条件语句、while循环、switch语句、do-while循环等）[6]。

在客户端，JavaScript在传统意义上被实现为一种解释语言，但在最近，它已经可以被即时编译（JIT）执行。随着最新的HTML5和CSS3语言标准的推行它还可用于游戏、桌面和移动应用程序的开发和在服务器端网络环境运行，如Node.js。——摘自*

用俺自己的话来说，JS就是可以对网页进行设计、控制、验证。大到”谷歌浏览器中扩展工具“，"油猴子（Tampermonkey）插件"。小到 ”搜索引擎搜索输入框锚点的定位“，”为静态网站实现动起来“。JavaScript 这个编程语言在操作系统级别强到有 Node.JS 为它提供运行环境，在Web服务器中有 JQuery 来简化代码编写。本站以前写过一篇 ”Linux 下安装 Hexo 博客" 用的就是 NodeJS 平台提供的运行环境。

四：思想家与实践家

I、怎么想到它的：

除了单纯的只是想实现它以外，其实还有之前编写过谷歌插件（为了批量删除微博动态）、学习过JQuery （实现让静态网站动起来）、还搭建过博客平台。其实每次自己看资讯文章以及别人网站时，多少都会听到大家说及其多强大，自己也看到一个简单的网页是如何依靠JS拥有了更多的操作性。种种历史经历缘由，使得我一直想好好的学习JS一次。尤其是在这个Web时代，JavaScript 太重要了（为什么会想到xss...）。所以这个这次有这个机会，没有使用JQuery 简化操作，就自己搜搜资料看看书实现了 "用户点击放大图片" 的。

II、代码的思路与实现：

1、获取到图片

2、统计图片数量

3、以2为参数依次循环

4、循环内部判断属性满足

5、图形属性的二次修改

1、使用 "getElementsByTagName" 方法来获取 ("img") 标签标识的图片

document.getElementsByTagName("img");

2、使用 ".length" 方法配合 1 完成图片数量的统计

3、使用 "for" 配合 2 进行单个循环方便内部判定

4、使用 "if" 配合 3 进行图片宽度这个属性的判定

5、使用 ".width" 配合算术计算完成二次属性修改

五：遇到过困难如何解决

遇到三个困难：一个已经解决，一个可以解决，一个没头绪。一个个来。

I、已经解决的困难可参考Github分享的代码

之前一次没有办法实现for循环内部的if判定。准确来说是不能完全实现if判定，它只能判定第一个。

在分享的代码中，大家可以看到我犯下几个错误：

1、把 “全局变量” 放进了 for 循环内部

for(var i=0;i<=imgLen;i++){

     var imgW=document.getElementsByTagName('img')[i];

这里造成的结果就是只能判定一次的原因之一

2、因为上一个错误，造成 for 循环的意义被破环

for(var i=0;i<=imgLen;i++){

     var imgW=document.getElementsByTagName('img')[i];

	 if(imgW.width==540){

		window.alert('test')

**可以看到for的意义就是为了使得getElementsByTagName方法“有价值”，但因为 “全局变量” 在 for 内部并且已经被标上了“价值” **

让我们在看看最终正确的代码(上)与错误代码(下)的对比：

var imgWimgW=document.getElementsByTagName("img");

var imgLen=imgWimgW.length;

for(var i=0;i<=imgLen;i++){

	if(imgWimgW[i].width<600){

		imgWimgW[i].width=imgWimgW[i].width * 2

    }

}

var images=document.getElementsByTagName("img");

var imgLen=images.length;

for(var i=0;i<=imgLen;i++){

     var imgW=document.getElementsByTagName('img')[i];

	 document.write("<h1>"+imgW.width+"</h1>");

	 if(imgW.width==540){

		window.alert('test')

     	imgW.style.width=imgW.width * 2;

     }

}

仔细看看，相信你也会有所所获

3、因为上面俩个致命错误，造成代码越改越错。

imgW.style.width=imgW.width * 2;

等等错误......

II、可以解决的问题

如 I 所写说展示的，如果您按照如上操作就可以实现 “全局图片放大” 的效果了。但是这显然不是我们想要的，我们需要用户点击图片后，实现图片的放大效果。其实这个不难，但是因为 “困难3" 的原因实现没有意义，所以我没有做。但是这里可以给大家分享下思路。

现在我们已经实现了全局的JavaScript片段代码编写
您需要完成以下俩步骤
- 为全局JavaScript进行function参数的封装（方便img中onclick参数调用）
- 继续使用JavaScript实现全局 img 标签的 onclick 赋值
最后情况大概是： <img src='https://example.com/filename.png' onclick='PicBig()'>

还可以参照下别人写的代码（点击图片放大）

var flag = true, imgH, imgW, img = document.getElementsByTagName('img')[0]; img.onclick = function(){ imgH = img.height; imgW = img.width; if(flag){ flag = false; img.height = imgH*2; img.width = imgW*2; }else{ flag = true; img.height = imgH/2; img.width = imgW/2; } }

III、最后说下为什么不能使用

因为博客园渲染 markdown 使用的 iframe 文档的内联框架。

大白话来说就是大网页中套着小网页，所以利用 JavaScript 我暂时不知道如何实现。

上述大概就是就是内容了。最后说下这篇文章的诞生主要还是百度搜了下国内似乎对JavaScript内for镶嵌if进行判断没有很多结果。本着这篇文章会被你看到，我尽力了，谢谢阅读。如果您有问题或可以为我提供帮助，可在下方评论。

码农公寓