圖片點擊放大

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
</head>
<body>
<img src="./app/image/gril.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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章