html中图片以中心放大的代码

html中图片以中心放大的代码如下：

<div style=" width:300px height:300pxmargin-left:auto

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

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

src="http://mat1.gtimg.com/www/images/qq2012/guanjia2.png"

style="cursor:pointerwidth:300pxheight: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"

}

function smaller(){

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:100pxheight: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>

1、网页中添加图片html代码，使用 <img src="图片地址.jpg">

<img>标签的 src 属性是必需的。它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。另外也可以添加高度width 和 高度height alt等属性标签。

比如：<img src="图片地址.jpg" width="300" height="200" alt="图片说明或标题">

2、网页中为图片添加链接，直接为图片添加href。

<a href="链接地址"><img src="图片地址.jpg"></a>

<a>标签的 href 属性用于指定超链接目标的 URL。

href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。

如果用户选择了 <a>标签中的内容，那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档，或者执行 JavaScript 表达式、方法和函数的列表。

---