0

私はデザイナーですが、プログラミング (javascript、html、css) も行っています。Web サイトのカスタム タイムラインを作成する必要があります (評判が不十分なため写真を投稿できませんでしたが、デザインへのリンクは次のとおりです : http://postimg.org/image/5p92wkk8f/タイムラインの一部であり、それに従って年が変わります) しかし、どこから始めればよいかわかりません。（インターネットで調べてみましたが、タイムラインのコード例がなく、他のウェブサイトからタイムラインを生成したくありません。このデザインとまったく同じカスタムのものを作りたいです）。誰かが私にヒントを与えたり、役に立つことを言ったり、どこから始めればよいか教えてくれませんか? ありがとう！

4

2 に答える 2

0

タイムラインの各部分 (この場合は年) に 1 つずつ、多くの分割を行います。したがって、一緒に白い線全体を作る約 20 の div があります。

CSS は次のようになります。

.timeline { /*"timeline" is a class name that I made up.*/
    background-color:#ffffff; /* This is white color, change it to the cream color of the timeline.*/
    height: 30px; /*estimation*/
    width: 30px; /*estimation*/
    position:absolute;
}


.timeline:hover {
    background-color:#000000; /* This is black color, change it to the brownish background color.*/
}

これは CSS のほんの一部です。各部門を余白で配置する必要があります。CSS コードが完成したら、ホバーした div ごとにタイムラインの色を変更します。

難しい部分は、実際にテキストを変更することであり、そのために JavaScript を使用します。コードが長くなりすぎないように (そして書きやすくするために)、タイムラインに 2 つの区分しかないかのように記述します。私がやっていることを理解したら、あなたは簡単に終わらせることができるでしょう。

したがって、まず、テキストが「テキスト」である区分に id を追加します。たとえば、html では、2 つのタイムライン区分にイベント onmouseover を追加し、次に関数を追加します。関数には番号が付けられています。

<div id="text">Here is some text</div>
<div class="timeline" onmouseover="changeText1()"></div>
<div class="timeline" onmouseover="changeText2()"></div>

次に、関数を記述する必要があります。「テキスト」ID 全体を含む変数を作成し、次に 2 つの関数 (各 div に 1 つ) を作成し、各関数が関数の番号に従ってテキストを変更するようにします。

var text_div=document.getElementById("text");
function changeText1()
{
    text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the FIRST part of the timeline.
}
function changeText2()
{
    text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the SECOND part of the timeline.
}

それではレビューしましょう。CSS は、カーソルを合わせると分割の色を変更します。さらに、タイムラインの区分にカーソルを合わせると、カーソルが置かれた区分に応じてテキストを変更する JavaScript コードから関数がトリガーされます。

注意すべきもう 1 つの点: 追加した画像には、段落が 1 つだけではなく、段落ごとに異なる CSS コードがあります。私が書いたJavaScriptコードは、「テキスト」部門全体を変更し、JavaScriptで入力したテキスト全体（「一部のテキスト」部分）に影響を与えるCSSになります。CSS を変更したままにしたい場合は、次のことを行う必要があります。

  1. 各段落に独自の ID を作成します (html で)。

  2. 次に、各 ID に対して JavaScript で新しい変数を作成します。

  3. 次に、各関数に新しい行を追加します。これにより、新しい段落の内部 HTML が個別に変更されます。

不明な点がありましたら、お尋ねください。

于 2013-09-08T14:00:26.043 に答える