js实现3D旋转相册
本文实例为大家分享了js实现3D旋转相册的具体代码，供大家参考，具体内容如下
效果展示：
使用图片：
剩余自己随意 图片大小为133*200
代码展示：
<!DOCTYPE html>
<!--设置图片的拖拽事件 不可用-->
<html lang="en" ondragstart="return false">
<head>
<meta charset="UTF-8">
<title>3D效果</title>
<style>
* {
background-color: #000;
}
.container {
border: 1px solid yellow;
perspective: 800px;
overflow: hidden;
}
.box {
position: relative;
border: 1px solid #f00;
width: 133px;
height: 200px;
margin: 300px auto;
transform-style: preserve-3d;
transform:rotateX(-20deg) rotateY(0deg);
}
img {
position: absolute;
/*设置图片倒影效果*/
-webkit-box-reflect:below 5px -webkit-gradient(linear,left top, left bottom,from( transparent),color-stop(40%,transparent),to(rgba(250,250,250,0.4)));
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/6.jpg" alt="">
<img src="img/7.jpg" alt="">
<img src="img/8.jpg" alt="">
<img src="img/9.jpg" alt="">
<img src="img/10.jpg" alt="">
<img src="img/11.jpg" alt="">
</div>
</div>
<script>
// a 获取所有 img 元素
var mimg = document.querySelectorAll("img");
var mlength = mimg.length;
// 动态获取 图片的旋转角度
var mdeg = 360/mlength;
//获取box 容器
var mbox = document.querySelector(".box");
/*页面加载后执行。。效果*/
window.onload= function () {
// 1 图片旋转动画
for(var i = 0;i<mlength;i++){
// console.log(mimg);
//每张图片 1 60 2 120 3 180 4 240 60为图片的平分角
mimg[i].style.transform = "rotateY("+(mdeg*i)+"deg) translateZ(350px)";
// 添加过渡效果 动画执行多长时间 多久后开始执行动画 此时的效果 从最后一张开始动画
// console.log(mlength-i);
mimg[i].style.transition = "1s "+(mlength-i)*0.1+"s"; // 0.1 动画调节
//从第一张开始动画
// mimg[i].style.transition = "1s "+i+"s";
}
// 获取鼠标点的位置 获取 差值 改变 转换的rotate： x y
var newX,newY,lastX,lastY,cvalueX,cvalueY, rotX=-20,rotY=0;
// 鼠标滑动后改变效果 (使用鼠标 按下 替换点击事件)
document.onmousedown = function (e) {
// 鼠标点击
// console.log("点击");
lastX = e.clientX;
lastY = e.clientY;
// 鼠标移动
this.onmousemove = function (e) {
// console.log("移动");
newX = e.clientX;
newY = e.clientY;
console.log(newX +" "+newY);
//获取移动的差值
cvalueX = newX-lastX;
cvalueY = newY-lastY;
//获取旋转的角度
rotX -= cvalueY; /*因为要向前运动所以是负值*/
rotY += cvalueX;
// 将角度添加上 img容器
mbox.style.transform = "rotateX("+rotX*0.1+"deg) rotateY("+rotY*0.1+"deg)"
// 差值太大（转动太快） 调节每次的差值是和上一次差 而不是之前差（初始值的差）
lastX = newX;
lastY = newY;
}
// 鼠标抬起
this.onmouseup = function () {
// console.log("抬起");
// 要停止移动的方法
this.onmousemove = null;
}
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript制作3D旋转相册
本文实例为大家分享了js 3D旋转相册展示的具体代码,供大家参考,具体内容如下 源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{padding:0;margin:0; font-family: "Proxima Nova&qu
-
javascript椭圆旋转相册实现代码
功能说明: 1.支持自动和手动两种模式:自动模式下自动旋转展示,手动模式下通过鼠标选择当前图片,或通过提供的接口选择上一张/下一张图片. 2.可自行添加旋转的缓动模式,默认模式为:匀速,先快后慢,先慢后快. 3.可自定义旋转轨迹的宽和高. 4.支持IE6 7 8 9 10 firefox chrome等浏览器. 效果预览: 实现原理: 根据对图片在椭圆轨迹上的运动,动态改变缩放大小,实现立体的视觉效果. 代码分析: 复制代码 代码如下: init:function(id,options){ va
-
js实现3D旋转相册
本文实例为大家分享了js实现3D旋转相册的具体代码,供大家参考,具体内容如下 效果展示: 使用图片: 剩余自己随意 图片大小为133*200 代码展示: <!DOCTYPE html> <!--设置图片的拖拽事件 不可用--> <html lang="en" ondragstart="return false"> <head> <meta charset="UTF-8"> <tit
-
JS实现3D图片旋转展示效果代码
本文实例讲述了JS实现3D图片旋转展示效果代码.分享给大家供大家参考.具体如下: 这是一段JavaScript代码,围绕成3D模型样式的JavaScript图片旋转展示代码,这里为了演示方便,将图片替换成了数字,预留出了图片的位置,这样速度快些,会HTML的朋友都知道用时候该怎么做.本图片旋转需要手功控制,每点击一下,图片旋转一次,很方便. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3d-pic-scroll-show-style-c
-
js实现3D粒子酷炫动态旋转特效
js实现3D粒子酷炫动态旋转特效(效果比较酷炫,中途不仅有形态的变换,还有颜色的变化,希望大家能够喜欢) 代码实现过程中的静态截图 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTEN
-
three.js中3D视野的缩放实现代码
通过Threejs基础学习--修改版知道创建一个相机的相关知识点 var camera = new THREE.PerspectiveCamera( fov, aspect , near,far ); 视野角:fov 这里视野角(有的地方叫拍摄距离)越大,场景中的物体越小,视野角越小,场景中的物体越大 纵横比:aspect (3d物体的宽/高比例) 相机离视体积最近的距离:near 相机离视体积最远的距离:far 其中fov视野角(拍摄距离)越大,场景中的物体越小.fov视野角(拍摄距离)越
-
微信小游戏之使用three.js 绘制一个旋转的三角形
three.js是一个可以使用javascript绘制3d图形的库,它对WebGL的api进行封装,使开发更加方便,就像jQuery对DOM的api进行封装一样.接下来就记录一下在小游戏中绘制一个 旋转的三角形的步骤: 一. 初始化项目 下载微信官方的开发者工具,然后新建项目 appid选择测试号即可,项目路径自行指定 用编辑器打开项目,得到如下目录: 然后除了game.js,game.json, project.config.json全部删除,并把game.js中的内容清空. game.js是
-
JavaScript实现的3D旋转魔方动画效果实例代码
JS1K是JavaScript编程竞赛--参加竞赛的规则很简单,脚本必须小于1K,竞赛网站开始也只是为了娱乐,却意外地收到了很多优秀的作品. 这是2016年JS1k上传的作品,用几十行代码实现的一个3D旋转魔方: 代码如下: function z(t, e) { return t? e? t.appendChild(e) : "width:"+t+"px;height:"+t+" px;position:absolute;" : document
-
深入解析JS实现3D标签云的原理与方法
本文实例讲述了深入解析JS实现3D标签云的原理与方法.分享给大家供大家参考,具体如下: 最近开始用canvas搞3D了,搞得也是简单的东西,就是球体转圈.做出来后,突然想起以前看过的3D标签云,在以前觉得真心狂拽酷炫叼啊,当时也确实不知道怎么在平面上模拟3D,所以也就没去搞了.现在刚好用了canvas搞3D,也发现,好像3D标签云也差不多,然后就写了一下. 具体怎么做呢,先说一下原理,3D标签云就是做一个球面,然后再球面上取均匀分布的点,把点坐标赋给标签,再根据抽象出来的Z轴大小来改变标签的字体
-
jQuery实现炫丽的3d旋转星空效果
本文实例讲述了jQuery实现炫丽的3d旋转星空效果.分享给大家供大家参考,具体如下: 该特效也是在Jquery插件库中找到的,感觉效果不错,说不定以后项目中要有绚丽的星空背景,拿来即用,收藏了下. 下载解压后的目录结构 index.html页面代码: <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv=&
-
vue页面引入three.js实现3d动画场景操作
vue中安装Three.js 近来无聊顺便研究一些关于3D图形化库.three.js是JavaScript编写的WebGL第三方库.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它通过控制相机.视角.材质等相关属性来创造大量3D动画场景. 我们开始引入three.js相关插件. 1.首先利用淘宝镜像,操作命令为: cnpm install three 2.接下来利用npm安装轨道控件插件: 关注我的微信公众号[前端基础教程从0开始],加我微信,可以免费为您解答问题.回复"1&qu