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. 一张图片优化5k带来的带宽成本及其前端页面的优化方法

    上周,我参加了公司的一门课程<网站性能优化>,讲师提出了一个问题:一张图片优化后减少5K,1年内可以大概省下多少宽带成本呢?非常好奇,仔细听完讲师分析,计算出来的数据让小伙伴们都惊呆了,仅 ...

  2. selenium3 下载、配置

    s1-s3发展历程  : http://www.cnblogs.com/hhudaqiang/p/6550135.html 官网地址:http://www.seleniumhq.org/文档:http ...

  3. Unity3d收藏链接/ 小马哥视频

      Unity3d视频教程下载链接: http://pan.baidu.com/s/1kVwFhrh 密码: v6c7     第一部分  https://pan.baidu.com/share/in ...

  4. 关于jdk7中 使用Collections的排序方法时报Comparison method violates its general contract!异常

    参考: Comparison method violates its general contract Comparison method violates its general contract! ...

  5. 万能头文件#include<bits/stdc++.h>

    最近在打cf时赛后翻阅别人的代码总是会发现一个陌生而奇怪的头文件#include<bits/stdc++.h> 奇怪之处就在于基本上所有的代码只要用了这个头文件就不再写其他头文件了. 百度 ...

  6. WebAPI的路由规则

    1.自定义路由 public static class WebApiConfig { public static void Register(HttpConfiguration config) { / ...

  7. EntityFramework - Code First - 数据迁移

    需求 在更新模型之后同步更新数据库里的表,并不丢失原有数据 使用默认值填充新增加的字段 EntityFramework迁移命令 Enable-Migrations 启用迁移 Add-Migration ...

  8. C++11之Lambda特性探析

    目录 目录 1 1. 什么是Lambda? 1 2. 语法格式 1 2.1. 语法格式 1 2.2. 最简定义 2 3. 应用示例 2 4. capture列表 3 4.1. 基本形式 3 4.2.  ...

  9. 深入理解java虚拟机(十一) 方法调用-解析调用与分派调用

    方法调用过程是指确定被调用方法的版本(即调用哪一个方法),并不包括方法执行过程.我们知道,Class 文件的编译过程中并不包括传统编译中的连接步骤,一切方法调用在 Class 文件调用里面存储的都只是 ...

  10. mysql多字段唯一索引

    项目中需要用到联合唯一索引: 例如:有以下需求:每个人每一天只有可能产生一条记录:处了程序约定之外,数据库本身也可以设定: 例如:user表中有userID,userName两个字段,如果不希望有2条 ...