• 文章介绍
  • 好看的3D旋转木马特效JavaScript插件-99资源网
    这是一款 js 3D 旋转木马特效插件。该插件通过 CSS3 和纯 js 来完成,可在中以 3D 旋转的方式来展示一组图片。

    HTML 结构

    好看的3D旋转木马特效JavaScript插件-99资源网
    好看的3D旋转木马特效JavaScript插件-99资源网
    好看的3D旋转木马特效JavaScript插件-99资源网
    好看的3D旋转木马特效JavaScript插件-99资源网
    好看的3D旋转木马特效JavaScript插件-99资源网
    好看的3D旋转木马特效JavaScript插件插图(6)


    好看的3D旋转木马特效JavaScript插件-99资源网

    3D Tiktok Carousel


    css样式

    你的二维码名字
    此处内容已经被作者无情的隐藏,请输入验证码查看内容
    验证码:
    请关注99资源官方微信,回复“微信验证码”,获取验证码。在微信里搜索“99资源”或者微信扫描右侧二维码都可以关注微信公众号。

    JavaScript

    var radius = 240;
    var autoRotate = true;
    var rotateSpeed = -60;
    var imgWidth = 120;
    var imgHeight = 170;

    var bgMusicURL = '';
    var bgMusicControls = true;

    // ===================== start =======================
    setTimeout(init, 100);

    var obox = document.getElementById('drag-container');
    var ospin = document.getElementById('spin-container');
    var aImg = ospin.getElementsByTagName('img');
    var aVid = ospin.getElementsByTagName('video');
    var aEle = [...aImg, ...aVid];

    ospin.style.width = imgWidth + "px";
    ospin.style.height = imgHeight + "px";

    var ground = document.getElementById('ground');
    ground.style.width = radius * 3 + "px";
    ground.style.height = radius * 3 + "px";

    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"; } } function applyTranform(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'); } var sX, sY, nX, nY, desX = 0, desY = 0, tX = 0, tY = 10; if (autoRotate) { var animationName = (rotateSpeed > 0 ? 'spin' : 'spinRevert');
    ospin.style.animation = `${animationName} ${Math.abs(rotateSpeed)}s infinite linear`;
    }

    if (bgMusicURL) {
    document.getElementById('music-container').innerHTML += `

    If you are reading this, it is because your browser does not support the audio element.


    `;
    }

    if (mobilecheck()) {
    // ==================== Touch Events ====================
    document.ontouchstart = function(e) {
    clearInterval(obox.timer);
    e = e || window.event;
    var sX = e.touches[0].clientX,
    sY = e.touches[0].clientY;

    this.ontouchmove = function(e) {
    e = e || window.event;
    var nX = e.touches[0].clientX,
    nY = e.touches[0].clientY;
    desX = nX - sX;
    desY = nY - sY;
    tX += desX * 0.1;
    tY += desY * 0.1;
    applyTranform(obox);
    sX = nX;
    sY = nY;
    }

    this.ontouchend = function(e) {
    this.ontouchmove = this.ontouchend = null;
    obox.timer = setInterval(function() {
    desX *= 0.95;
    desY *= 0.95;
    tX += desX * 0.1;
    tY += desY * 0.1;
    applyTranform(obox);
    playSpin(false);
    if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) { clearInterval(obox.timer); playSpin(true); } }, 17); } // return false; } } else { // ==================== Mouse Events ==================== document.onmousedown = function(e) { clearInterval(obox.timer); e = e || window.event; var sX = e.clientX, sY = e.clientY; this.onmousemove = function(e) { e = e || window.event; var nX = e.clientX, nY = e.clientY; desX = nX - sX; desY = nY - sY; tX += desX * 0.1; tY += desY * 0.1; applyTranform(obox); sX = nX; sY = nY; } this.onmouseup = function(e) { this.onmousemove = this.onmouseup = null; obox.timer = setInterval(function() { desX *= 0.95; desY *= 0.95; tX += desX * 0.1; tY += desY * 0.1; applyTranform(obox); playSpin(false); if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) { clearInterval(obox.timer); playSpin(true); } }, 13); } return false; } document.onmousewheel = function(e) { e = e || window.event; var d = e.wheelDelta / 20 || -e.detail; radius += d; init(1); }; }

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考免责介绍。
    提示下载完但解压或打开不了
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联系客服处理。