js实现旋转图片轮播
2018-08-18
话不多说,直接上代码
html:
<div id="perspective">
<div id='wrap'>
<img src="images/tingjie.jpg" />
<img src="images/tingjie.jpg" />
<img src="images/tingjie.jpg" />
<img src="images/tingjie.jpg" />
<img src="images/tingjie.jpg" />
<img src="images/tingjie.jpg" />
<img src="images/tingjie.jpg" />
<img src="images/tingjie.jpg" />
<img src="images/tingjie.jpg" />
<img src="images/tingjie.jpg" />
<img src="images/tingjie.jpg" />
<p></p>
</div>
</div>
css:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: #000;
overflow: hidden;
}
#perspective {
perspective: 800px;
}
#wrap {
width: 120px;
/*133:200 4:6 */
height: 180px;
margin: 0 auto;
position: relative;
/*搭建3D效果必须的两个属性:一个变换风格变3d,一个场景景深800px*/
transform-style: preserve-3d;
transform: rotateX(-10deg) rotateY(0deg);
}
#wrap img {
width: 100%;
height: 100%;
position: absolute;
border-radius: 5px;
/*加上圆角*/
box-shadow: 0px 0px 10px #fff;
/*box-shadow 属性向框添加一个或多个阴影*/
-webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
}
#wrap 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>
js:
<script type="text/javascript">
window.onload = function() {
var oWrap = document.getElementById('wrap');
var oImg = oWrap.getElementsByTagName('img');
var oImgLength = oImg.length;
var Deg = 360 / oImgLength;
var nowX, nowY, lastX, lastY, minusX = 0,
minusY = 0;
var roY = 0,
roX = -10;
var timer;
for(var i = 0; i < oImgLength; i++) {
oImg[i].style.transform = 'rotateY(' + i * Deg + 'deg) translateZ(350px)';
oImg[i].style.transition = 'transform 1s ' + (oImgLength - 1 - i) * 0.1 + 's';
}
mTop();
window.onresize = mTop;
function mTop() {
var wH = document.documentElement.clientHeight;
oWrap.style.marginTop = wH / 2 - 180 + 'px';
}
// 拖拽:三个事件-按下 移动 抬起
//按下
document.onmousedown = function(ev) {
ev = ev || window.event;
//鼠标按下的时候,给前一点坐标赋值,为了避免第一次相减的时候出错
lastX = ev.clientX;
lastY = ev.clientY;
//移动
this.onmousemove = function(ev) {
ev = ev || window.event;
clearInterval(timer);
nowX = ev.clientX; // clientX 鼠标距离页面左边的距离
nowY = ev.clientY; // clientY ………………………………顶部………………
//当前坐标和前一点坐标差值
minusX = nowX - lastX;
minusY = nowY - lastY;
//更新wrap的旋转角度,拖拽越快-> minus变化大 -> roY变化大 -> 旋转快
roY += minusX * 0.2; // roY = roY + minusX*0.2;
roX -= minusY * 0.1;
oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';
/*
//生成div,让div跟着鼠标动
var oDiv = document.createElement('div');
oDiv.style.cssText = 'width:5px;height:5px;background:red;position:fixed;left:'+nowX+'px;top:'+nowY+'px';
this.body.appendChild(oDiv);
*/
//前一点的坐标
lastX = nowX;
lastY = nowY;
}
//抬起
this.onmouseup = function() {
this.onmousemove = null;
timer = setInterval(function() {
minusX *= 0.95;
minusY *= 0.95;
roY += minusX * 0.2; // roY = roY + minusX*0.2;
roX -= minusY * 0.1;
oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';
if(Math.abs(minusX) < 0.1 && Math.abs(minusY) < 0.1) {
clearInterval(timer);
}
console.log(minusX);
}, 13);
}
return false;
}
}
</script>
- CentOS7搭建ELK日志集中分析平台
- Centos安装sshfs实现挂载目录
- shell脚本监控磁盘使用率
- Python使用MD5加密字符串
- Spark MLlib之 KMeans聚类算法详解
- Python时间与时间戳转换
- linux配置ssh互信实现免密登陆
- uva--1339 - Ancient Cipher(模拟水体系列)
- Python获得13位unix时间戳
- Centos7下LVM对文件系统进行在线扩容
- centos7编译安装Redis
- hdu----(5023)A Corrupt Mayor's Performance Art(线段树区间更新以及区间查询)
- Redis单线程架构
- hdu----(4521)小明系列问题——小明序列
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 百度站点收录 - 什么叫自动推送
- 虚拟机安装Centos后的一些配置
- CentOS下的JDK安装
- python 技术篇-3行代码搞定图像文字识别,pytesseract库实现
- hadoop2.6.0完全分布式手动安装
- Python 库安装问题:ModuleNotFoundError: No module named 'windows'. 解决方法
- Python各种文件删除函数的功能区分!
- Python 技术篇-轻松操作windows系统电脑鼠标指针移动、点击
- Typora Picgo自动使用图床上传图片
- 【Python】文件的选择性压缩和全压缩,一般人不告诉的实用小技巧!
- 搭建hadoop集群虚拟机试验环境
- PLSQL-简单的语句块及变量的定义
- Python 技术篇-使用PIL库等比例压缩、缩小图片
- linux 安装并配置zsh
- 听音乐不过瘾?自制一个音乐播放器!【附带函数源码】