前端开发技巧

判断可视

判断元素在窗口可视

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)

相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站