前端鼠标移入图片缩放的同时，改变图片背景色。

网页的特效中，有一种需要我们在切换图片的尺寸，以及图片的背景色，但同时不希望切换另一张图片。切换图片的尺寸，我们可以通过element.style.width;来进行调整。那背景色我们可以通过底层背景的颜色，以及图片的透明度来叠加设置。下面是例子let img = document.querySelector('img')document.querySelector('div').onmo...

任钰

426人浏览 · 2020-04-30 14:21:57

任钰 · 2020-04-30 14:21:57 发布

网页的特效中，有一种需要我们在切换图片的尺寸，以及图片的背景色，但同时不希望切换另一张图片。切换图片的尺寸，我们可以通过element.style.width;来进行调整。那背景色我们可以通过底层背景的颜色，以及图片的透明度来叠加设置。下面是例子

let img = document.querySelector('img')
  document.querySelector('div').onmouseover = function () {
    img.style.width = '600px'
    img.style.height = '600px'
    img.style.opacity = '.5'
    this.style.backgroundColor = 'purple'

  }
  document.querySelector('div').onmouseleave = function () {
    img.style.width = '400px'
    img.style.height = '400px'
    img.style.opacity = '1'
    this.style.backgroundColor = '#fff'
  }

这是js部分的代码。
效果如图所示
在这里插入图片描述鼠标移入前
~~-----------分割线--------------- ~~
鼠标移入后