图片点击放大功能

Posted 柔光

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片点击放大功能相关的知识,希望对你有一定的参考价值。

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

以上是关于图片点击放大功能的主要内容,如果未能解决你的问题,请参考以下文章

怎么用js实现图片点击时放大,再点击恢复

前端怎么实现点击图片将图片放大而且图片可以手势随意缩放,最好附上代码,非常感谢

vue 快速给图片添加,点击旋转、放大、缩小、拖动的效果

iOS Swift 仿微信朋友圈实现图片点击放大查看

iOS UICollectionView 入门 07 点击cell放大图片

网页图片如何放大显示