一款3d效果的展台效果实现
实现效果
代码实现
- 必要的css
* {
padding: 0;
margin: 0;
}
img {
width:640px; height:378px; position:absolute; left:50%; top:50%; margin-top:-189px; margin-left:-320px;
}
/* #progress{
width:0px; height:20px; position:absolute; left:50%; top:50%; margin-top:-189px; margin-left:-320px;
background-color: rgb(70, 218, 114);
border-radius: 10px;
text-align: center;
color: #fff;
transition: all 0.5s ease;
} */
- 静态页面
<img id="img1" src="./img/miaov (0).jpg"></img>
- 核心逻辑
window.onload = function () {
let x = 0
let oImg = document.getElementById('img1')
let aImg = document.getElementsByTagName('img')
let oLastImg = oImg
let lastIndex = 0,
iSpeed = 0,
timer = null
let count = 0
var i = 1
let oProgress = document.createElement('div')
oProgress.id = 'progress'
for (i = 1; i < 77; i++) {
;(function (oNewImg) {
let oImg = new Image()
oImg.onload = function () {
oNewImg.src = this.src
count++
}
oImg.src = 'img/miaov (' + i + ').jpg'
oNewImg.style.display = 'none'
document.body.appendChild(oNewImg)
})(document.createElement('img'))
}
document.onmousedown = function (e) {
const ev = e || window.event
let disX = ev.clientX - x,
isFlag = true
document.onmousemove = function (e) {
const ev = e || window.event
x = ev.clientX - disX
move()
iSpeed = x - lastIndex
lastIndex = x
return false
}
document.onmouseup = function () {
document.onmousemove = null
document.onmouseup = null
timer = setInterval(function () {
x += iSpeed
move()
document.title = iSpeed
}, 30)
}
return false
}
function move() {
if (iSpeed > 0) {
iSpeed--
} else {
iSpeed++
}
if (iSpeed == 0) {
clearInterval(timer)
}
let l = parseInt(-x / 10)
if (l > 0) {
l %= -76
} else {
l = 76 - (-l % 76)
}
if (oLastImg !== aImg[l]) {
oLastImg.style.display = 'none'
aImg[l].style.display = 'block'
oLastImg = aImg[l]
}
}
}