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

图片点击放大功能

时间:2016-09-23 09:50:19      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:

<img src="xxx.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>

图片点击放大功能

标签:

原文地址:http://www.cnblogs.com/webzwf/p/5898781.html

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