這是一款純js實現(xiàn)360度旋轉(zhuǎn)預覽圖片特效。該js特效僅使用120行代碼，即可實現(xiàn)通過滑塊、或鼠標手動360度旋轉(zhuǎn)圖片，以及自動360度旋轉(zhuǎn)圖片的效果。

使用方法

HTML結(jié)構(gòu)

import Rolldate from 'rolldate'

new Rolldate({

el:'#date'

})

commonJS

lt;div class="tabs"gt;

lt;input type="radio" name="tabs" id="sol1" checked="checked"/gt;

lt;label for="sol1"gt;Rangelt;/labelgt;

lt;div class="tab"gt;

lt;div class="frame" id="frame1"gt;lt;/divgt;

lt;input type="range" id="slider" min="0" max="34" step="1" value="0"/gt;

lt;/divgt;

lt;input type="radio" name="tabs" id="sol2"/gt;

lt;label for="sol2"gt;Drag / Swipelt;/labelgt;

lt;div class="tab"gt;

lt;div class="frame" id="frame2"gt;lt;/divgt;

lt;/divgt;

lt;input type="radio" name="tabs" id="sol3"/gt;

lt;label for="sol3"gt;Canvaslt;/labelgt;

lt;div class="tab"gt;

lt;canvas class="frame" id="frame3"gt;lt;/canvasgt;

lt;/divgt;

lt;/divgt;

lt;div id="overlay"gt;Loading...lt;/divgt;

CSS樣式

body {

margin: 0;

padding: 0;

font-size: .8em;

font-family: 'Open Sans', sans-serif;

overflow: hidden;

}

body .tabs {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

width: 480px;

height: 351px;

}

body .tabs label {

cursor: pointer;

border-radius: 4px;

}

body .tabs input[name="tabs"] {

display: none;

}

body .tabs input[name="tabs"]:checked + label {

background: #44abda;

color: #fff;

}

body .tabs input[name="tabs"]:checked + label + .tab {

display: block;

}

body .tabs label {

display: inline-block;

width: 33.3333%;

float: left;

height: 24px;

line-height: 24px;

text-align: center;

}

body .tabs .tab {

display: none;

position: absolute;

width: 100%;

height: 327px;

top: 24px;

text-align: center;

}

body .tabs .tab .frame {

width: 100%;

height: 100%;

}

body .tabs .tab #slider {

width: calc(100% - 80px);

}

body #overlay {

position: absolute;

width: 100%;

height: calc(100% - 20px);

background: rgba(0, 0, 0, 0.3);

text-align: center;

color: #fff;

font-size: 1.1em;

padding-top: 20px;

}

javascript

let frame1 = document.getElementById('frame1'),

frame2 = document.getElementById('frame2'),

frame3 = document.getElementById('frame3'),

labels = document.querySelectorAll('label'),

ctx = frame3.getContext('2d'),

slider = document.getElementById('slider'),

frameWidth = 480,

frameHeight = 327,

activeFrame = 0,

frames = 34,

xStart = null,

s2Settings = {

sensitivity: 40

},

s3Settings = {

fps: 20,

reverse: false

},

now, delta, then = Date.now(),

interval = 1000 / s3Settings.fps,

runCanvas = false;

let gui = new dat.GUI(),

s2 = gui.addFolder('Drag / Swipe'),

s3 = gui.addFolder('Canvas');

s2.add(s2Settings, "sensitivity", 10, 80, 1);

s3.add(s3Settings, "fps", 1, 60, 1).onChange(() =gt; {interval = 1000 / s3Settings.fps;});

s3.add(s3Settings, "reverse");

s2.open();

s3.open();

let sprite = new Image();

sprite.onload = function() {

frame1.style.background = frame2.style.background = `url(${sprite.src})`;

document.getElementById('overlay').style.display = 'none';

solution1(); //input range

solution2(); // drag / swipe

solution3(); // canvas

labels.forEach(function(element) {

element.addEventListener('click', function() {

runCanvas = false;

if(this.getAttribute('for') == "sol3")

runCanvas = true;

});

});

};

sprite.src = 'https://serving.photos.photobox.com/\

55967562d176c08ff2d7e23195f94e704faa7feede75617ac5\

905d8dca9295f1a547077a.jpg';

function solution1() {

slider.addEventListener("input", function() {

activeFrame = parseInt(this.value);

frame1.style.backgroundPositionX = `-${activeFrame * frameWidth}px`;

});

}

function solution2() {

frame2.addEventListener('touchstart', (e) =gt; {

xStart = e.touches ? e.touches[0].clientX : e.clientX;

});

frame2.addEventListener('mousedown', (e) =gt; {

xStart = e.touches ? e.touches[0].clientX : e.clientX;

});

frame2.addEventListener('touchend', () =gt; { xStart = null; });

frame2.addEventListener('mouseup', () =gt; { xStart = null; });

frame2.addEventListener("mousemove", move);

frame2.addEventListener("touchmove", move);

}

function move(e) {

if(!xStart)

return;

let xEnd = e.touches ? e.touches[0].clientX : e.clientX;

if (xStart - xEnd gt; .5 * frameWidth / (10 + s2Settings.sensitivity)) {

activeFrame++;

if(activeFrame gt; frames)

activeFrame = 0;

frame2.style.backgroundPositionX = `${activeFrame * frameWidth}px`;

xStart = xEnd;

} else if(xEnd - xStart gt; .5 * frameWidth / (10 + s2Settings.sensitivity)) {

activeFrame--;

if(activeFrame lt; 0)

activeFrame = frames;

frame2.style.backgroundPositionX = `${activeFrame * frameWidth}px`;

xStart = xEnd;

}

}

function solution3() {

frame3.width = frameWidth;

frame3.height = frameHeight;

animate();

}

function animate() {

now = Date.now();

delta = now - then;

if(runCanvas && delta gt; interval) {

if(activeFrame gt; frames)

activeFrame = 0;

else if(activeFrame lt; 0)

activeFrame = frames;

ctx.drawImage(

sprite, activeFrame * frameWidth, 0, frameWidth, frameHeight,

0, 0, frameWidth, frameHeight

);

activeFrame += (s3Settings.reverse) ? -1 : 1;

then = now - (delta % interval);

}

window.requestAnimationFrame(animate);

}

總結(jié)

以上是生活随笔為你收集整理的html照片360度旋转展示,纯js实现360度旋转预览图片特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。