android短视频开发，图片视差滚动

android短视频开发，图片视差滚动

 

1

const imgs = ['./assets/1.jpg', './assets/2.png', './assets/3.jpg']<br>let currentIndex = 0<br>const scrollContainer = document.querySelector('.scroll-container')<br> <br>function creatItem(index) {<br>  let imgUrl = imgs[index]<br>  const item = document.createElement('div')<br>  item.classList.add('item')<br>  item.innerHTML = `<img src=${imgUrl} />`<br>  scrollContainer.appendChild(item)<br>  return item<br>}<br> <br>function init() {<br>  scrollContainer.innerHTML = ''<br>  let preIndex = currentIndex - 1 < 0 ? imgs.length - 1 : currentIndex - 1<br>  let nextIndex = currentIndex + 1 > imgs.length - 1 ? 0 : currentIndex + 1<br>  creatItem(preIndex).classList.add('pre')<br>  creatItem(currentIndex).classList.add('cur')<br>  creatItem(nextIndex).classList.add('next')<br>}<br> <br>init()<br> <br>let isAnimation = false<br>scrollContainer.addEventListener('wheel', (e) => {<br>  if ((e.deltaY = 0)) {<br>    return<br>  }<br>  if (isAnimation) {<br>    return<br>  }<br>  isAnimation = true<br>  if (e.deltaY > 0) {<br>    //向下滚动<br>    scrollContainer.classList.add('scroll-down')<br>    currentIndex = currentIndex + 1 > imgs.length - 1 ? 0 : currentIndex + 1<br>  } else {<br>    //向上滚动<br>    scrollContainer.classList.add('scroll-up')<br>    currentIndex = currentIndex - 1 < 0 ? imgs.length - 1 : currentIndex - 1<br>  }<br>})<br> <br>scrollContainer.addEventListener('transitionend', (e) => {<br>  isAnimation = false<br>  scrollContainer.classList.remove('scroll-up')<br>  scrollContainer.classList.remove('scroll-down')<br>  init()<br>})

​

 

以上就是android短视频开发，图片视差滚动， 更多内容欢迎关注之后的文章