小程序实现剪贴蒙版样式效果

转载 程序猿tx 2020/3/18 4:01:19

日常开发中,我们经常遇到剪贴蒙版样式的进度条效果,通过限制上方图层的显示长度,达到视觉差的效果。代码里主要通过overflow:hidden的属性,元素的内容若超出了给定的宽度和高度,那么超出的部分将会被隐藏。

例如:
这张图可以分为三层,
最低层的背景色+加上底部的文字

中间层是张进度条的图片,根据不同进度长短覆盖在底层上面

最上面还有一行白色的文字,位置跟底层的文字重合,通过限制长度部分显示左边内容,形成一段文字两种颜色的视觉差。

  <view class="container">
    <!-- 垫底文字 -->
    <text>这是一段文字</text>
    <!-- 进度条图片 -->
    <image class="ic-progress" style="width: {{percent}};" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../img/ic_progress.png" />
    <!-- 白色文字内容区,与垫底文字位置重合 -->
    <view class="upTxt" style="width: {{percent}};">
      <text class="txt">这是一段文字</text>
    </view>
  </view>
.container{
  width: 460rpx;
  height: 50rpx;
  line-height: 50rpx;
  position: relative;
  background: rgba(247,29,81,0.1);
  border-radius: 25rpx;
  font-size: 28rpx;
  color: #F71D51;
  text-align: center;
  margin-top: 100px
}

.upTxt, .ic-progress {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0rpx;
  height: 50rpx;
  line-height: 50rpx;
  border-radius: 25rpx;
  text-align: center;
}

.txt{
  display: inline-block;
  width: 460rpx;
  height: 50rpx;
  border-radius: 25rpx;
  color: #fff;
  text-align: center;
}

js代码里设置不同的percent百分比可以看出不同的效果。
非常简单方便的一个处理方法。

欢迎关注我的个人博客:https://www.manjiexiang.cn/

点击查看更多内容
随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[小程序实现剪贴蒙版样式效果]http://www.zyiz.net/tech/detail-119256.html

上一篇:mina-loader 源码浅析

下一篇:「小程序JAVA实战」小程序的flex布局(22)

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    扫一扫关注最新编程教程