使用 javascript 在 onmouseover 和 onmouseout 中添加过渡

>我对此还很陌生。如何在仍然使用标签的同时添加从更改图片 1 到图片 2 的过渡？我还可以在脚本中添加第三张图片，以便当您将鼠标悬停在图片上时，它会显示三张图片而不是两张图片？这是我的代码

<html>
<body>
    <img src = "picture1.jpg" onmouseover="rollover(this)" onmouseout="mouseaway(this)">
</body>
<script type="text/javascript">
    function rollover(my_image)
    {my_image.src = 'picture2.jpg';}
    function mouseaway(my_image)
    {my_image.src = "picture1.jpg";}
</script>
</html>

我希望它能工作。

function rollover(my_image){
  my_image.style.width = "200px";
  my_image.style.transition = "width 2s, height 4s";
  my_image.src = 'http://lorempixel.com/100/100/';
}
function mouseaway(my_image){
  
     my_image.style.width = "50px";
     // my_image.style.opacity = "0.5";
      my_image.src = "http://lorempixel.com/50/50/";
}

<html>
<body>
    <img src = "http://lorempixel.com/50/50/" onmouseover="rollover(this)" onmouseout="mouseaway(this)">
</body>
</html>

相关内容

最新更新

热门标签：