android短视频开发，图片视差滚动
const imgs = ['./assets/1.jpg', './assets/2.png', './assets/3.jpg']
let currentIndex = 0
const scrollContainer = document.querySelector('.scroll-container')
function creatItem(index) {
let imgUrl = imgs[index]
const item = document.createElement('div')
item.classList.add('item')
item.innerHTML = `<img src=${imgUrl} />`
scrollContainer.appendChild(item)
return item
}
function init() {
scrollContainer.innerHTML = ''
let preIndex = currentIndex - 1 < 0 ? imgs.length - 1 : currentIndex - 1
let nextIndex = currentIndex + 1 > imgs.length - 1 ? 0 : currentIndex + 1
creatItem(preIndex).classList.add('pre')
creatItem(currentIndex).classList.add('cur')
creatItem(nextIndex).classList.add('next')
}
init()
let isAnimation = false
scrollContainer.addEventListener('wheel', (e) => {
if ((e.deltaY = 0)) {
return
}
if (isAnimation) {
return
}
isAnimation = true
if (e.deltaY > 0) {
//向下滚动
scrollContainer.classList.add('scroll-down')
currentIndex = currentIndex + 1 > imgs.length - 1 ? 0 : currentIndex + 1
} else {
//向上滚动
scrollContainer.classList.add('scroll-up')
currentIndex = currentIndex - 1 < 0 ? imgs.length - 1 : currentIndex - 1
}
})
scrollContainer.addEventListener('transitionend', (e) => {
isAnimation = false
scrollContainer.classList.remove('scroll-up')
scrollContainer.classList.remove('scroll-down')
init()
})
以上就是android短视频开发，图片视差滚动， 更多内容欢迎关注之后的文章