点击图片放大功能

最近在项目上运到一个点击图片放大的功能。

并不是用a标签伪类实现的那一种放大，本来是希望做成弹框的，但是由于导入的前端框架限制，所以本人采取了另外一种方法，有时候换一种思路，你会发现其实功能的实现很简单。

不多说，上代码。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~···

首先你需要找到那张图片，并且给他加上个a标签。

<a href="javascript:void(0)" οnclick="changePicture()"> 
     <img src="1.png" style="width: 200px;"/>
</a>       

然后你需要写一个div，并且隐藏，然后把这个图片拉大放进去，当然这里的拉大图片只是普通的拉大img标签，所以可能会导致图片失真，当然也有其他的处理方式，这里就不多说了。

<div id="win" style="position:absolute;display:none; z-index:9999;margin-left:150px;margin-top:10px;">
			<center>
			<span>点击图片关闭</span>
			</center>
			<a href="javascript:void(0)" οnclick="closePicture()">
          	<img src="1.png" style="width:1000px; height:500px;"/>
          	</a>
 </div>

通过，float和绝对位置，把图片打开到你想要展示的位置，大小，位置都由你自己进行调试。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~··~~

下面是两个js的代码，其实代码非常的简单，只是单纯取消，开启div的隐藏而已。

function changePicture() {
            	 document.getElementById("win").style.display="";
			}
function closePicture(){
            	document.getElementById("win").style.display="none";
            }

代码很简单，但功能却很实用，希望对大家有帮助。