gpt4 book ai didi

javascript - jquery 中的进度条显示反向动画

转载 作者:太空宇宙 更新时间:2023-11-04 12:57:06 26 4
gpt4 key购买 nike

我想要一个进度条。我下载了一个,但它显示反向动画。我已经尝试弄清楚了,但似乎没有任何效果知道如何解决它吗???

这是我的html

<!doctype html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="progressbar.js"></script>

<link rel="stylesheet" type="text/css" href="progressbar.css">
<link rel="stylesheet" type="text/css" href="skins/default/progressbar.css">

</head>
<body>


<div id="progressBar" class="default"><div></div></div>


<script>
progressBar(40, $('#progressBar'));
</script>

</body>
</html>

这是我的CSS

.default {
background: #292929;
border: 1px solid #111;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 0 5px #333;
}
.default div {
background-color: #1a82f7;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0099FF), to(#1a82f7));
background: -webkit-linear-gradient(top, #0099FF, #1a82f7);
background: -moz-linear-gradient(top, #0099FF, #1a82f7);
background: -ms-linear-gradient(top, #0099FF, #1a82f7);
background: -o-linear-gradient(top, #0099FF, #1a82f7);
}

最后是javascript文件

function progressBar(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "%&nbsp;");
}

修改后的CSS

.default {
background: #292929;
border: 1px solid #111;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 0 5px #333;
}
.default div {
width: 0;
background-color: #1a82f7;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0099FF), to(#1a82f7));
background: -webkit-linear-gradient(top, #0099FF, #1a82f7);
background: -moz-linear-gradient(top, #0099FF, #1a82f7);
background: -ms-linear-gradient(top, #0099FF, #1a82f7);
background: -o-linear-gradient(top, #0099FF, #1a82f7);
}

最佳答案

你的内部 div 宽度需要从 0 开始,否则它的宽度将默认为 100%:

.default div {
width: 0; /* <--- here */
background-color: #1a82f7;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0099FF), to(#1a82f7));
background: -webkit-linear-gradient(top, #0099FF, #1a82f7);
background: -moz-linear-gradient(top, #0099FF, #1a82f7);
background: -ms-linear-gradient(top, #0099FF, #1a82f7);
background: -o-linear-gradient(top, #0099FF, #1a82f7);
}

http://jsfiddle.net/pjg99q7s/

稍微花哨的例子:

http://jsfiddle.net/pjg99q7s/2/

关于javascript - jquery 中的进度条显示反向动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25738826/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com