前端开发技巧

判断可视

判断元素在窗口可视

javascript 复制代码
function isInViewPortOfOne (el) {
    // viewPortHeight 兼容所有浏览器写法
    const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 
    const offsetTop = el.offsetTop
    const scrollTop = document.documentElement.scrollTop
    const top = offsetTop - scrollTop
    return top <= viewPortHeight
}

更简单的方法getBoundingClientRecct可以直接获取元素距离窗口的数据信息

如果一个元素在视窗之内的话,那么它一定满足下面四个条件:

  • top 大于等于 0
  • left 大于等于 0
  • bottom 小于等于视窗高度
  • right 小于等于视窗宽度
javascript 复制代码
function isInViewPort(element) {
  const viewWidth = window.innerWidth || document.documentElement.clientWidth;
  const viewHeight = window.innerHeight || document.documentElement.clientHeight;
  const {
    top,
    right,
    bottom,
    left,
  } = element.getBoundingClientRect();

  return (
    top >= 0 &&
    left >= 0 &&
    right <= viewWidth &&
    bottom <= viewHeight
  );
}

若要判断一个元素相对父元素是否可视,只需要判断该元素的offsetLeft/offsetTop和父元素的clientWidth/clientHeight即可。

垂直居中

vertical-align

vertical-align用于行内元素、行内块元素、表单元素 的垂直方向控制。添加在目标子元素上 。可以相对于父元素或行高使用。无效的场景需要使用line-height指明行高才能使用。

图形蒙版

对于同一形状,不同颜色的效果,可以使用图形蒙版进行实现

html 复制代码
<style>
    /* 根据一个蒙版生成,同一形状各种颜色的图形 */
    .container {
      width: 200px;
      height: 200px;
      background-color: #000; //决定蒙版出来的颜色
      -webkit-mask-image: url("https://img-blog.csdnimg.cn/direct/0eb404f06e0b4430a3c6542634892ed5.png");
      mask-image: url("https://img-blog.csdnimg.cn/direct/0eb404f06e0b4430a3c6542634892ed5.png");
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkir-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
   
    }
</style>
<div class="container"> </div>

一侧图片一侧文字布局

1.父容器设置overflow:hidden;

2.图片侧设置float

3.文字侧不用设置宽度,正常布局即可实现
float最初就是为了让文字环绕图片开发的

html 复制代码
<style>
 .row_container {
      overflow: hidden;
    }

    .left_cover {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 10px;
      background-color: black;
      border-radius: 20px;
    }

    .right_content {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      text-overflow: ellipsis;

    }
</style>
 <div class="row_container">
    <img src="https://img-blog.csdnimg.cn/direct/0eb404f06e0b4430a3c6542634892ed5.png" alt="" class="left_cover">
    <div class="right_content">
      <div class="title">标题</div>
      <div class="desc">
        一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话一大段话</div>
    </div>
  </div>

效果如下:

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/9c64f92b42dc4739bf054af5ded7418a.png![左右布局效果图](https://i-blog.csdnimg.cn/direct/80f31a3c27b846109eeaabc258d094ca.png)

相关推荐
用户21411832636021 天前
dify案例分享-免费玩转 AI 绘图!Dify 整合 Qwen-Image,文生图 图生图一步到位
前端
IT_陈寒1 天前
Redis 性能翻倍的 7 个冷门技巧,第 5 个大多数人都不知道!
前端·人工智能·后端
mCell1 天前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip1 天前
Node.js 子进程:child_process
前端·javascript
excel1 天前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼2 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping2 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙2 天前
[译] Composition in CSS
前端·css
白水清风2 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化