代码之家 › 专栏 › 技术社区 › Jon

不使用图像显示进度

user-interface css html jquery

Jon · 技术社区 · 15 年前

我想设计一个进度条,不使用图像(如动画gif…)。尝试在这里发挥创意:)

更新: 进度百分比无法确定,因此它必须是一个循环

6 回复 | 直到 14 年前

Dan McGrath 15 年前

一个自己动手的方法:只需选择一个单倍行距的字体,然后编写一个函数来更新要显示的字符串。

--------------------------------

有一个存储偏移起始值的变量

在调用所述函数时,使用offset作为起始标记,将位置替换为“gt;”字符,然后将偏移量增加1。(别忘了对它进行模块化)

>>>>---->>>>---->>>>---->>>>----
->>>>---->>>>---->>>>---->>>>---
-->>>>---->>>>---->>>>---->>>>--
--->>>>---->>>>---->>>>---->>>>-
---->>>>---->>>>---->>>>---->>>>
>---->>>>---->>>>---->>>>---->>>
>>---->>>>---->>>>---->>>>---->>
>>>---->>>>---->>>>---->>>>---->

|>>>>---->>>>---->>>>---->>>>----|
|->>>>---->>>>---->>>>---->>>>---|
|-->>>>---->>>>---->>>>---->>>>--|
|--->>>>---->>>>---->>>>---->>>>-|
|---->>>>---->>>>---->>>>---->>>>|
|>---->>>>---->>>>---->>>>---->>>|
|>>---->>>>---->>>>---->>>>---->>|
|>>>---->>>>---->>>>---->>>>---->|

smercer 15 年前

http://docs.jquery.com/UI/Progressbar

attack 15 年前

沙米尔是这么说的,但是关于一切:

<html>
<head>
    <style type="text/css">
        #progress-bar-wrapper
        {
            border: 1px solid #000;
            width: 500px;
            height: 30px;
        }

        #progress-bar
        {
            background-color: #F00;
            width: 100%;
            height: 100%;
        }
    </style>

    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(function() { animateProgressBar() });

        function animateProgressBar()
        {
            $("#progress-bar")
            .css("width", "0%")
            .animate(
            {
                width: "100%"
            },
            1500, //Speed of loading bar
            animateProgressBar);
        }
    </script>
</head>
<body>
    <div id="progress-bar-wrapper">
        <div id="progress-bar"></div>
    </div>
</body>
</html>

Angel.King.47 15 年前

例如,如果您有一个div标记宽度:0px和使用jQuery扩展div标记的大小作为百分比

<div style='width:200px'>
    <div style='width:50%'></div>
</div>

抱歉在jQuery端帮不了你。。我以前用PHP做过类似的事情

MusiGenesis 15 年前

动画GIF怎么了?因为你不能估计进度百分比,所以使用进度条是没有意义的。你可以让一只小猪在自己周围筑起一堵砖墙,然后一只小狼把它吹倒,然后永远循环。这样做的另一个好处是能吸引普通人对自己工作的感觉。

fauxCoder 15 年前

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前