关键词:
【中文标题】CSS / jQuery:动态更新的文本出现在右侧而不是圆形进度条内【英文标题】:CSS / jQuery: Dynamically updated text appears right of instead of inside circular progress bar 【发布时间】:2020-11-01 08:13:30 【问题描述】:我正在尝试实现一个带有动画的圆形进度条,并从以下资源中发现了该插件。
我下载并包含了该插件,并使用了演示页面中的源代码(HTML 和 JS),它可以正常工作。 但是,我的问题是 动画文本,即通过 JS 生成的值(从 0 到设定百分比)直接出现在圆圈/图表中,而不是在它们内部(就像在演示中一样)。
我假设我在这里遗漏了一些 CSS,但我不确定需要添加什么来移动圆圈/图表内的值。源代码中的 CSS 有注释说这里不需要。 有人可以帮我吗?
参考资料:
https://www.jqueryscript.net/other/Animated-Circular-Progress-Bar-with-jQuery-Canvas-Circle-Progress.html https://www.jqueryscript.net/demo/Animated-Circular-Progress-Bar-with-jQuery-Canvas-Circle-Progress/HTML:
<h1 style="margin-top:150px;">jQuery Circle Progress Demos</h1>
<div class="circles">
<div class="first_circle">
<span>no <br/> animation</span>
</div>
<div class="second_circle">
<strong>0</strong> <!-- This should appear inside the circle when being updated via JS -->
<span>animation <br/> progress</span>
</div>
<div class="third_circle">
<strong>0</strong> <!-- This should appear inside the circle when being updated via JS -->
<span>value <br/> progress</span>
</div>
<div class="forth_circle">
<span>solid fill, <br/> custom angle</span>
</div>
<div class="fifth_circle">
<span>image fill, <br/> custom sizes</span>
</div>
</div>
JS:
$(document).ready(function()
$('.first_circle').circleProgress(
value: 0.35,
animation: false,
fill: gradient: ['#ff1e41', '#ff5f43']
);
$('.second_circle').circleProgress(
value: 0.6
).on('circle-animation-progress', function(event, progress)
$(this).find('strong').html(parseInt(100 * progress) + '<i>%</i>');
);
$('.third_circle').circleProgress(
value: 0.8,
fill: gradient: ['#0681c4', '#07c6c1']
).on('circle-animation-progress', function(event, progress, stepValue)
$(this).find('strong').text(String(stepValue.toFixed(2)).substr(1));
);
$('.forth_circle').circleProgress(
startAngle: -Math.PI / 4 * 3,
value: .5,
fill: color: '#ffa500'
);
$('.fifth_circle').circleProgress(
value: 1,
size: 60,
thickness: 20,
fill:
color: 'lime'
);
);
非常感谢, 汤姆
【问题讨论】:
【参考方案1】:两个问题。首先,您缺少一些 CSS 以使演示工作。该演示链接到一个 page-styles.css
文件,其中包含一些用于圆圈的 CSS。这带来了第二个问题。即使您只是粘贴 CSS,它也不会“按原样”工作,因为 circle
需要是它自己的类。在您的标记和代码中,您通过在first
和circle
之间添加下划线来组合两个类:
<div class="first_circle">
代替:
<div class="first circle">
因此,为了您的工作方式,您要么需要修改 CSS,要么只需分离类。
这是一个添加了适当 CSS 的示例(我只是从 page-styles.css
文件中复制了相关的 CSS,而不是全部内容):
$(document).ready(function()
$('.first.circle').circleProgress(
value: 0.35,
animation: false,
fill:
gradient: ['#ff1e41', '#ff5f43']
);
$('.second.circle').circleProgress(
value: 0.6
).on('circle-animation-progress', function(event, progress)
$(this).find('strong').html(parseInt(100 * progress) + '<i>%</i>');
);
$('.third.circle').circleProgress(
value: 0.8,
fill:
gradient: ['#0681c4', '#07c6c1']
).on('circle-animation-progress', function(event, progress, stepValue)
$(this).find('strong').text(String(stepValue.toFixed(2)).substr(1));
);
$('.forth.circle').circleProgress(
startAngle: -Math.PI / 4 * 3,
value: .5,
fill:
color: '#ffa500'
);
$('.fifth.circle').circleProgress(
value: 1,
size: 60,
thickness: 20,
fill:
color: 'lime'
);
);
.circle
width: 100px;
margin: 6px 6px 20px;
display: inline-block;
position: relative;
text-align: center;
line-height: 1.2;
.circle canvas
vertical-align: top;
.circle strong
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 30px;
.circle strong i
font-style: normal;
font-size: 0.6em;
font-weight: normal;
.circle span
display: block;
color: #aaa;
margin-top: 12px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Animated-Circular-Progress-Bar-with-jQuery-Canvas-Circle-Progress/dist/circle-progress.js"></script>
<div class="circles">
<div class="first circle">
<span>no <br/> animation</span>
</div>
<div class="second circle">
<strong></strong>
<span>animation <br/> progress</span>
</div>
<div class="third circle">
<strong></strong>
<span>value <br/> progress</span>
</div>
<div class="forth circle">
<span>solid fill, <br/> custom angle</span>
</div>
<div class="fifth circle">
<span>image fill, <br/> custom sizes</span>
</div>
</div>
【讨论】:
我选择了这个解决方案,因为这正是我遇到的问题,并且它以这种方式完美运行。【参考方案2】:/* Examples */
(function($)
/*
* Example 1:
*
* - no animation
* - custom gradient
*
* By the way - you may specify more than 2 colors for the gradient
*/
$('.first.circle').circleProgress(
value: 0.35,
animation: false,
fill: gradient: ['#ff1e41', '#ff5f43']
);
/*
* Example 2:
*
* - default gradient
* - listening to `circle-animation-progress` event and display the animation progress: from 0 to 100%
*/
$('.second.circle').circleProgress(
value: 0.6
).on('circle-animation-progress', function(event, progress)
$(this).find('strong').html(Math.round(100 * progress) + '<i>%</i>');
);
/*
* Example 3:
*
* - very custom gradient
* - listening to `circle-animation-progress` event and display the dynamic change of the value: from 0 to 0.8
*/
$('.third.circle').circleProgress(
value: 0.75,
fill: gradient: [['#0681c4', .5], ['#4ac5f8', .5]], gradientAngle: Math.PI / 4
).on('circle-animation-progress', function(event, progress, stepValue)
$(this).find('strong').text(stepValue.toFixed(2).substr(1));
);
/*
* Example 4:
*
* - solid color fill
* - custom start angle
* - custom line cap
* - dynamic value set
*/
var c4 = $('.forth.circle');
c4.circleProgress(
startAngle: -Math.PI / 4 * 3,
value: 0.5,
lineCap: 'round',
fill: color: '#ffa500'
);
// Let's emulate dynamic value update
setTimeout(function() c4.circleProgress('value', 0.7); , 1000);
setTimeout(function() c4.circleProgress('value', 1.0); , 1100);
setTimeout(function() c4.circleProgress('value', 0.5); , 2100);
/*
* Example 5:
*
* - image fill; image should be squared; it will be stretched to SxS size, where S - size of the widget
* - fallback color fill (when image is not loaded)
* - custom widget size (default is 100px)
* - custom circle thickness (default is 1/14 of the size)
* - reverse drawing mode
* - custom animation start value
* - usage of "data-" attributes
*/
$('.fifth.circle').circleProgress(
value: 0.7
// all other config options were taken from "data-" attributes
// options passed in config object have higher priority than "data-" attributes
// "data-" attributes are taken into account only on init (not on update/redraw)
// "data-fill" (and other object options) should be in valid JSON format
);
)(jQuery);
body
background-color: #444;
padding-top: 40px;
font: 15px/1.3 Arial, sans-serif;
color: #fff;
text-align: center;
a
color: orange;
.new-tab-link
padding-right: 14px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3ggXDSIzCeRHfQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAA9SURBVBjTY2RAA/+XMvxHF2NkwAOwacCq4P9Shv8suFQzRiNsYUEXwKoJ2VhkNrIaJgYiAAs2N2BVRMirAD6JHi10MCdVAAAAAElFTkSuQmCC) no-repeat right center;
.page-title
font: 400 40px/1.5 Open Sans, sans-serif;
text-align: center;
.circles
margin-bottom: -10px;
.circle
width: 100px;
margin: 6px 6px 20px;
display: inline-block;
position: relative;
text-align: center;
line-height: 1.2;
.circle canvas
vertical-align: top;
.circle strong
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 30px;
.circle strong i
font-style: normal;
font-size: 0.6em;
font-weight: normal;
.circle span
display: block;
color: #aaa;
margin-top: 12px;
p
margin: 40px 0;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.2/dist/circle-progress.js"></script>
<div class="circles">
<div class="first circle">
<span>no <br> animation</span>
</div>
<div class="second circle">
<strong></strong>
<span>animation <br> progress</span>
</div>
<div class="third circle">
<strong></strong>
<span>value <br> progress</span>
</div>
<div class="forth circle">
<span>custom angle, <br> value update</span>
</div>
<div
class="fifth circle"
data-value="0.9"
data-size="60"
data-thickness="20"
data-animation-start-value="1.0"
data-fill="
"color": "rgba(0, 0, 0, .3)",
"image": "http://i.imgur.com/pT0i89v.png"
"
data-reverse="true"
>
<span>image fill, <br> custom sizes</span>
</div>
</div>
我只是从演示中将它放在一起,我认为你错过了一些东西或删除了一些东西,因为它抛出了错误。
【讨论】:
非常感谢,这太棒了!动态更新 Extjs autoEl :'button' 文本和 css
】动态更新ExtjsautoEl:\\\'button\\\'文本和css【英文标题】:UpdateExtjsautoEl:\'button\'textandcssdynamically动态更新ExtjsautoEl:\'button\'文本和css【发布时间】:2014-12-1007:37:55【问题描述】:我是ExtJS的新手,想要动态更改按钮的文本:我的要求... 查看详情
如何使文本出现在 mui AppBar/Toolbar 组件的右侧?
】如何使文本出现在muiAppBar/Toolbar组件的右侧?【英文标题】:HowtomaketextgoonrightsideofmuiAppBar/Toolbarcomponent?【发布时间】:2021-12-1001:23:01【问题描述】:如何使以下菜单栏相同但右侧有logout按钮?代码:<main><AppBar><Toolba... 查看详情
css图像在文本字段的右侧部分(代码片段)
如何修复这些约束,使文本出现在 UITableViewCell 中图像的右侧?
】如何修复这些约束,使文本出现在UITableViewCell中图像的右侧?【英文标题】:HowcanIfixtheseconstraintssothetextappearstotherightoftheimageinmyUITableViewCell?【发布时间】:2020-03-2601:19:15【问题描述】:我的UITableViewCells约束存在问题,我似乎... 查看详情
Jquery动态表数据在底部和右侧附加json
】Jquery动态表数据在底部和右侧附加json【英文标题】:Jquerydynamictabledataappendbottomandrightwithjson【发布时间】:2017-11-1923:32:53【问题描述】:我对这个练习感到困扰,我有json数据例如1,5,6,0,2,3,4,5,8,9,7,1我正在尝试做一个“动态表格... 查看详情
angular2.0+动态绑定html文本
Angular2项目网站需要一个容器页面,可以展示用户自定义开发的html文本(包含css,js,html等)如下图,编辑好css,js及html后,在右侧可以实时查看展示效果,并且可以执行按钮事件。思路: 定义一个通用组件容器接受js,... 查看详情
jquery+css实现下拉列表(更新)
一、概述 和select下拉列表相比,jquery+css实现的下拉列表具有更好的灵活性,第二部分的代码为下拉列表的实现。二、代码下拉列表效果如下:下拉列表的选项为动态追加,使用on方法,采用事件委派机制,响应选项的单击事... 查看详情
在按钮标题上滑动文本,如带有 css 和 javascript 的选框(不是 jQuery)
】在按钮标题上滑动文本,如带有css和javascript的选框(不是jQuery)【英文标题】:Slidingtextonbuttoncaptionlikemarqueewithcssandjavascript(NotjQuery)【发布时间】:2016-11-1707:09:35【问题描述】:我有多个带有动态文本的按钮。我希望使用javasc... 查看详情
文本框中的透明文本(css、js、jquery)
】文本框中的透明文本(css、js、jquery)【英文标题】:transparenttextintextbox(css,js,jquery)【发布时间】:2014-02-0319:19:32【问题描述】:我需要实现以下文本框样式:-字体颜色应为#555555,但需要在50%不透明度时变灰。-背景颜色应为#... 查看详情
如何在 JQuery 中显示动态更新的数据
】如何在JQuery中显示动态更新的数据【英文标题】:HowtodisplaydynamicallyupdateddatainJQuery【发布时间】:2016-12-2023:03:33【问题描述】:我正在尝试显示数据库中有多少行。这应该是动态更新的,所以当行数改变时,显示的数字也会更... 查看详情
在选择时,动态填充 textarea — jQuery
】在选择时,动态填充textarea—jQuery【英文标题】:Onselect,dynamicallypopulatetextarea—jQuery【发布时间】:2012-11-2111:10:50【问题描述】:我正在使用WordPress的GravityForms插件,我正在尝试让其中一个选择菜单动态更新textarea中的文本。... 查看详情
用文本和照片交换列(html、css 和 php)
】用文本和照片交换列(html、css和php)【英文标题】:Swapcolumnswithtextandphotos(html,cssandphp)【发布时间】:2022-01-1318:01:21【问题描述】:我正在制作一个网站,显示照片网格,并在照片的左侧或右侧添加一些描述。我希望每次出现... 查看详情
如何使用 GitHub markdown 在图像右侧写入文本
】如何使用GitHubmarkdown在图像右侧写入文本【英文标题】:HowtowritetextonrightofanimageusingGitHubmarkdown【发布时间】:2022-01-1804:09:48【问题描述】:我想在GitHub.md文件中的图像右侧写入文本。我的意思是图像应该显示在文本的左侧(文... 查看详情
解决bootstrap在手机端滑动右侧出现空白的一个方法
...试。完成后,到手机测试时傻了,左右滑动页面时,竟然出现了一个空白的竖条(如下图所示)。判断是margin-right设置的长度所致,检查css,并没有相关代码。看来问题出现在了boots 查看详情
使用 CSS 的文本的宽度转换不起作用
】使用CSS的文本的宽度转换不起作用【英文标题】:WidthtransitionoftextwithCSSnotworking【发布时间】:2016-12-0623:40:34【问题描述】:我有一个div,我想在其中显示一个人的姓名。我只想在正常状态下显示此人的名字。悬停时,姓氏应... 查看详情
jQuery获取特定的选项标签文本并将动态变量放置在值中
】jQuery获取特定的选项标签文本并将动态变量放置在值中【英文标题】:jQuerygetspecificoptiontagtextandplacingdynamicvariabletothevalue【发布时间】:2012-08-2113:51:55【问题描述】:$(\'#NameDropdown\').change(function()$.ajax(type:"POST",dataType:"json",url:"h... 查看详情
文本视图的高度在滚动视图中是动态的
】文本视图的高度在滚动视图中是动态的【英文标题】:heightofthetextviewtobedynamicinsideascrollview【发布时间】:2013-06-1107:29:16【问题描述】:我在滚动视图中有一个文本视图,我想让文本视图的高度作为其内容是动态的,因为我不... 查看详情
如何使文本出现在html中的滚动条上
】如何使文本出现在html中的滚动条上【英文标题】:Howtomaketextappearonscrollinhtml【发布时间】:2013-12-1622:28:58【问题描述】:您好,我希望在滚动过去或滚动到文本所在位置时显示某个文本。出现时的效果应该有点像网站顶部的... 查看详情