利用JavaScript制作一個酷炫的3D圖片演示

更新時間：2022年03月10日 10:52:13 作者：m0_54850467

對于學(xué)前端的小伙伴來說，吸引你們?nèi)肟拥拇蠖际且恍╈趴岬捻撁?。本文將用JavaScript編寫一個酷炫的3D圖片演示效果，感興趣的可以了解一下

前言

對于學(xué)前端的小伙伴來說，吸引你們?nèi)肟拥拇蠖际且恍╈趴岬捻撁妗５切╉撁娴脑创a對初學(xué)的伙伴們都不太友好。今天給大家分享一個代碼簡單、適合初學(xué)者、高級感炫酷感爆棚的特效頁面（有npy的快樂加倍！)。

一、頁面特效效果展示

注：上述效果圖只是部分效果，原諒我還沒有學(xué)會自制gif圖！

二、功能描述

1、打開頁面，所有圖片會自動轉(zhuǎn)動

2、圖片的大小和間隔可隨鼠標(biāo)滾輪滾動而改變

3、鼠標(biāo)按住頁面任意位置，拖動光標(biāo)，頁面可隨之旋轉(zhuǎn)

三、功能實(shí)現(xiàn)

1.創(chuàng)建一個父容器，將所有照片疊放在一起

代碼如下（html）：

 <div id="darg-container" class="darg">
      <!-- 父容器，相當(dāng)于把所有圖片都放在一起 -->
    <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" rel="external nofollow" >
        <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.給所有照片加上旋轉(zhuǎn)動畫

代碼如下（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 + 's'
  }
}
setTimeout(init, 1000)

3.監(jiān)聽鼠標(biāo)事件

代碼如下（js）：

// 滾輪滾動
// 監(jiān)聽鼠標(biāo)滾輪事件，該函數(shù)不用調(diào)用直接生效
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;
// 鼠標(biāo)拖動頁面
document.onpointerdown = function(e){
    // console.log(e);
    e = e || window.event//防止出錯,如果e不存在，則讓window.event為e
    var sX = e.clientX,
    sY = e.clientY
    //監(jiān)聽鼠標(biāo)移動函數(shù)
    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
        // 讓頁面跟著鼠標(biāo)動起來
        applyTransform(oDarg)
    }
    this.onpointerup = function(e){
        //每個多久實(shí)現(xiàn)一次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')
}

到此這篇關(guān)于利用JavaScript制作一個酷炫的3D圖片演示的文章就介紹到這了,更多相關(guān)JavaScript3D圖片演示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: