js点击图片放大，再点击缩小还原_随笔

js 点击图片放大，再点击缩小还原

<!doctype html>

<html lang="en">

<head>

   <meta charset="UTF-8">

</head>

<body>

<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1794894692,1423685501&amp;fm=117&amp;gp=0.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>

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zaji/589437.html

js点击图片放大，再点击缩小还原

发表评论

评论列表（0条）