gpt4 book ai didi

jquery - 如何垂直翻转进度条?

转载 作者:行者123 更新时间:2023-11-28 12:52:07 25 4
gpt4 key购买 nike

我目前正在做一个元素,该元素应该在屏幕左侧有一个垂直进度条,用于显示用户进度。

我正在使用这样的 HTML 进度元素 <progress id="progressbar" value="0" max="100"></progress>

CSS

progress[value] {
/* Reset the default appearance */
-webkit-appearance: none;
appearance: none;

width: 100%;
height: 20px;
position:fixed;
z-index:10;

}

我的 jQuery 看起来像这样

  <script type="text/javascript">
$(window).scroll(function () {
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();
scrollPercent = (s / (d-c)) * 100;
var position = scrollPercent;

$("#progressbar").attr('value', position);

});
</script>

是否可以翻转进度条并使其从上向下移动?

最佳答案

您可以尝试使用 CSS 转换属性,这里有一个演示: http://jsfiddle.net/sandro_paganotti/LxaJ9/

progress{
-webkit-transform-origin: 0 100%;
-webkit-transform: rotate(90deg);
-moz-transform-origin: 0 100%;
-moz-transform: rotate(90deg);
-ms-transform-origin: 0 100%;
-ms-transform: rotate(90deg);
transform-origin: 0 100%;
transform: rotate(90deg);
}

关于jquery - 如何垂直翻转进度条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23537571/

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