对于前端的朋友来说，吸引你入坑的大多是一些很酷的页面。本文将使用JavaScript编写一个很酷的3D图片演示效果。有兴趣的可以看看。
目录
前言1。页面特效的显示2。功能描述。功能的实现
前言
对于前端的朋友来说，吸引你入坑的大多是一些很酷的页面。但往往那些页面的源代码对初学者并不友好。今天给大家分享一个特效页面，代码简单，适合初学者，高级感酷炫(用npy快乐翻倍！)。
一、页面特效效果展示
注：以上效果图仅为局部效果。原谅我还没学会自己做gif！
二、功能描述
1.打开页面，所有图片会自动旋转。
2.鼠标滚轮滚动可以改变图片的大小和间距。
3.在页面的任意位置按住鼠标，拖动光标，页面会相应旋转。
三、功能实现
1.创建一个父容器，将所有照片堆叠在一起。
代码如下(html):
div id=' darg-container ' class=' darg '
！-父容器，相当于把所有图片放在一起-
div id='旋转容器'
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 no follow '
img src='7.jpg' alt=' '
/a
！-视频控件自动播放='自动播放'循环
source src=' 8 . jpg ' type=' video/MP4 '
/视频-
p3D Tiktok旋转木马/p
/div
div id='ground'/div
/div
2.给所有照片添加旋转动画
代码如下(js):
函数初始化(延迟时间){
//动画显示所有图片
for(var I=0；i aEle.lengthi ) {
aEle[I]. style . transform=' rotateY('(I *(360/aEle . length))' deg)translate z(' radius ' px)'
aEle[I]. style . transition=' transform 1s '
aEle[I]. style . transition delay=delay time | |(aEle . length-I)/4 ' s '
}
}
setTimeout(init，1000)
3.监控鼠标事件
代码如下(js):
//车轮滚动。
//监听鼠标滚轮事件，该函数直接生效，无需调用。
document . onmousewheel=function(e){
//console.log(e)
e=e || window.event
var d=e . wheel delta/10 | |-e . detail
半径=d
初始化(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客户
//监控鼠标移动功能
this . onpointermove=function(e){
console . log(e)；
e=e | | window.event//防止错误。如果e不存在，设window.event为e。
var nX=e.clientX，
nY=e .客户关系；
desX=nX-sX；//X轴上的滑动距离
desY=nY-sY；
tX=desX * 0.1
tY=desY * 0.1
//让页面跟随鼠标。
应用转换(oDarg)
}
this.onpointerup=function(e){
//多久实现一次setInterval
odarg . timer=setInterval(function(){
desX *=0.95
desY *=0.95
tX=desX * 0.1
tY=desY * 0.1
应用转换(oDarg)
playSpin(假)
if(math . ABS(desX)0.5 math . ABS(desY)0.5){
clearInterval(oDarg.timer)
playSpin(真)
}
},17)
this . onpointermove=this . onpointerup=null
}
返回false
}
函数applyTransform(obj){
如果(tY 180)tY=180
如果(tY 0)tY=0
obj . style . transform=` rotatex($ {-tY } deg)rotateY($ { tX } deg)`
}
功能播放旋转(是){
OS pin . style . animation playstate=(是？正在运行':'已暂停')
}
这就是这篇关于用JavaScript制作一个很酷的3D图片演示的文章。更多相关JavaScript3D图片演示内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。