js图片轮播旋转木马效果
效果图：
实现代码：
js html copyable"><!DOCTYPE html><htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<scriptsrc="../js/jquery.js"></script>
</head>
<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
/* 径向渐变 - 颜色结点均匀分布 */
background-image: radial-gradient(circle at center center,rgba(252, 22, 242,0.2),rgba(0,0,0));
perspective: 1000px;
}
.box {
position: relative;
width: 120px;
height: 160px;
margin: 300px auto;
/* preserve-3d：所有子元素在3D空间中呈现 */
transform-style: preserve-3d;
}
.boximg {
width: 100%;
height: 100%;
position: absolute;
/* 生成倒影效果 */
-webkit-box-reflect: below 10px-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%);
/* transition: all 1s linear; */
}
/* .box .img1 {
transform: rotateY(30deg) translateZ(300px);
transition: transform 0.5s linear 0.1s;
} */
</style>
<body>
<divclass="box">
<imgclass="img1"src="./img/1.jpg"alt="">
<imgsrc="./img/2.jpg"alt="">
<imgsrc="./img/3.jpg"alt="">
<imgsrc="./img/4.jpg"alt="">
<imgsrc="./img/5.jpg"alt="">
<imgsrc="./img/6.jpg"alt="">
<imgsrc="./img/7.jpg"alt="">
<imgsrc="./img/8.jpg"alt="">
<imgsrc="./img/1.jpg"alt="">
<imgsrc="./img/2.jpg"alt="">
<imgsrc="./img/3.jpg"alt="">
<imgsrc="./img/4.jpg"alt="">
</div>
</body>
</html>
<script>
// 初始化实现发牌效果
window.onload = function () {
var img = $('img');
var length = img.length;
var deg = 360 / length;
for (var i = 0; i < length; i++) {
$('img').eq(i).css({
'transform': 'rotateY(' + i * deg + 'deg) translateZ(300px)',
'transition': 'transform 0.5s linear ' + (length - 1 - i) * 0.1 + 's',
})
};
bindRotateEvent();
}
// 绑定旋转效果事件
functionbindRotateEvent() {
var body = $('body');
var rotateX = 0, rotateY = 0;
var startX, startY, nowX, nowY, changeX, changeY;
var timer; // 缓冲效果定时器
body.on('mousedown', function(e) {
clearInterval(timer);
startX = e.clientX;
startY = e.clientY;
// 鼠标按下后才绑定mousemove事件(鼠标移动)
body.on('mousemove', function(e) {
nowX = e.clientX;
nowY = e.clientY;
// 移动幅度
changeX = nowX - startX;
changeY = nowY - startY;
// console.log(`左右移动了${changeX}，上下移动了${changeY}`);
// 核心：计算rotateX、rotateY，按着比例转动起来
rotateX -= changeY * 0.3; // rotateX: 沿着X轴的3D旋转，即用上下移动的幅度changeY来计算
rotateY += changeX * 0.3; // rotateY: 沿着Y轴的3D旋转，即用左右移动的幅度changeX来计算
setBoxTarnsformRotate(rotateX, rotateY); // 设置box的transform属性
startX = nowX;
startY = nowY;
})
}).on('mouseup', function(e) {
body.off('mousemove'); // 鼠标松开取消绑定mousemove事件
// 添加缓冲效果
timer = setInterval(function() {
// 缓冲：改变越变越小
changeX = changeX * 0.95;
changeY = changeY * 0.95;
rotateX -= changeY * 0.5;
rotateY += changeX * 0.5;
setBoxTarnsformRotate(rotateX, rotateY); // 设置box的transform属性
// 小到一定程度清除计时器
if (Math.abs(changeX) < 0.1 && Math.abs(changeY) < 0.1) {
clearInterval(timer);
}
}, 10);
})
}
functionsetBoxTarnsformRotate(rotateX, rotateY) {
// 旋转改变box的transform属性
var box = $('.box');
// 旋转一圈之后重新开始计算
rotateX = rotateX % 360;
rotateY = rotateY % 360;
// console.log(`rotateX：${rotateX}，rotateY：${rotateY}`);
// 设置box的transform属性
box.css('transform', 'rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)');
}
</script>
以上是 js图片轮播旋转木马效果 的全部内容， 来源链接： utcz.com/a/19094.html
