一個簡單炫酷的特效頁面（html+css+js 含原始碼）----3D圖片演示
- 前言
- 一、頁面特效效果展示
- 二、功能描述
- 1、打開頁面，所有圖片會自動轉動
- 2、圖片的大小和間隔可隨滑鼠滾輪滾動而改變
- 3、滑鼠按住頁面任意位置，拖動游標，頁面可隨之旋轉
- 三、功能實作
- 1.創建一個父容器，將所有照片疊放在一起
- 2.給所有照片加上旋轉影片
- 3.監聽滑鼠事件
- 總結
前言
對于學前端的小伙伴來說，吸引你們入坑的大都是一些炫酷的頁面，但往往那些頁面的源代碼對初學的伙伴們都不太友好，今天給大家分享一個代碼簡單、適合初學者、高級感炫酷感爆棚的特效頁面（有npy的快樂加倍！)，
一、頁面特效效果展示
注：上述效果圖只是部分效果，原諒我還沒有學會自制gif圖！
二、功能描述
1、打開頁面，所有圖片會自動轉動
2、圖片的大小和間隔可隨滑鼠滾輪滾動而改變
3、滑鼠按住頁面任意位置，拖動游標，頁面可隨之旋轉
三、功能實作
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 + 's'
}
}
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')
}
總結
以上就是今天要跟大家分享的主要內容，本文僅簡單介紹了該特效頁面的功能以及實作，并附上部分代碼供小伙伴們學習，代碼并不是很成熟，也希望得到大牛們的指點，
(注：需要全部原始碼的小伙伴們可以評論留言哦！！)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/276213.html
標籤：其他
上一篇：前路漫漫，寫給初級前端的學習指南
下一篇：java web