日常整理（2）

日常整理（2）

图片宽度自适应

<img class="re-img" src="../../../assets/img/bus/zzmap.jpg"/>

.re-img {
  width: 100%; /* 或者指定宽度 */
  height: auto; /* 高度自适应 */
  object-fit: contain;
}

vue img 自定义渲染src 图片不显示

<img class="index-banner" :src="data.img" />

img:require("@/assets/images/shouye/banner2.png")

锚点跳转 滑动效果

<div id="anchor" class="topTitle_b">{{spanTextSix}}</div>

biaozhu() {
      var targetElem = document.getElementById("anchor")
      var targetPos = targetElem.offsetTop;
      // document.getElementById("anchor").scrollIntoView()
      window.scrollTo({
        top: targetPos,
        behavior: 'smooth'
      })
    }

获取锚点坐标，根据坐标平滑移动

var anchorElement = document.getElementById(id);
      var rect = anchorElement.getBoundingClientRect();
      var x = rect.left + window.pageXOffset;
      var y = rect.top + window.pageYOffset;
      console.log("锚点的坐标值为：(" + x + ", " + y + ")")
      window.scrollTo({
        top: y,
        left: x,
        behavior: 'smooth'
      })

video标签 滚动条滑到video时播放，滑出时暂停 vue 防止多次滚动 报错

<template>
  <div>
    <video ref="video" v-bind:src="videoSrc" muted controls></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'path/to/your/video',
      observer: null
    }
  },
  mounted() {
    this.observer = new IntersectionObserver(this.handleIntersection, { threshold: 0.5 })
    this.observer.observe(this.$refs.video)
  },
  beforeDestroy() {
    if (this.observer) {
      this.observer.unobserve(this.$refs.video)
      this.observer.disconnect()
      this.observer = null
    }
  },
  methods: {
    handleIntersection: _.debounce(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.play()
        } else {
          entry.target.pause()
        }
      })
    }, 100)
  }
}
</script>

<template>
  <div>
    <video ref="video" src="your_video_path" width="640" height="360"></video>
  </div>
</template>

<script>
export default {
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      const video = this.$refs.video;
      const videoTop = video.getBoundingClientRect().top;
      const videoBottom = video.getBoundingClientRect().bottom;
      const isVisible = (videoTop >= 0 && videoBottom <= window.innerHeight);
      if (isVisible) {
        video.play();
      } else {
        video.pause();
      }
    }
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  }
};
</script>