(十三)原生js案例之360°视角的展台

一款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]
    }
  }
}