javascriptを使ってonmouseoverとonmouseoutにトランジションを追加する

これはまだ新しくなっています。どのように私はタグを使用している間にpicture1の変更からpicture2へのトランジションを追加するのですか？ 3番目の画像をスクリプトに追加して、画像にカーソルを合わせると、2つではなく3つの画像が表示されるようにすることはできますか？ここに私のコードがある、私はそれが動作を期待javascriptを使ってonmouseoverとonmouseoutにトランジションを追加する

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

出典

2017-01-20 Jay

画像あたりとイメージ間の切り替えよりも 'img'要素を使用している私はこれを達成するために発見された最良の方法CSSスタイルの 'opacity'を' 0'（または '1'）に変更することで、JavaScriptを有効にします。 CSSレイヤーでは、 'transition：opacity 0.25s'を使って、私が望む' img'要素をアニメートするスタイルを設定しました。これらの要素は、互いの上に配置する必要があります。 – Myst

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>

出典

2017-01-20 16:33:41

javascriptを使ってonmouseoverとonmouseoutにトランジションを追加する

答えて

関連する問題