<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

</head>

<body>

<img name="a" src="imgs/index-banner.png">

<img name="b" src="imgs/MORE.png">

<script>

    var flag = true,//状态true为正常的状态,false为放大的状态

            imgH,//图片的高度

            imgW,//图片的宽度

            imga = document.getElementsByName("a")[0];//图片元素

            imgb = document.getElementsByName("b")[0];//图片元素

    b.onclick =  function(){

        //图片点击事件

        imgH = imga.height; //获取图片的高度

        imgW = imga.width; //获取图片的宽度

        if(flag){

            //图片为正常状态,设置图片宽高为现在宽高的2倍

            flag = false;//把状态设为放大状态

            imga.height = imgH*2;

            imga.width = imgW*2;

        }else{

            //图片为放大状态,设置图片宽高为现在宽高的二分之一

            flag = true;//把状态设为正常状态

            imga.height = imgH/2;

            imga.width = imgW/2;

        }

    }

</script>

</body>

</html>

js点击按钮，放大对应图片代码的更多相关文章

  1. jquery点击按钮弹出图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码

    一:通过html锚点实现滚动定位到页面指定位置(DIV):    如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...

  3. JS点击按钮弹出窗口

    由于没有系统学习过JS,遇到一个需求:点击按钮,弹出一个独立的窗口. 在网上百度了一下,并没有找到满意的结果,最重要的是各种方法很复杂.最终,仔细研究了一下,原来只是需要只要一个简单的函数就能满足自己 ...

  4. JS点击按钮打开新的独立页面

    工作中遇到需要点击按钮弹出一个独立的页面,并显示指定内容的问题,查了一些资料后,得到以下方法: window.open('locationPage.html', '_blank', 'height=1 ...

  5. js点击按钮为元素随机字体颜色和背景色

    文章地址 https://www.cnblogs.com/sandraryan/ 写两个button和一个div,点击按钮分别改变背景色和前景色(字体颜色).产生的是一个随机颜色. <!DOCT ...

  6. 原生js点击按钮切换图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. js 点击按钮下载图片，另存为

    js: 1 $(document).on('click',"#xiazai",function(){ 2 imgurl = $(".img-box").find ...

  8. JS 点击按钮后弹出遮罩层，有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  9. 点击按钮，缩放图片（img.width、img.style.width、img.offsetWidth）

    前几天在慕课网上看到一个关于图片缩放的教学视频,因为当时对老师使用img.width,而不是使用img.style.width而感到奇怪,所以周末得空了,想来自己试着写出来,相关视频网址如下:http ...

随机推荐

  1. Ubuntu安装分区设置

    我的Ubuntu 安装分区 /boot   200M /          2000M /home  6000M swap    1000M /boot分区,它包含了操作系统的内核和在启动系统过程中所 ...

  2. 修改MySQL引擎

    1. 显示MySQL支持的引擎:show engines;

  3. 打勾显示输入的密码 --EditText与setTransformationMethod

    实现目标: 实现原理: 为CheckBox添加一个监听器事件; 实现的源码: package edu.cquptzx.showPassword; import android.app.Activity ...

  4. Java基础知识强化69：基本类型包装类之Character案例（统计字符串中大写小写以及数字的次数）

    我们直接看案例如下: package cn.itcast_03; import java.util.Scanner; /* * 统计一个字符串中大写字母字符,小写字母字符,数字字符出现的次数.(不考虑 ...

  5. 使用HighCharts实现实时数据展示

    在众多的工业控制系统领域常常会实时采集现场的温度.压力.扭矩等数据,这些数据对于监控人员进行现场态势感知.进行未来趋势预测具有重大指导价值.工程控制人员如果只是阅读海量的数据报表,对于现场整个态势的掌 ...

  6. GitHub的css/js文件给墙了的解决方法

    今天早上一打开github发现css等都加载失败. 后来发现是给墙了. 本人用的是windows. 解决方法:改hosts 一般情况是在这里:C:\Windows\System32\drivers\e ...

  7. Ubuntu桌面版与服务器版有什么不同?

         提到安装Linux,Ubuntu可谓是最受欢迎的.为了满足每个人的需求,出现了不少版本或风格的Ubuntu;其中两项便是桌面版与服务器版.只要发布版本号一致,这两者从核心来说也就是相同的,唯 ...

  8. iOS中使用Localizable.strings适配App在不同语言下文本的显示

    iOS开发中,若是使用xib或storyboard搭建界面视图,视图中固定显示的文本内容可以用localized添加不同语言适配.但是在实际中会有动态加载的文本,这些文字的适配就需要NSLocaliz ...

  9. 向Dialog中添加一个新的Menu

    1.创建一个新的Menu,在资源管理视图中,右键Menu-->传入Menu 2.设计新Menu,ID为IDR_MENU1 3.在该Dialog的源文件中,找到CTest001Dlg::OnIni ...

  10. Eclipse导入JavaWeb项目报错：The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path

    JavaWeb项目中写的JSP页面需要Web容器解析处理成HTML才能展示到前端浏览器,解析JSP需要Web容器.JSP页面顶端出现“红色”的报错信息:The superclass "jav ...