0

div コントロール内にラベルがあります。それを div コントロールの上部中央に配置し、そのテキストの周りに四角形を描画します。また、そのラベルのテキストの文字を左から右に 1 つずつ表示したいと考えています。

どうすればこれを達成できますか?

4

3 に答える 3

0 
<style>

#control {
    width:200px;
    height:200px;
    background:#ddd;
    text-align: center
}
#label {
    border:1px solid red;
}
</style>

<div id='control'>
    <span id='label'></span>
</div>

<script>
var label = document.getElementById("label");
var msg = "Message";
var i = 0;
var interval = setInterval( function() {
    label.innerHTML = msg.substr(0,i);
    i++;
    if ( i == msg.length ) {
        clearInterval(interval);
    }
}, 1000)
</script>
于 2012-08-03T07:33:09.313 に答える
0

テキストを水平方向のdivの中央に配置するには、次のようにスタイルを設定するだけです

div#ctrl {
     text-align: center
}

テキストの周りに長方形を作成するには、おそらくパディングとマージンを使用して境界線を定義する必要があります。

div#ctrl span {
    border: 1px #333 solid;
    padding: 5px;
}

テキストをアニメーション化するには JavaScript を使用する必要があり、jQuery を使用すると簡単になります。ここに、あなたが探していたものをホイップした実際の例へのリンクがあります:

http://jsfiddle.net/5QdPh/

将来的には、もう少し調査を行い、これまで答えられていない特定の問題について質問してみてください。これらはすべて基本的なもので、十分に文書化されています。

于 2012-08-03T07:23:11.937 に答える
0

最初の部分は次のとおりです。

http://fiddle.jshell.net/VdmFV/

2番目の部分では、最初に自分で試してから、ここに戻ってポインターを取得する必要がある、派手なjavascript / jQueryが必要です。

于 2012-08-03T07:24:17.403 に答える