程序员经验分享-hwhale

进度条摆动效果

2024-04-27

摆动垂直进度条

我学会了如何构建一个整洁的、动态大小的垂直进度条，其中带有横栏这个问题 https://stackoverflow.com/questions/22337851/css-vertical-progress-bar?noredirect=1#comment33950248_22337851.

现在，我想让它变得有趣！

杆的摆动功能应该：

  • 取4个参数：element , height , speed, &random
  • 摇晃element具有可定制的随机因子的高度百分比
  • 跟踪元素的真实高度，该高度可能随时发生变化！
  • 使用事件（在小提琴中，我提供输入和按钮）将真实高度设置为新值，并以动画方式设置为该高度。

我正在寻找最简单的答案。请解释一下你是如何做到的，以便我们JS新手学习技巧！向最佳答案发布 +50 的赏金。

Bonus:

  • 根据条形的真实高度更改条形的背景颜色值。红色为0%，黄色为50%，绿色为100%；

如果您的函数也这样做，我将在您的答案中添加 +100 赏金。

模板小提琴 http://jsfiddle.net/q2SAK/5/

我的进步 http://jsfiddle.net/q2SAK/5/

我问这个问题是因为我还不知道该怎么做。 但是，我将根据迄今为止所学到的知识进行尝试，并保持我的 此处发布了进度。


所以这是我的JSFiddle http://jsfiddle.net/q2SAK/8/接受它。

注释应该是不言自明的。我必须添加 JQuery UI 以实现缓动动画效果。我不确定你的意思random，但速度应该是您需要改变的全部。

WobbleBar Sorry, no animation in the screenshots.

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

ProgressBar

进度条摆动效果 的相关文章

  • 在选择选项标签中循环 Ajax 响应

    我必须选择多个测试和日期 当根据测试单击提交时 实验室名称将加载到选择选项中 阿贾克斯脚本 name submits click function e e preventDefault var array select selected e

  • 未捕获的类型错误：属性...不是函数 - 页面加载后

    我正在使用对外部 API 的跨域 Ajax 请求 有时它会失败 并显示控制台消息 Uncaught TypeError Property photos of object object DOMWindow is not a function

  • 如何使用canvas获取html5中的视频截图

    您好 是否可以使用 html 5 canvas 捕获正在播放的视频的屏幕截图 看起来这里是可能的 http html5doctor com video canvas magic http html5doctor com video canv

  • Chrome 扩展 |有什么方法可以让 chrome.storage.local.get() 返回一些东西吗？

    在我的 chrome 扩展中 我需要使用 chrome 存储 在我的后台脚本中 我首先创建一个对象并将其添加到 chrome 存储中 然后我想从那里获取我的对象并返回 像这样的东西 var obj chrome storage local

  • 无法导入@material-ui/core/styles/MuiThemeProvider

    我正在开发一个 React 项目 使用 Material UI React 组件 我想进口MuiThemeProvider in src index js像这样import MuiThemeProvider from material ui

  • 类型错误：无法读取未定义的属性“存在”

    我正在尝试为 jsx 文件编写一个测试用例 在此我能够传递 proptypes 但不是我正确传递 proptypes 的地方 当我运行测试用例时出现错误 下面提供我的错误 测试用例和代码 类型错误 无法读取未定义的属性 存在 不知道如何让它

  • 在 php 中进行 AES 加密，然后用 Javascript (cryptojs) 解密

    我正在寻找一种对简单文本 5 到 6 个数字和 或字符 进行双向加密的方法 问题是我想在 php 中进行加密 然后通过 Javascript 解密 对于 php 我已经使用 mcrypt encode 进行了测试并使其正常工作 因此当我尝试

  • jquery javascript 在 codeigniter 中不起作用

    大家好 感恩节快乐 我在将此脚本包含在 codeigniter 中时遇到一些问题

  • 如何在 React JS 组件中预加载图像？

    我目前正在渲染一个子组件signInError发生 这signInError存储在父组件中 如果不为 null 则渲染

  • JQuery：检查元素是否处于正常流程中

    使用 jQuery 检查元素是否在正常流程中的最优雅的方法是什么 根据CSS3规范 http www w3 org TR css3 box 如果满足以下条件 则框属于流 其 display 的使用值为 block list item tab

  • 通过 JavaScript 获取页面/iframe 的编码

    我想通过 JavaScript 或浏览器中的其他一些 API 以编程方式确定页面的编码 我想要这些信息的原因是因为我试图对主要浏览器支持的字符编码进行模糊测试 显然仅仅因为我发送了适当的 内容类型 并不意味着浏览器会使用编码做正确的事情 欢

  • 从 json 创建下拉列表

    我有一个这种形式的 json COLUMNS ID Name DATA 1 Joe 2 Sam 3 Doug 我正在寻找一个如何在 javascript 中从该数据创建下拉列表的示例 但 json dropdown 列表的所有示例 json

  • Bootstrap 折叠 - 转到打开项目的顶部？

    我正在使用引导折叠功能 但是当我打开一个包含大量内容的元素 然后打开下一个元素时 它会向下跳转并且不会转到打开元素的顶部 我尝试过使用scrollto插件 如下所示 但它不起作用 JS function a accordion toggle

  • 解决多个 jQuery 文件之间的冲突

    我的项目中有多个 jquery 文件 我正在使用jquery1 4 2使用facebox 但我也需要原型和scriptacolous脚本 我用过 jQuery noconflict 在我的代码中 但它不起作用 这是网址http mlep c

  • Nodejs Base64 中的读取文件

    我正在尝试从客户端读取以 base64 编码的图像 如何使用nodejs进行阅读 My code add to buffer base64 image var encondedImage new Buffer image name base

  • datatables.search 函数修改后的奇怪行为

    这个问题是后续问题这个问题 https stackoverflow com questions 54671211 overriding datatables js search behavior 我已经创建了这个 JSFiddle http

  • 来自 geoJSON 的 Google 地图航点

    我想从 geoJSON 文件加载行程 目前来说 它是有效的 但只有两点 但我需要添加 4 或 5 个航路点 我的代码只读取前两个点并将它们设置为起点和目的地 这是我的代码 google maps event addListener map

  • 使用 TypeScript / Angular2 循环对象的键/值[重复]

    这个问题在这里已经有答案了 如何使用 TypeScript 迭代对象并能够访问键和值 我的 json 对象看起来像这样 clients 123abc Forename Simon Surname Sample 456def Forename

  • 用圆形雷达数学方法表示点

    我正在编写一个简单的应用程序 它可以向您显示您周围的朋友 但不是在法线地图中 而是在像 UI 这样的真正圆形雷达上 https i stack imgur com Au3IP png https i stack imgur com Au3I

  • jquery 验证数组输入的添加规则[重复]

    这个问题在这里已经有答案了 我想将复选框值存储在数组中 但是 我无法使用验证规则 因为名称是selectList 代替selectList 我尝试了 id 但似乎规则只绑定到名称 html

随机推荐

  • ...未定义引用...collect2：ld返回1退出状态[重复]

    这个问题在这里已经有答案了 我在编译时遇到一些错误 我不明白为什么 我的 heapsort h 应该有导出类型吗 堆排序 c include

  • DataGridTemplateColumn 内的绑定命令

    我使用命令将视图 包括 XAML 附加到我的 ViewModel 当单击 DataGrid 行上的按钮时 我需要调用命令 我正在为此使用行为 常规命令也有同样的问题 当我单击 DataGrid 上的按钮时 我的命令不会被触发 为了说明问题

  • 通过selenium在firefox中打开私有模式

    实际上我想通过selenium打开firefox浏览器的隐身 私密模式 但每次我尝试时都是以正常模式打开firefox 经过一番谷歌搜索后 我得到了这段代码 我用它通过 selenium 在 Firefox 中打开私有模式 但它不起作用 F

  • 应用因 iCloud 备份标记而被拒绝

    我的应用程序有一些应用内购买 可将视频内容下载到 Documents 文件夹 我最近提交了应用程序的更新 但被拒绝了 因为我没有将视频文件标记为不备份到 iCloud 我成功地实现了标记 但我仍然对苹果文档中的这一声明感到困惑 重要 新的

  • Python 替换嵌套 JSON 中的 None 值

    我一直在尝试替换下面 JSON 字典中的 None 值 我将如何遍历这个 json 并将 None 值替换为空字符串 我很难理解如何遍历嵌套 json 如果有人能帮我解决这个问题 我会很高兴 下面的嵌套 json 示例 或者在 python

  • NullPointerException 自定义列表视图适配器

    你好 stackoverflow 社区 我在扩展 BaseAdapter 的自定义适配器类的 getView 方法中得到了一个 NPE 我希望你可以帮助我 这是我的 getView 方法 Override public View getVi

  • Android：Json 无法从 mysql 数据库检索任何文件，它是空的

    我是 android 新手 我正在使用 mysql 数据库 其中我链接 php 文件进行连接 工作正常 但我的代码没有显示任何内容 它只显示背景色黑色 而不是显示数据库中的数据 public class HomeFragment exten

  • 具有特定深度的 TypeScript 递归类型

    TypeScript 允许您编写递归类型 但无法深入了解代码在较低级别 即深度 中如何变化 例如 下面的代码在所有级别上都具有相同类型的签名 并且我们必须在每个级别手动检查是否存在sub财产 type Recurse foo string

  • PHP - 搜索字符串中的特定单词数组并与可选的 + 或 - 匹配

    我需要在字符串中搜索特定单词并将匹配结果作为变量 我在数组中有一个特定的单词列表 names array Blue Gold White Purple Green Teal Purple Red drag Glowing looks to

  • 如何使用反射或其他准确方法获取控制器内当前的 ASP.NET Core 控制器方法名称

    我想获取我的当前方法名称ASP NET Core控制器 我尝试通过反射获取方法名称 HttpGet public async Task

  • 从“(signed) -1”到“unsigned long”的转换是否标准化？ [复制]

    这个问题在这里已经有答案了 In 这个答案 https stackoverflow com a 51234964 65863 你可以找到这条评论 https stackoverflow com questions 40608111 why

  • 将密钥添加到选定的密钥集中

    我正在编写一个 NIO 服务器 并希望响应用户请求 即将一些数据写入通道 Selector selector if selector selectNow 0 if key isReadable SocketChannel channel k

  • 按 HOME 按钮不会从配置活动返回小部件 ID

    Error appWidgetId EXTRA APPWIDGET ID was not returned from the widget configuration activity public class WidgetConfigur

  • 获取ListView可见项

    我有一个ListView其中可能包含很多项目 所以它是virtualized和回收物品 它不使用排序 我需要刷新一些值显示 但是当项目太多时 更新所有内容太慢 所以我想只刷新可见项目 我怎样才能获得当前显示的所有项目的列表 我试图调查Lis

  • PrimeFaces 5.2 及更高版本中图表扩展器属性的替代方案是什么

    我正在使用 primefaces 5 2 最新版本并尝试了折线图 它工作正常 我正在尝试更改折线图轴的颜色 背景 边框等 但扩展器属性在最新的 primefaces 版本中不起作用 我的 XHTML

  • 为什么图很大时x轴消失了

    我正在尝试使用加载大图JFreeChart 但是 当缓冲图像超过一定大小时 X 轴会出现问题 这些值在 X 轴上消失 这可以在图像的第三张图中看到 I would appreciate any help in fixing the prob

  • Java 方法存根

    这就是我必须做的 为下面的 main 调用的方法定义存根 每个存根应打印 FIXME Finish methodName 后跟换行符 并应返回 1 输出示例 FIXME Finish getUserNum FIXME Finish getU

  • 来自外部 .diff 文件的交互式补丁

    Linux 是否有命令或程序允许交互式地修补源代码 在屏幕上打印每个块并在将其应用到文件之前等待确认 就像是git add p 但是从另一个 diff 文件中进行更改 您始终可以在 shell ruby python 中编写脚本 逐行读取该

  • 使用 .load() 用图像填充 div 以方便使用 slider1.7

    所以我试图用外部 html 文件中的图像填充幻灯片 div 但问题似乎是新图像确实可以通过 load 拉取 但简单的滑块无法看到新图像 甚至只显示空白尽管在 div 中 有新的图像链接 在我的 html 中 我有这个

  • 进度条摆动效果

    摆动垂直进度条 我学会了如何构建一个整洁的 动态大小的垂直进度条 其中带有横栏这个问题 https stackoverflow com questions 22337851 css vertical progress bar noredir

热门标签