複数のリンクへのJavascriptアニメーション？

最初のリンクで行ったアニメーションをすべてのリンクに表示します。しかし、私はid = "tag"をリンクの1つにのみ適用できます（HTMLコードを参照）。私は、同じ関数がマウス上でそれを呼び出すリンクをアニメートできるようにする必要があります。これ以外の方法もありますが、おそらく 'this'キーワードを使用します。複数のリンクへのJavascriptアニメーション？

function step(delta) { 
 
    var elem = document.getElementById("tab"); 
 
    var from = [0, 0, 0], 
 
    to = [180, 120, 120]; 
 
    elem.style.backgroundColor = 'rgb(' + 
 
    parseInt(from[0] + delta * (to[0] - from[0])) + ',' + 
 
    parseInt(from[1] + delta * (to[1] - from[1])) + ',' + 
 
    parseInt(from[2] + delta * (to[2] - from[2])) + ')'; 
 
} 
 

 
function smooth() { 
 
    var duration = 200; 
 
    var start = new Date(); 
 
    var id = setInterval(change, 1); 
 

 
    function change() { 
 
    var timePassed = new Date() - start; 
 
    var progress = timePassed/duration; 
 
    if (progress > 1) progress = 1; 
 
    var delta = progress; 
 
    step(delta); 
 
    if (progress == 1) clearInterval(id); 
 
    } 
 
}

ul { 
 
    list-style-type: none; 
 
    background-color: rgb(0, 0, 0); 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    padding: 12px; 
 
    text-decoration: none; 
 
    color: white; 
 
    cursor: pointer; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Gallery</title> 
 
    <link rel="stylesheet" href="styles/styleweb.css"> 
 
</head> 
 

 
<body> 
 
    <ul> 
 
    <li><a id="tab" onmouseover="smooth()" href="som.html">Shadow of Mordor</a></li> 
 
    <li><a onmouseover="smooth()" href="tr.html">Tomb Raider</a></li> 
 
    <li><a onmouseover="smooth()" href="ac.html">Assassin's Creed</a></li> 
 
    <li><a onmouseover="smooth()" href="bf4.html">Battlefield 4</a></li> 
 
    </ul> 
 

 
</html>

出典

2016-05-14 Dhruv Chadha

基本的には、 '' 'step（）' ''も同様に呼びたい、 '' onmouseover'''でしょうか？ – kkaosninja

実際にsmooth（）がstep（）を呼び出すので、すべてのリンクでonmouseoverをsmooth（）にする必要があります。 –

正解として問題に最適な解決策が見つかった場合は、本当に感謝します。 – kkaosninja

ここに移動します。

重要事項： -

1）li要素の代わりに、アンカー要素に「タブ」のクラスを設定しています。

2）mouseoverイベントリスナーは、JSコード内のすべての「タブ」クラスの要素に対して設定され、HTMLをより精巧にします。

3）は、マウスは、Li元素の背景色の変更をリセットするmouseoutために別のイベントリスナーを追加する勧めstep()

4）に推移した要素への参照を渡すためにevent.targetを使用しました。

Link to JSFiddle

完全なコード=>

<!doctype html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style type="text/css"> 
     img { 
      margin: 10px; 
      width: 270px; 
      float: left; 
      opacity: 0.4; 
     } 

     ul { 
      list-style-type: none; 
      background-color: rgb(0, 0, 0); 
      margin: 0; 
      padding: 0; 
      overflow: hidden; 
     } 

     li { 
      float: left; 
     } 

     li a { 
      display: block; 
      padding: 12px; 
      text-decoration: none; 
      color: white; 
      cursor: pointer; 
     } 

     div a img:hover { 
      opacity: 1.0; 
      width: 290px; 
      margin: 5px 0 0 0; 
     } 

     #mid { 
      overflow: hidden; 
      margin: 40px auto; 
      width: 1170px; 
     } 
    </style> 
</head> 

<body> 
    <ul> 
     <li class="tab"><a href="som.html">Shadow of Mordor</a> 
     </li> 
     <li class="tab"><a href="tr.html">Tomb Raider</a> 
     </li> 
     <li class="tab"><a href="ac.html">Assassin's Creed</a> 
     </li> 
     <li class="tab"><a href="bf4.html">Battlefield 4</a> 
     </li> 
    </ul> 
    <div id="mid"> 
     <div> 
      <a href="http://worldversus.com/img/assassins-creed.jpg"> 
       <img src="images/ac/1.jpg"> 
      </a> 
     </div> 
     <div> 
      <a href="http://www.mediastinger.com/wp-content/uploads/2013/10/Assassins-Creed-Black-Flag-after-credits-hq.jpg"> 
       <img src="images/ac/2.jpg"> 
      </a> 
     </div> 
     <div> 
      <a href="http://egmr.net/wp-content/gallery/18-nov-2014-review-ac-unity/assass-unity.jpg?24e25d"> 
       <img src="images/ac/3.jpg"> 
      </a> 
     </div> 
     <div> 
      <a href="https://images-eds-ssl.xboxlive.com/image?url=8Oaj9Ryq1G1_p3lLnXlsaZgGzAie6Mnu24_PawYuDYIoH77pJ.X5Z.MqQPibUVTc0FCED4ph6ouevcPKpUexEae42sK1L4abdr36cYbFg4G4ofQlf6Ap41qwSQE4bCej.ENDwdWBb6xDzigKhhH0qYvtoqHqiprHkhGpbyYtNJE3oju9YrHyPXal_7gB.XZvNrsFG5dcIRXfUV33KDFrPeFl379b5KBjp2MNGhf.7LU-&format=jpg"> 
       <img src="images/ac/4.jpg"> 
      </a> 
     </div> 
    </div> 
    <div id="mid"> 
     <div> 
      <a href="http://hq-oboi.ru/photo/assasins_krid_1920x1080.jpg"> 
       <img src="images/ac/5.jpg"> 
      </a> 
     </div> 
     <div> 
      <a href="http://www.imgbase.info/images/safe-wallpapers/video_games/assassins_creed_2/4247_video_games_assasins_creed.jpg"> 
       <img src="images/ac/6.jpg"> 
      </a> 
     </div> 
     <div> 
      <a href="http://wallpoper.com/images/00/45/05/97/assassins-creed-11_00450597.jpg"> 
       <img src="images/ac/7.jpg"> 
      </a> 
     </div> 
     <div> 
      <a href="https://images-eds-ssl.xboxlive.com/image?url=8Oaj9Ryq1G1_p3lLnXlsaZgGzAie6Mnu24_PawYuDYIoH77pJ.X5Z.MqQPibUVTcsPTaZHCOi.gQ4NDogeo4.TqXBFvO.nSfIzhmc_YrTHs0al36bdFgkybp_1BaryxmOBZ4OnePryCoo0dAUhCvuKYPS17rz27TOZ6fKbVR9T9cW6h_VpeaE3eGtS8JmETueVQdOrvbOyLjTTbxjs_FKOhnSrdWbfQ2uFgJamJ929Y-&format=jpg"> 
       <img src="images/ac/8.jpg"> 
      </a> 
     </div> 
    </div> 
    <script src="scripts/main.js"></script> 
    <script type="text/javascript"> 
     function step(delta, element) { 
      console.log("step() called"); 
      var from = [0, 0, 0], 
       to = [180, 120, 120]; 
      element.style.backgroundColor = 'rgb(' + 
       parseInt(from[0] + delta * (to[0] - from[0])) + ',' + 
       parseInt(from[1] + delta * (to[1] - from[1])) + ',' + 
       parseInt(from[2] + delta * (to[2] - from[2])) + ')'; 
     } 

     function smooth(event) { 
      console.log("smooth() called"); 
      var duration = 200; 
      var start = new Date(); 
      var id = setInterval(change, 1); 

      function change() { 
       var timePassed = new Date() - start; 
       var progress = timePassed/duration; 
       if (progress > 1) progress = 1; 
       var delta = progress; 
       step(delta, event.target); 
       if (progress == 1) clearInterval(id); 
      } 
     } 

     var tabAnchorTags = document.getElementsByClassName("tab"); 

     for (var i = 0; i < tabAnchorTags.length; i++) { 
      tabAnchorTags[i].addEventListener("mouseover", smooth, false); 
     } 
    </script> 
</body> 

</html>

出典

2016-05-14 07:40:51 kkaosninja

はここで何が起こったのかを説明することができます - for（var i = 0; i

@DhruvChadha tabAnchorTagsは、クラス "tab"を持つHTML要素の配列です。だから私は配列を介して、それぞれの "mouseover"イベントリスナーを設定します。それはかなりです。あなたのHTMLコードで '' onmouseover = smooth（） '' 'を設定するのと同じです。 – kkaosninja

あなたは<a>リンクでclass="tab"を使用しようとしています。次にこの行を変更してくださいvar elem = document.getElementById("tab");をvar elem = document.getElementByClassName("tab");

出典

2016-05-14 06:58:19 Steve

は試してみましたが、うまくいきませんでした。リンクでsmooth（）が呼び出されても、そのリンクのみで実行する必要があります......多くのナビゲーションパネルのように、 –

あなたの円滑な機能が到達することはできません。目的に合わせてJQUERYを使用してください。

各リンクに1つのクラス名を割り当ててから、onmouseover（）イベントを使用する代わりにその関数を呼び出すためのjqueryコードを書くことができます。あなたはクラス名として「タブ」を使用している場合、あなたのコードは、「これは」あなたの要素となり、したがって、あなたが実際のRGBAを変更する最後の関数までにそれを渡しておく。..

ここ

$(document).ready(function(){ 
    $(".tab").hover(function(){ 
     smooth(this); 
    }); 
});

のようなものでなければなりません要素。

また、変数をスコープの外に宣言することもできます。これにより、これらの変数は到達不能になるため、未定義になりません。それであなたの問題を解決する方法です。

出典

2016-05-14 10:20:14

複数のリンクへのJavascriptアニメーション？

答えて

関連する問題