码迷,mamicode.com
首页 > 其他好文 > 详细

点击按钮放大或缩小图片

时间:2016-09-21 14:22:45      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:

<!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>

 

点击按钮放大或缩小图片

标签:

原文地址:http://www.cnblogs.com/karila/p/5892287.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!