您好,登錄后才能下訂單哦!
小編給大家分享一下html如何實(shí)現(xiàn)3D圖片演示,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
代碼如下(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"> <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>
代碼如下(js):
function init(delayTime) { // 給所有的圖片加動(dòng)畫 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)
代碼如下(js):
// 滾輪滾動(dòng) // 監(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)拖動(dòng)頁面 document.onpointerdown = function(e){ // console.log(e); e = e || window.event//防止出錯(cuò),如果e不存在,則讓window.event為e var sX = e.clientX, sY = e.clientY //監(jiān)聽鼠標(biāo)移動(dòng)函數(shù) this.onpointermove = function(e){ console.log(e); e = e || window.event//防止出錯(cuò),如果e不存在,則讓window.event為e var nX = e.clientX, nY = e.clientY; desX = nX - sX;//在x軸上滑動(dòng)的距離 desY = nY - sY; tX += desX * 0.1 tY += desY * 0.1 // 讓頁面跟著鼠標(biāo)動(dòng)起來 applyTransform(oDarg) } this.onpointerup = function(e){ //每個(gè)多久實(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') }
看完了這篇文章,相信你對(duì)“html如何實(shí)現(xiàn)3D圖片演示”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。