您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
小编给大家分享一下html如何实现3D图片演示,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
代码如下(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>
代码如下(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)
代码如下(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') }
看完了这篇文章,相信你对“html如何实现3D图片演示”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。