html中圖片以中心放大的代碼

html中圖片以中心放大的代碼如下：

<div?style="?width:300px;?height:300px;margin-left:auto;?

margin-right:auto;?overflow:hidden;?margin-top:100px;">

<img?id="img"?onmouseover="bigger()"?onmouseout="smaller()"?

src="/www/images/qq2012/guanjia2.png"?

style="cursor:pointer;width:300px;height:300px;?

transition:all?1s?ease-out?0s;?perspective-origin:bottom;"/>

<script?type="text/javascript">

var?img?=?document.getElementById('img');

function?bigger(){

img.style.width?=?'400px';

img.style.height?=?'400px';

img.style.marginTop?=?"-50px";

img.style.marginLeft?=?"-50px";

}

img.style.width?=?'300px';

img.style.height?=?'300px';

img.style.marginTop?=?"0px";

img.style.marginLeft?=?"0px";

}

</script>

擴展資料：

在html中用js實現鼠標指向圖片時圖片放大的效果的代碼如下：

<img id="img" onmouseover="bigger()" onmouseout="smaller()"?

src="妳的圖片路徑" style="width:100px;height:100px;" />

<script type="text/javascript">?

var img = document.getElementById('img');

function bigger(){?img.style.width = '400px';?img.style.height = '400px';?}

function smaller(){?img.style.width = '100px';?img.style.height = '100px';?}

</script>