<!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. 【iOS问题记录】关于UITableViewCell的高度、填充

    创建了继承自UITableViewCell的类,在创建该类的同时创建了.xib文件,在cell中填充UIImageView,其frame根据cell的frame调整.在.m中添加以下方法: -(id) ...

  2. python 整型--《Python 3程序开发指南》笔记

    参考:<Python 3程序开发指南> 整数转换函数: bin(i) 返回整数i的二进制表示(字符串) hex(i) 返回i的十六进制表示(字符串) int(x) 将x转换为整数,失败产生 ...

  3. Asp.Net WebApi Action命名中已‘Get’开头问题

    ApiController 中的Action 命名已‘Get’开头,Post方法提交失败 场景: 1.action命名使用Get开头 /// <summary> /// 获取用户的未读消息 ...

  4. 关于数据库中varchar/nvarchar类型数据的获取注意事项

    当在页面后台获取数据库表中某字段的数据时,需注意该数据的类型.防止因实际数据的字符长度因达不到指定数据类型规定的字符长度而导致空格的占位符. 比如: MSSQL中某一表的结构如下:   表中的数据: ...

  5. 3.RxJava详解

    一.RxJava 到底是什么 异步(取代AsyncTask/Handler/XXX/...?)   二.RxJava 好在哪   简洁(逻辑的简洁,.一步一走)   举例: 题目:将文件夹中的图片都取 ...

  6. 真机测试,Xcode报错:process launch failed: Security

    解决办法:手机->通用->设备管理->信任开发商应用即可

  7. Knockoutjs官网翻译系列（四） computed中依赖追踪是如何工作的

    初学者无需了解这些 ,但是很多高级程序员想知道我们为什么可以保持跟踪这些依赖以及可以正确的更新到UI中.它其实很简单.跟踪算法是这样的: 无论何时你定义了一个computed observable,K ...

  8. java学习笔记(13) —— google GSON 实现json转化方法

    1.配置struts.xml <action name="getGsonAction" class="com.test.action.json.GetGsonAct ...

  9. javascript之闭包深入理解（一）

    曾经在开始学习javascript的时候,很是不理解闭包的概念.今天想对它详细的剖析. 在说清楚闭包之前,必须先清楚作用域链. 作用域链 我们知道,执行环境是js中最为重要的一个概念.执行环境定义了变 ...

  10. 常用CSS代码片断

    单行文本截字 .nowrap { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: normal; ...