资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

html如何实现3D图片演示

小编给大家分享一下html如何实现3D图片演示，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

为西乡塘等地区用户提供了全套网页设计制作服务，及西乡塘网站建设行业解决方案。主营业务为网站制作、成都做网站、西乡塘网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

1、创建一个父容器，将所有照片叠放在一起

代码如下（html）：

  
      
    
      
      
      
      
      
      
      

      
        
      
  

      

      
3D Tiktok Carousel

    
    
  

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')
}

看完了这篇文章，相信你对“html如何实现3D图片演示”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！


当前名称：html如何实现3D图片演示
网页网址：http://cdkjz.cn/article/jdjcgs.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
小谭建站晟和广告梓潼网站建设成都SEO优化食品包装设计遂宁海缘科技申请域名成都网站建设普能电气边坡防护网厂家

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图