如何在javascript中创建一个调用栏？

Question

我有一个用javascript编写的简单的短信界面，每次我点击一个呼叫按钮，就会有一个呼叫栏（就像一个永不停止的进度条或状态栏）。我仍然没有代码，因为我仍然是一个初学者...请帮助

我这里有一个链接http://jsfiddle.net/XBppR/22/

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

此代码无效。请不要介意此...仅限发布目的..

Answer 1

警告：以下答案包含jQuery

所以你需要做的是制作两个图像，一个前景图像来设置样式： （看不太清楚，把它放在黑色背景上）

创建动画效果的背景图片：

接下来，您必须在BG上叠加FG。

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-free jsfiddle now up！

使用原始API工作jQuery-free jsFiddle：http://jsfiddle.net/pitaj/GpGE2/