这是一款纯js实现360度旋转预览图片特效。该js特效仅使用120行代码,即可实现通过滑块、或鼠标手动360度旋转图片,以及自动360度旋转图片的效果。
使用方法
HTML结构
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); }
该纯js实现360度旋转预览图片特效的codepen网址为:https://codepen.io/_massimo/pen/zVYVNb
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!