js 实现拖拽旋转相册

<!DOCTYPE html>
<!--设置图片的拖拽事件 不可用-->
<html lang="en" ondragstart="return false"><head><meta charset="UTF-8"><title>3D效果</title><style>body {background-color: #000;}.container {/* perspective 属性定义 3D 元素距视图的距离，以像素计 */perspective: 800px;overflow: hidden;}.box {position: relative;width: 133px;height: 200px;margin: 300px auto;/*搭建3D效果必须的两个属性：一个变换风格变3d，一个场景景深800px*/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)));box-shadow: 0 0 8px #f9f;}p {width: 1200px;height: 1200px;background: -webkit-radial-gradient(center center, 600px 600px, rgba(244, 23, 234, 0.2), rgba(0, 0, 0, 0));border-radius: 100%;position: absolute;left: 50%;top: 102%;margin-left: -600px;margin-top: -600px;transform: rotateX(90deg);}</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=""><p></p></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 yvar 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>

js 实现拖拽旋转相册相关推荐

js实现拖拽+碰撞+重力
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
李炎恢 js教程拖拽上思路解析
李炎恢再讲js教程拖拽上讲到一个登录框,通过鼠标移动登录框到浏览器各个地方,我们现在对李炎恢的怎么想出进行分析: 问题期望是什么? 1.我们通过鼠标点击登录框,然后登录框被移动,松开鼠标,停止移动 ...
js 鼠标拖拽改变div宽度高度
js 鼠标拖拽改变div宽度高度, <!DOCTYPE html> <html><head><meta charset="UTF-8" / ...
原生js实现拖拽上传文件
原生js实现拖拽上传文件 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
原生JS实现拖拽进度条、滚动鼠标显示相应的内容
今天要分享的是运用原生JS实现拖拽进度条.滚动鼠标显示相应的内容,实现效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html><hea ...
原生JS实现拖拽垂直进度条
先看效果图代码如下 <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" ...
Unity3D实现 UI图片拖拽旋转和拖拽移动
拖拽UI旋转 using UnityEngine; using System.Collections; using UnityEngine.EventSystems; public class Rot ...
原生JS实现拖拽翻书特效
给大家分享一个用原生JS实现的拖拽翻书效果图,效果如下: 效果还不错吧,当然还需要两个图片. 1.书本封面. 2.书页实现代码如下,欢迎大家复制粘贴. <!DOCTYPE html> & ...

js 实现拖拽旋转相册

js 实现拖拽旋转相册相关推荐

最新文章

热门文章