https://www.cnsmepump.com/assets/js/unit/image.js

1class ScriptImage extends Script {
2  constructor(params) {
3    super(params)
4    this.$dom = document.querySelector(`#${this.attrId}`)
5    this.utils = Utilts.ins()
6    this.config = params.config
7    this.video_config = JSON.parse(this.utilts.htmlDecode(params.video_config))
8    // purge control character from svg content
9    params.images = (params.images || '').replace(/[\f\n\r\t\v]+/g, ' ')
10    // 视频播放方式
11    let methodMap = {
12      default: this.video_config.method,
13      md: this.video_config.method_md,
14      xl: this.video_config.method_xl
15    }
16    this.method = methodMap[this.utilts.getScreen()]
17    try {
18      this.images = JSON.parse(this.utilts.htmlDecode(params.images))
19    } catch (e) {
20      console.warn(e)
21    }
22  }
23
24  render() {
25    if (this.$dom._zoom && this.$dom._zoom.render) {
26      this.$dom._zoom.render()
27    }
28  }
29
30  /** 初始化，支持异步 */
31  async init() {
32    // 放大图片
33    if (this.images[0] && this.images[0].target === "zoom") {
34      await new Load("/assets/plugins/zoom.js");
35      this.$dom._zoom = new ZoomBuilder({
36        attrId: this.attrId,
37        dom: this.$dom,
38        selector: '.unit-image--zoom[zoom-img="true"]',
39        boxClass: "image-zoom-box",
40      })
41    }
42    this.initHoverImg()
43    this.initPrevClick()
44  }
45  initPrevClick() {
46    const gifHoverImages = this.$dom.querySelectorAll('.unit-list-hover__image')
47    if (gifHoverImages.length) {
48      gifHoverImages.forEach(val => {
49        val.addEventListener('click', () => {
50					if (this.method === '2') val.classList.add('d-none')
51          val.parentNode.parentNode.click()
52        })
53      })
54    }
55  }
56  initHoverImg() {
57    const videoDom = this.$dom.querySelector('[video-gif]')
58    if (!videoDom) return
59    setTimeout(() => {
60      this.renderHoverImg(videoDom)
61      videoDom.parentNode.onmouseover = e => {
62        const originImg = videoDom.children[0].children[1].querySelector('.base-image__item') // hover原图的效果
63        const h_dom = videoDom.querySelector('.unit-list-hover__image')
64        if (h_dom && h_dom.classList.contains('hover_img_before_load')) {
65          h_dom.classList.remove('hover_img_before_load')
66        }
67        if (originImg) originImg.classList.add('opacity0')
68        videoDom.querySelector('.base-video__play')?.classList.add('d-none')
69      }
70      videoDom.parentNode.onmouseout = e => {
71        const originImg = videoDom.children[0].children[1].querySelector('.base-image__item') // hover原图的效果
72        const h_dom = videoDom.querySelector('.unit-list-hover__image')
73        if (originImg) originImg.classList.remove('opacity0')
74        if (h_dom) {
75          h_dom.classList.add('hover_img_before_load')
76        }
77        videoDom.querySelector('.base-video__play')?.classList.remove('d-none')
78      }
79    }, 0)
80	}
81  renderHoverImg(node) {
82		node.setAttribute('hover-img', true)
83    const video_gif = node.getAttribute('video-gif')
84		let hoverImgEl = ''
85		if (node.querySelector('.unit-list-hover__image img')) {
86			hoverImgEl = node.querySelector('.unit-list-hover__image img')
87			hoverImgEl.setAttribute('lazy-src', video_gif)
88			const wrapper = node.children[0].querySelector('.base-video__thumb').cloneNode(true)
89      wrapper.querySelector('.base-image__item').innerHTML = hoverImgEl.outerHTML
90			node.querySelector('.unit-list-hover__image').innerHTML = wrapper.outerHTML
91			const hoverImg = node.querySelector('.unit-list-hover__image img')
92			new LazyImg(hoverImg)
93			// node.querySelector('.unit-list-hover__image img').setAttribute('lazy-type', '')
94		} else {
95			hoverImgEl = document.createElement('div')
96			hoverImgEl.classList.add('unit-list-hover__image', 'hover_img_before_load')
97			const wrapper = node.children[0].querySelector('.base-video__thumb').cloneNode(true)
98      wrapper.querySelector('.base-image__item').innerHTML = `<img class="base-image__img img-fluid" lazy-src="${video_gif}"  alt="">`
99			hoverImgEl.innerHTML = wrapper.outerHTML
100			const hoverImg = hoverImgEl.querySelector('.unit-list-hover__image img')
101			new LazyImg(hoverImg)
102      node.querySelector('.base-video__preview').appendChild(hoverImgEl)
103		}
104	}
105}