教你一招实现3D图片演示

// 滚轮滚动

// 监听鼠标滚轮事件，该函数不用调用直接生效

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

}