大神们，我的问题是这样的，截图：问题是：进度条右侧的数值是变动的，哪个值大，进度条就最长，进度条的长度以当前值/总值的百分比，其他的长度依次按比值展示。如果后面的值大于前方，就会对应的取待。取待时最好出现动画效果。左侧很简单，就是排名的先后，和进度条对应起来。麻烦大神帮小弟解决一下，不胜感激。 html代码如下： <!doctype html> <html lang="en"> <head> <title>幸运排名</title> </head> <body> <ul id="list"> <li id="li1"><span>1</span><span class="name">昵称：山东广庆信息科技有限公司手机：15315588888</span><span class="sp">99</span></li> <li id="li2"><span>2</span><span class="name">昵称：山东新动力有限公司手机：15315588888</span><span class="sp">123</span></li> <li id="li3"><span>3</span><span class="name">昵称：济南高新科技有限公司手机：15315588888</span><span class="sp">234</span></li> <li id="li4"><span>4</span><span class="name">昵称：山东新联盟有限公司手机：15315588888</span><span class="sp">44</span></li> <li id="li5"><span>5</span><span class="name">昵称：济南创新科技有限公司手机：15315588888</span><span class="sp">1230</span></li> </ul> </body>

用jq实现进度显示效果

大神们，我的问题是这样的，截图：效果初始展示

问题是：进度条右侧的数值是变动的，哪个值大，进度条就最长，进度条的长度以当前值/总值的百分比，其他的长度依次按比值展示。如果后面的值大于前方，就会对应的取待。取待时最好出现动画效果。
左侧很简单，就是排名的先后，和进度条对应起来。
麻烦大神帮小弟解决一下，不胜感激。

html代码如下：
<!doctype html>
<html lang="en">
<head>

<title>幸运排名</title>

</head>
<body>

    <ul id="list">
        <li id="li1"><span>1</span><span class="name">昵称：山东广庆信息科技有限公司 &nbsp;&nbsp;手机：15315588888</span><span class="sp">99</span></li>

        <li id="li2"><span>2</span><span class="name">昵称：山东新动力有限公司 &nbsp;&nbsp;手机：15315588888</span><span class="sp">123</span></li>

        <li id="li3"><span>3</span><span class="name">昵称：济南高新科技有限公司 &nbsp;&nbsp;手机：15315588888</span><span class="sp">234</span></li>

        <li id="li4"><span>4</span><span class="name">昵称：山东新联盟有限公司 &nbsp;&nbsp;手机：15315588888</span><span class="sp">44</span></li>

        <li id="li5"><span>5</span><span class="name">昵称：济南创新科技有限公司 &nbsp;&nbsp;手机：15315588888</span><span class="sp">1230</span></li>
    </ul>

</body>

阅读 6.4k

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <script src="./jquery-1.10.2.min.js" type="text/javascript"></script> <style type="text/css"> li,div{width:1000px;border: 1px solid #ccc;} .c0 {background-color: red;} .c1 {background-color: blue;} .c2 {background-color: yellow;} .c3 {background-color: green;} .c4 {background-color: gray;} </style> <script> $(function(){ var arr = new Array(90,20,50,70,40); arr = sort(arr); var ul = $("ul") for (var i = 0; i < arr.length; i++) { ul.append('<li><div class="c'+i+'" style="width:'+10 * arr[i] +'px;display:none;">item'+i+'</div></li>'); $(".c"+i).delay(1000).fadeIn('slow'); }; }); function sort(seq) { var size = seq.length; if (size > 1) { var k = seq[0]; var x = new Array(); var y = new Array(); for(var i=1; i< size; i++) { if(seq[i] >= k) { x.push(seq[i]); } else { y.push(seq[i]); } } x = sort(x); y = sort(y); return x.concat(k).concat(y); } else { return seq; } } </script> </head> <body> <ul></ul> </body> </html>

用jq实现进度显示效果

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

js如何在并发中同步两个fetch请求？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

为什么会出现CORS error？

101 新手上路