html照片360度旋转展示,纯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);
}
html照片360度旋转展示,纯js实现360度旋转预览图片特效相关推荐
- html5图片自动翻转,纯js实现360度旋转预览图片特效
这是一款纯js实现360度旋转预览图片特效.该js特效仅使用120行代码,即可实现通过滑块.或鼠标手动360度旋转图片,以及自动360度旋转图片的效果. 使用方法 HTML结构 import Roll ...
- js产品360度旋转预览图片插件
下载地址 纯js实现的产品360度旋转预览图片插件.该js特效仅使用120行代码,即可实现通过滑块.或鼠标手动360度旋转图片,以及自动360度旋转图片的效果. dd:
- oracle如何上传图片,js实现上传图片之上传前预览图片
上传图片对图片进行一下预览,可以了解图片上传后大概会是什么样子,此功能用js实现,然后在fileupload控件的change事件中调用,这样当用fileupload选择完图片以后,图片就会自动显示出 ...
- 本地预览图片html和js例子
本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
- js上传视频,预览视频
js上传视频,预览视频 <videostyle="width:300px; height:auto;object-fit: fill;"playsinlinecontrols ...
- JS实现上传图片的三种方法并实现预览图片功能
在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面: 另一种思路是,直接在本地 ...
- firefox js服务器上怎么显示图片的绝对路径,js兼容火狐显示上传图片预览效果的方法...
本文实例讲述了js兼容火狐显示上传图片预览效果的方法.分享给大家供大家参考.具体实现方法如下: Image preview example div {width:100px;height:100px; ...
- H5开发:使用H5、CSS、JS、JQUERY实现从本地选择图片、预览图片、上传图片列表
需求描述 使用H5.CSS.JS.JQUERY 点击添加图片按钮,从本地选择图片(同名图片不可重复选择),在页面预览选中的图片 点击图片查看大图,点击图片右上角"×"删除此图 点击 ...
- 一个使用js做的一个PDF预览PDF标注(在线批注)工具
一个使用js做的一个PDF预览&PDF标注工具 核心主要使用pdf.js以及操作canvas 目前支持web端,windows端,mac端,可npm包引入项目 目前支持的功能有大文件预览.缩略 ...
- 纯手写table展示树形数据,实现浏览器打印预览功能
更新: 略显尴尬,在测试进行了各种数据测试之后,发现处理数据还是有些问题,有问题才能进步嘛,哈哈哈,还好发现及时,今天下午又进行了修改,对合并数据的地方修改了很多,详细内容见新的dealData方法: ...
最新文章
- 收藏 | 深度学习在计算机视觉领域的应用总结
- 手撕一个spirng IoC的过程
- 1. nginx扩展——ngx_lua 模块简介、安装
- linux下mysql服务架设_linux下源码搭建php环境之mysql(一)
- EPERM: operation not permitted, Please run SwitchHosts
- iOS swift语言生成条形码,可一次性生成多个!并带文字
- visual studio code .net 开发
- centos7安装zabbix时的一些注意事项
- 免登录实现CSDN博客代码复制(2021.9.26)
- vue项目中使用百度离线地图
- 完全仿京东电商小程序的开源项目,可赚佣金
- 《2013小企业会计准则》的适用范围
- box-sizing失效情况
- java使用ffmpeg将视频转码
- 为了推动仓库无纸化操作我们做了什么?
- 天勤python_天勤量化策略库:R-Breaker策略(难度:初级)
- 温度自动控制系统matlab,某温度控制系统的MATLAB仿真
- MySQL学习(四)——MySQL的登录
- spring spel 获取环境变量
- 合并结果集子查询案列
热门文章
- Mysql性能调优之max_allowed_packet
- 425 Failed to establish connection解决方案
- 招商银行笔试题之鸡鸭分类问题
- DDU(Display Driver Uninstaller) 18.0.3.5 显卡驱动彻底卸载清理工具,支持卸载NVIDIA, AMD, Intel
- a标签实现下载图片功能
- C++的重载(overload)与重写(override)
- android 越来越慢,为什么安卓手机总是越用越慢?怎么...
- 使用flutter控制蓝牙通讯_使用Flutter控制蓝牙通讯
- 江苏省考计算机类包括哪些专业,2019年江苏省公务员考试计算机类包括哪些专业..._公务员考试_帮考网...
- nuvoton uboo2013引导流程 1 - 配置