javascript - 如何在 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

所以你需要做的是制作两张图片，一张前景图片来设置样式: (看不太清楚，放在黑色背景上)

以及用于创建动画效果的背景图像:

接下来，您必须将 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/