在html中怎么用js实现鼠标指向图片时图片放大到原图那么大？（具体实现）

JavaScript027

在html中怎么用js实现鼠标指向图片时图片放大到原图那么大？（具体实现）,第1张

可以用js事件“onmouseover”和“onmouseout”来实现。

1、新建html文档，在body标签中添加图片标签，为这个标签设置“id”属性，然后设置图片的默认显示大小css属性：

2、添加“onmouseover”js事件，首先使用“document.getElementById”获取到图片标签，然后定义鼠标移动到图片上时发生的事件，这时图片将会放大：

3、添加“onmouseout”js事件，首先获取图片标签，然后定义鼠标移开图片时发生的事件，这时图片将会缩小：

//html

onmouseover=mouseOver()  换成 onmouseover = mouseOver(this)

onmouseout=mouseOut()  换成 onmouseout=mouseOut(this)

//js 更改透明度即可，不需要换图片

function mouseOver(obj){

    obj.style.opacity = 0.5

}

function mouseOut(obj){

    obj.style.opacity = 1

}

纯css实现方式：

<style>

#test {width:400pxheight:300pxbackground:url(图片1) no-repeat center / cover}

#test:hover {background-image:url(图片2)}

</style>

<div id=test></div>

js实现方式：

<img id=test src="图片1" />

<script>

test.onmouseover=()=>this.src="图片2"

test.onmouseout=()=>this.src="图片1"

</script>