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]。它被世界上的绝大多数网站所使用,也被世界主流浏览器ChromeIEFireFoxSafariOpera)支持。JavaScript是一门基于原型、函数先行的语言[5],是一门多范式的语言,它支持面向对象编程,命令式编程,以及函数式编程。它提供语法来操控文本,数组,日期以及正则表达式等,不支持I/O,比如网络,存储和图形等,但这些都可以由它的宿主环境提供支持。

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

在客户端,JavaScript在传统意义上被实现为一种解释语言,但在最近,它已经可以被即时编译(JIT)执行。随着最新的HTML5CSS3语言标准的推行它还可用于游戏、桌面和移动应用程序的开发和在服务器端网络环境运行,如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进行判断没有很多结果。本着这篇文章会被你看到,我尽力了,谢谢阅读。如果您有问题或可以为我提供帮助,可在下方评论。

JavaScript 实现用户点击图片放大的更多相关文章

  1. JavaScript 点击图片放大功能

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. 网页mp3语音展示,点击图片放大,点击图片跳转链接,调表格

    查看mp3语音 <td class="value"><embed src="${sounds.soundName}" type="a ...

  3. vue项目 一行js代码搞定点击图片放大缩小

    一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...

  4. js+jquery+html实现在三种不通的情况下,点击图片放大的效果

    js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...

  5. 微信小程序点击图片放大预览

    微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...

  6. layui点击图片放大-多图显示

    layui点击图片放大-多图显示 标签(空格分隔): js HTML // div <div id="photo-list"> <img class=" ...

  7. javascript点击图片放大的功能(原生)

    使用的图片: 1.jpg <!doctype html> <html lang="en"> <head> <meta charset=&q ...

  8. jQuery点击图片放大拖动查看效果

    效果如图: 放大前: 放大后(可拖动图片浏览): 源码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...

  9. 实现类似于QQ空间相册的点击图片放大,再点后缩小回原来位置

    前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...

随机推荐

  1. Excel VBA入门(一)数据类型

    与其它的编程语言一样,VBA也有它自己的数据类型.讲到数据类型,就离不开"变量"与"常量"这两个概念,变量与常量,都是用于保存数据的.顾名思义,"变量 ...

  2. ios-loadView

      // 先判断当前控制器是不是从storyBoard中加载,如果是,就会加载stroyBoard的view //   判断是否是xib加载 // 否则创建一个空白的view // 如果重写了此方法, ...

  3. 《DNA比对》蓝桥杯复赛试题

    题目描述 脱氧核糖核酸即常说的DNA,是一类带有遗传信息的生物大分子.它由4种主要的脱氧核苷酸(dAMP.dGMP.dCMT和dTMP)通过磷酸二酯键连接而成.这4种核苷酸可以分别记为:A.G.C.T ...

  4. 路由软件quagga和bird日志配置打印ospf邻居变化

    背景: 网络侧反馈偶尔会出现ospf邻居状态变化:full-> other status -> full.历史原因,线上运行的路由软件有quagga和bird两种.两种路由软件的日志级别配 ...

  5. BMP结构详解

    位图BITMAPINFOHEADER 与BITMAPFILEHEADER: 先来看BITMAPINFOHEADER,只写几个主要的biSize包含的是这个结构体的大小(包括颜色表)    biWidt ...

  6. [C++] decltype(auto) C++ 11 feature

    1 //C++ 11 feature template <class T1, class T2> auto getMultiply(T1 data1, T2 data2) -> de ...

  7. [BAT] 以当前时间为名创建文件夹,将本地文件夹里的文件拷贝到远程共享目录,而且保证本地和Jenkins上运行都成功

    @echo off rem connect to szotpc801 net use * /del /yes NET USE X: \\10.66.234.95\d$ Autotest123 /use ...

  8. DeepLearning 学习资料

    1 sotfmax 函数: stanford UFLDL: http://deeplearning.stanford.edu/wiki/index.php/Softmax%E5%9B%9E%E5%BD ...

  9. UVa 12342 Tax Calculator (水题,纳税)

    今天在uva看到一个水题,分享一下. 题意:制定纳税的总额,有几个要求,如果第一个180000,不纳,下一个300000,纳10%,再一个400000,纳15%,再一个300000,纳20%,以后的纳 ...

  10. webstorm的debug模式

    F7 在 Debug 模式下,进入下一步,如果当前行断点是一个方法,则进入当前方法体内, 如果该方法体还有方法,则不会进入该内嵌的方法中 * F8 在 Debug 模式下,进入下一步,如果当前行断点是 ...