0

我有一个用 javascript 编写的简单短信界面，每次单击通话按钮时，都会出现一个通话栏（类似于永不停止的进度栏或状态栏）。我仍然没有代码，因为我仍然是初学者..请帮助

我这里有一个链接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

所以你要做的是制作两张图，一张前景图来设置样式：（ 看不太清楚，但是有点，高亮看看 看不太清楚，放在黑色背景上）

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

背景图片

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