首頁  >  文章  >  web前端  >  教你一招實現3D圖片演示

教你一招實現3D圖片演示

醉折花枝作酒筹
醉折花枝作酒筹原創
2021-04-15 11:59:432027瀏覽

本篇文章給大家詳細介紹一下製作3D圖片的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

教你一招實現3D圖片演示

1、建立一個父容器,將所有照片疊在一起

程式碼如下(html):

  <div id="darg-container" class="darg">
      <!-- 父容器,相当于把所有图片都放在一起 -->
    <div id="spin-container">
      <img src="1.jpg" alt="">
      <img src="2.jpg" alt="">
      <img src="3.jpg" alt="">
      <img src="4.jpg" alt="">
      <img src="5.jpg" alt="">
      <img src="6.jpg" alt="">
      <img src="8.jpg" alt="">

      <a target="_blank" href="7.jpg">
        <img src="7.jpg" alt="">
      </a>
  

      <!-- <video controls autoplay="autoplay" loop>
        <source src="8.jpg" type="video/mp4">
      </video> -->

      <p>3D Tiktok Carousel</p>
    </div>
    <div id="ground"></div>
  </div>

2、給所有照片加上旋轉動畫

程式碼如下(js):

function init(delayTime) {
  // 给所有的图片加动画
  for (var i = 0; i < aEle.length; i++) {
    aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)"
    aEle[i].style.transition = "transform 1s"
    aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + &#39;s&#39;
  }
}
setTimeout(init, 1000)

3、監聽滑鼠事件

程式碼如下(js):

// 滚轮滚动
// 监听鼠标滚轮事件,该函数不用调用直接生效
document.onmousewheel = function(e){
    // console.log(e)
    e = e || window.event
    var d  = e.wheelDelta / 10 || -e.detail
    radius += d
    init(1)

} 
var sX,sY,nX,nY,desX = 0 , desY = 0, tX = 0,tY = 0;
// 鼠标拖动页面
document.onpointerdown = function(e){
    // console.log(e);
    e = e || window.event//防止出错,如果e不存在,则让window.event为e
    var sX = e.clientX,
    sY = e.clientY
    //监听鼠标移动函数
    this.onpointermove = function(e){
        console.log(e);
        e = e || window.event//防止出错,如果e不存在,则让window.event为e
        var nX = e.clientX,
            nY = e.clientY;
        desX = nX - sX;//在x轴上滑动的距离
        desY = nY - sY;
        tX += desX * 0.1
        tY += desY * 0.1
        // 让页面跟着鼠标动起来
        applyTransform(oDarg)
    }
    this.onpointerup = function(e){
        //每个多久实现一次setInterval
        oDarg.timer = setInterval(function(){
            desX *= 0.95
            desY *= 0.95
            tX += desX * 0.1
            tY += desY * 0.1
            applyTransform(oDarg)
            playSpin(false)
            if(Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5){
                clearInterval(oDarg.timer)
                playSpin(true)
            }
        },17) 
        this.onpointermove = this.onpointerup = null 
    }
    return false
}
function applyTransform(obj){
    if(tY > 180)tY = 180
    if(tY < 0)tY = 0
    obj.style.transform = `rotateX(${-tY}deg) rotateY(${tX}deg)`
}

function playSpin(yes){
    oSpin.style.animationPlayState = (yes ? 'running' : 'paused')
}

【推薦學習:javascript高階教學

以上是教你一招實現3D圖片演示的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn