html- 點擊圖片放大


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM