html5图片自动翻转,纯js实现360度旋转预览图片特效
这是一款纯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);
}
html5图片自动翻转,纯js实现360度旋转预览图片特效相关推荐
- js产品360度旋转预览图片插件
下载地址 纯js实现的产品360度旋转预览图片插件.该js特效仅使用120行代码,即可实现通过滑块.或鼠标手动360度旋转图片,以及自动360度旋转图片的效果. dd:
- html实现360展示图片,js html5 360度全景图片预览效果
特效描述:js html5 360度全景图片 预览效果.html5实现360度全景,html5 720度全景图,html5全景图,html5全景图源代码,html5 3d全景,360度全景图,3d36 ...
- vue 项目中使用three.js实现vr360度全景图片预览
vue 项目中使用three.js实现vr360度全景图片预览 当前demo使用的three.js为0.115.0版本 项目中安装three npm install three 安装完成再组件如下导入 ...
- iOS开发,利用PanoramaGL生成360度全景预览图,附选择本地全景图片并生成全景预览...
前言 初做全景项目,涉及到了360度全景展示(也可以是720度的旋转),查找了很多资料,很多都是用PanoramaGL这个库实现的,本人也踩了一下坑,下面我简单的总结一下. 初识PanoramaGL ...
- ajax js图片上传到php,Ajax上传并预览图片(附代码)
这次给大家带来Ajax上传并预览图片(附代码),Ajax上传并预览图片的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 直接上最简单的 一种 ajax 异步上传图片,并预览 html: 图片上 ...
- firefox js服务器上怎么显示图片的绝对路径,js兼容火狐显示上传图片预览效果的方法...
本文实例讲述了js兼容火狐显示上传图片预览效果的方法.分享给大家供大家参考.具体实现方法如下: Image preview example div {width:100px;height:100px; ...
- JS图片360度全景预览插件
下载地址 通过令人惊叹的360视角吸引您的客户,让您的产品充满震撼.JS Cloudimage 360 View 是一种简单的交互式资源,可用于提供产品的虚拟浏览. dd:
- java 图片上一张 下一张_java实现预览图片,点击实现下一张
项目上需要实现图片预览功能,页面展示图片的预览小图,点击时弹出层展示原图,可以点击上一张和下一张等效果 1.本文将简单具体介绍实现的全过程,前后台代码和需要用到的插件 2.先上效果图 加载页面的效果 ...
- Unity做360度全景预览,效果类似pano2vr导出的效果或720云做的效果
上学期间在自学unity,最近需要做一个全景图的效果,鼠标拖动摄像机自旋转,网上查了很久终于找到http://blog.csdn.net/u010476348/article/details/6806 ...
最新文章
- Tomcat - Tomcat 网络通信模型剖析 并发参数解读
- java将naso注册成计算机服务_2018计算机二级考试Java语言每日一练 8月2日
- CUDA内存分配、释放、传输,固定内存
- npm的安装和更新---npm工作笔记002
- java io操作压缩文件_Java操作zip-压缩和解压文件
- SSAS: Display measures in Rows
- win10 oracle安装
- Windows电脑云便签敬业签左边的分类怎么展开?
- 局域网组网 | 交换机常用命令
- 摄影测量简答题和作图题
- 增强版在线LEFSe分析和可视化鉴定标志性基因或物种
- java+epub+阅读器_java – 转到epub阅读器页面(PageTurner)
- win10支持8t 硬盘_最快最简单!Win10 正式版硬盘安装方法详解
- CSDN博客放阿里妈妈广告代码的方法
- docker Aria2容器下载加速Aria2-pro+AriaNg 增加 BT-tracker
- 局域网常用的几种网络拓扑结构及其特点。
- git 简单命令使用
- xp下载的java8_windows xp下安装java8(jdk8) 看完就明白
- PS 之AD命令之Get-ADuser!
- 陈远:兴趣是永远的老师