0

私はJavaScriptで書かれたシンプルなSMSインターフェースを持っていて、通話ボタンをクリックするたびに、通話バーが表示されます（停止しないプログレスバーやステータスバーのようなもの）。私はまだ初心者なので、まだコードがありません..助けてください

ここにリンクがありますhttp://jsfiddle.net/XBppR/22/

function openPage()
{
if(some conditon)
opener.document.location = "http://www.google.com";
}
else{
// nothing, this else not required
}
}

このコードは機能していません..気にしないでください..投稿目的のみ..

4

1 に答える 1

2

警告:次の回答には jQuery が含まれています

したがって、スタイルを設定するための前景画像の 2 つの画像を作成する必要があります よく見えませんが、そこにドットがあります。ハイライトして確認してください (よく見えません。黒の背景に置きます)。

アニメーション効果を作成するための背景画像:

背景画像

次に、FG を BG に重ねる必要があります。

HTML:

<div class="callbar">
    <div class="callbarbg" style="width: 200px;"></div>
    <div class="callbarfg"></div> <!-- later elements have higher z-index -->
</div>

CSS:

.callbarbg {
    height: 20px;
    background-repeat: repeat-x;
    background-image: url("http://s9.postimage.org/4oij09p7j/sliding_Progress_Bar_BG.png");
    background-position:right top;
}
.callbarfg {
    position:relative;
    top:-20px;
    width: 200px;
    height: 20px;
    background-image: url("http://s9.postimage.org/bg8y34e73/sliding_Progress_Bar_FG.png");
}
.callbar {
    overflow:hidden;
    width:200px;
    height:20px;
}

最後に、各ドットでフェード イン/アウト アニメーションを作成するには、背景画像を移動する必要があります。

JS:

window.setInterval(function(){ 
    var obj = $("parent of .callbar").find(".callbarbg"); 
    if(!obj.data("width"))
        obj.data("width", 200);
    var w = obj.data("width") + 3;
    obj.data("width", w).css("width", w);
    var h = w%200;
    if(h == 0 || h == 1 || h == 2){
        obj.data("width", 200);
    }
}, 33);

未加工の API を使用した jQuery jsFiddle の動作: http://jsfiddle.net/pitaj/K25U8/6/

編集：

jQuery フリーの jsfiddle が登場しました!

未加工の API を使用した jQuery を使用しない jsFiddle の動作: http://jsfiddle.net/pitaj/GpGE2/

于 2013-01-13T06:39:03.343 に答える