<!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. Mac搭建Git/GitHub全过程

    在GitHub上注册了账号,建立了第一个hello-world repository,然后打算把Git平台配置在自己的机器上.因为是Mac OS,我也是一个初学者,很多功能需要自己摸索,于是各种百度, ...

  2. PHP博客小项目之知识点（1）

    一.博客系统介绍 Blog.Bloger.web log(网络日志) 博客主要发布一些文章.图片:博客一般都是个人博客: 博客的文章,一般都是按照时间倒序排列: 博客,仅音译,英文名为Blogger, ...

  3. Python元组、列表--笔记

    <Python3 程序开发指南> 序列包括元组和列表,首先,我们介绍元组. 元组--tuple 元组为有序的序列,元组和字符串一样也是固定的,不能替换或删除其中的任意数据项.如果需要修改应 ...

  4. Java多线程——ThreadLocal类

    一.概述   ThreadLocal是什么呢?其实ThreadLocal并非是一个线程的本地实现版本,它并不是一个Thread,而是threadlocalvariable(线程局部变量).也许把它命名 ...

  5. java06switch

    public class SwitchTest { public static void main(String[] args) { /** * 如果第一名,参加麻省理工大学组织的1个月夏令营 * 如 ...

  6. asp.net微信开发第七篇----高级群发(图文)

    上一篇介绍了如何群发文本消息,本篇将介绍如何群发图文信息,上传图文信息所需的素材,界面如下: 我们先看从素材库中获取图文素材的代码,界面: 素材列表,我是使用的repeater控件, 前台代码如下: ...

  7. Design Pattern ——Builder

    一.基础知识:先前学习建造者模式的时候,总是以这个UML图作为学习基础资料 然后总是要记住四个角色 产品类:一般是一个较为复杂的对象,也就是说创建对象的过程比较复杂,一般会有比较多的代码量.在本类图中 ...

  8. 查看SQL server服务名

    net start MSSQL$SQLEXPRESS 启动服务命令 net stop MSSQL$SQLEXPRESS 关闭服务命令 网上看到的那些 我都用不了 最后想起了这个 现在好了

  9. Entity Framework 新增实体，新增抽象实体

    抽象实体不能new 抽象类:人,实体类:学生 人 p_人= new 学生();   添加数据,学生和人都添加 抽象类可以提供一个抽象的方法,但是并没有实现,类似接口,但又不同于接口.子类继承父类时必须 ...

  10. 你好，C++（30）“大事化小，小事化了”5.4.3 工资程序成长记：函数

    5.4.3 工资程序成长记:函数 自从上次小陈“程序员”的工资程序得到老板的夸奖,口头许诺给他涨工资以后,老板再也没有找过他,涨工资的事自然也就没有下文了.这天,老板又突然召他去办公室.这下可把小陈高 ...