<!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. php递归json类实例代码

    这篇文章主要介绍了php递归json类的实现方法,可以实现对索引数组及数字数组的解析,进而实现递归数组返回json字符串的功能.具体实现代码如下: <?php /* * @ anthor:QD ...

  2. NYOJ-571 整数划分(三)

    此题是个非常经典的题目,这个题目包含了整数划分(一)和整数划分(二)的所有情形,而且还增加了其它的情形,主要是用递归或者说是递推式来解,只要找到了递推式剩下的任务就是找边界条件了,我觉得边界也是非常重 ...

  3. spring aop原理分析

    持续更新... aop跟java代理模式有关. java.lang.reflect.Proxy java.lang.reflect.InvocationHandler 工厂模式用到java反射. ao ...

  4. Android开发手记(13) 几种Alertdialog的使用

    本文主要讨论七种形式的AlertDialog,及其编写方法. 1.退出 在用户退出的时候提示用户是否退出,含有“确定”和“退出”两个按键. btnExit.setOnClickListener(new ...

  5. Swift中的延迟加载(懒加载)

    Swift方式的延迟加载 而在Swift中,你只需一行代码即可实现此机制: lazy var players = String[]() 简单.简洁,直入主题. 但你得记住,你必须使用var关键字来定义 ...

  6. UIWebView禁止点击后跳转

    #pragma mark 禁止webview中的链接点击 - (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRe ...

  7. [转] JS运算符 &&和|| 及其优先级

    第一.&& (逻辑与)运算,看一个简单的例子: var a = 1 && 2 && 3; var b = 0 && 1 &&am ...

  8. mysql优化 - mysql 的 hint

    FORCE INDEX 强制索引 只使用建立在field1上的索引,而不使用其它字段上的索引. SELECT * FROM table1 FORCE INDEX (field1) IGNORE IND ...

  9. 获取MP3和M4A音乐文件的歌曲信息以及专辑图片－－备用

    NSBundle* bundle = [NSBundle mainBundle];     NSString* path = [bundle bundlePath];     NSURL * file ...

  10. Collection Views and Building Custom Layouts-备

    UICollectionView的结构回顾 首先回顾一下Collection View的构成,我们能看到的有三个部分: Cells Supplementary Views 追加视图 (类似Header ...