js制作鼠标移动到图片上的动画

JavaScript019

js制作鼠标移动到图片上的动画,第1张

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

图片外边套一个和图片大小一样的div，设置div样式相对定位、或者绝对定位看你需要，div里边的标签用绝对定位，鼠标拖动时移动这个div，里边标签是会随着移动的，代码就别跟我要了，我比较懒得写这个