JavaScript 实现用户点击图片放大
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进行判断没有很多结果。本着这篇文章会被你看到,我尽力了,谢谢阅读。如果您有问题或可以为我提供帮助,可在下方评论。
JavaScript 实现用户点击图片放大的更多相关文章
- JavaScript 点击图片放大功能
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 网页mp3语音展示,点击图片放大,点击图片跳转链接,调表格
查看mp3语音 <td class="value"><embed src="${sounds.soundName}" type="a ...
- vue项目 一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
- js+jquery+html实现在三种不通的情况下,点击图片放大的效果
js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定; 图片的宽高固定; 图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...
- 微信小程序点击图片放大预览
微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...
- layui点击图片放大-多图显示
layui点击图片放大-多图显示 标签(空格分隔): js HTML // div <div id="photo-list"> <img class=" ...
- javascript点击图片放大的功能(原生)
使用的图片: 1.jpg <!doctype html> <html lang="en"> <head> <meta charset=&q ...
- jQuery点击图片放大拖动查看效果
效果如图: 放大前: 放大后(可拖动图片浏览): 源码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...
- 实现类似于QQ空间相册的点击图片放大,再点后缩小回原来位置
前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...
随机推荐
- Excel VBA入门(一)数据类型
与其它的编程语言一样,VBA也有它自己的数据类型.讲到数据类型,就离不开"变量"与"常量"这两个概念,变量与常量,都是用于保存数据的.顾名思义,"变量 ...
- ios-loadView
// 先判断当前控制器是不是从storyBoard中加载,如果是,就会加载stroyBoard的view // 判断是否是xib加载 // 否则创建一个空白的view // 如果重写了此方法, ...
- 《DNA比对》蓝桥杯复赛试题
题目描述 脱氧核糖核酸即常说的DNA,是一类带有遗传信息的生物大分子.它由4种主要的脱氧核苷酸(dAMP.dGMP.dCMT和dTMP)通过磷酸二酯键连接而成.这4种核苷酸可以分别记为:A.G.C.T ...
- 路由软件quagga和bird日志配置打印ospf邻居变化
背景: 网络侧反馈偶尔会出现ospf邻居状态变化:full-> other status -> full.历史原因,线上运行的路由软件有quagga和bird两种.两种路由软件的日志级别配 ...
- BMP结构详解
位图BITMAPINFOHEADER 与BITMAPFILEHEADER: 先来看BITMAPINFOHEADER,只写几个主要的biSize包含的是这个结构体的大小(包括颜色表) biWidt ...
- [C++] decltype(auto) C++ 11 feature
1 //C++ 11 feature template <class T1, class T2> auto getMultiply(T1 data1, T2 data2) -> de ...
- [BAT] 以当前时间为名创建文件夹,将本地文件夹里的文件拷贝到远程共享目录,而且保证本地和Jenkins上运行都成功
@echo off rem connect to szotpc801 net use * /del /yes NET USE X: \\10.66.234.95\d$ Autotest123 /use ...
- DeepLearning 学习资料
1 sotfmax 函数: stanford UFLDL: http://deeplearning.stanford.edu/wiki/index.php/Softmax%E5%9B%9E%E5%BD ...
- UVa 12342 Tax Calculator (水题,纳税)
今天在uva看到一个水题,分享一下. 题意:制定纳税的总额,有几个要求,如果第一个180000,不纳,下一个300000,纳10%,再一个400000,纳15%,再一个300000,纳20%,以后的纳 ...
- webstorm的debug模式
F7 在 Debug 模式下,进入下一步,如果当前行断点是一个方法,则进入当前方法体内, 如果该方法体还有方法,则不会进入该内嵌的方法中 * F8 在 Debug 模式下,进入下一步,如果当前行断点是 ...