当前位置：文江博客话题详情

JavaScript jQuery Zepto

淘宝会员俱乐部那样的会员等级进度条显示vip等级用户头像在进度条上根据vip等级移动

发布于 2022-09-04 19:22:32 字数 145 浏览 14 评论 0

如何实现 wap端

图片描述

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（4）

小糖芽 2022-09-11 19:22:32

不考虑拖动的话，可以定位两个层，头像一层z轴2，等级一层z轴1，然后将头像定位到中间位置，用left：-n%，（n值自己试，可以用vw单位控制），不同等级不同的left值

代码如下

<style type="text/css">
.a {
    width: 500px;
    height: 500px;
    position: relative;
    overflow: hidden;
}
ul {
    list-style-image: none;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.b {
    height: 10px;
    width: 100%;
    position: absolute;
    top: 50%;
    background-color: rgba(255,51,0,1);
    border-radius: 6px;
    overflow: hidden;
    margin-top: -5px;
}
.b span {
    display: block;
    height: 10px;
    width: 10px;
    background-color: rgba(255,255,0,1);
    border-radius:5px;
    animation: huatiao 3s ease-out 0s 1 forwards;
}
@keyframes huatiao{
    0%{width:10px}
    40%{width:90%}
    100%{width:50%}
}
.c{
    width: 500%;
    height: 50px;
    margin-top: -25px;
    position: absolute;
    top: 50%;
    left:250px;    
    animation: jindu 9s ease 0.5s 1 forwards;
}
.c li {
    display: block;
    height: 50px;
    width: 50px;
    background-color: rgba(255,204,102,1);
    float: left;
    margin-right: 210px;
}
@keyframes jindu{
    0%{left:250px}
    
    100%{left:-1000px}
}
</style>

    <body>
<div class="a">
  <div class="b"><span></span></div>
  <div class="c">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
    </ul>
  </div>
</div>
</body>

半山落雨半山空 2022-09-11 19:22:32

监听touchmove事件,进行操作

甜中书 2022-09-11 19:22:32

其实这是有两层的，上面那层就单纯等级图标往左移动，下面那层是个进度条，先是增加，再定住不动，再往左退一点．

他不在意 2022-09-11 19:22:32

ok 谢谢我试试

~没有更多了~

关于作者

暂无简介

文章

评论

514 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

qq_VRzBBA45

文章 0 评论 0

痴情

文章 0 评论 0

。

文章 0 评论 0

Mu.

文章 0 评论 0

凉薄对峙

文章 0 评论 0

不落城

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文