代码

html点击按钮放大或缩小图片(编号1)

字号+ 作者:admin 来源:未知 2019-01-12 08:19

点击按钮放大或缩小图片

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>html点击按钮放大或缩小图片</title></head>
<body>
<img src="./ims/1.jpg">
<script>
   var flag = true,//状态true为正常的状态,false为放大的状态
           imgH,//图片的高度
           imgW,//图片的宽度
           img = document.getElementsByTagName('img')[0];//图片元素
  img.onclick =  function(){
      //图片点击事件
       imgH = img.height; //获取图片的高度
       imgW = img.width; //获取图片的宽度
       if(flag){
           //图片为正常状态,设置图片宽高为现在宽高的2倍
           flag = false;//把状态设为放大状态
           img.height = imgH*2;
           img.width = imgW*2;
       }else{
           //图片为放大状态,设置图片宽高为现在宽高的二分之一
           flag = true;//把状态设为正常状态
           img.height = imgH/2;
           img.width = imgW/2;
       }

   }

</script>
</body>
</html>


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Css实战训练之图片点击放大(编号5)

    Css实战训练之图片点击放大(编号5)

    2019-01-12 08:19

  • 鼠标移到图片上,图片自动放大(编号4)

    鼠标移到图片上,图片自动放大(编号4)

    2019-01-12 08:19

  • html实现单击图片放大图片的方法(编号2)

    html实现单击图片放大图片的方法(编号2)

    2019-01-12 08:19

  • HTML:图片放大特效(编号3)

    HTML:图片放大特效(编号3)

    2019-01-12 08:19

网友点评
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
验证码: 点击我更换图片
精彩导读