图片轮播实现旋转木马的效果
效果图： javascript
实现代码：css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../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; } .box img { 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>
<div class="box">
<img class="img1" 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/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./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(); } // 绑定旋转效果事件 function bindRotateEvent() { 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); }) } function setBoxTarnsformRotate(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>
复制代码
相关文章
- 1. 旋转木马轮播图：实用大气的轮播效果
- 2. 【前端】javascript+jQuery实现旋转木马效果轮播图slider
- 3. js实现旋转木马轮播图
- 4. 旋转木马轮播图
- 5. JS旋转木马图片轮播
- 6. 原生JS实现"旋转木马"效果的图片轮播插件
- 7. JQ 实现轮播图（3D旋转图片轮播效果）
- 8. SwiftUI中实现Snap Carousel效果旋转木马轮播滚动
- 9. vue实现旋转木马轮播
- 10. 原生JS实现旋转木马轮播图特效
- 更多相关文章...
- • SVG 模糊效果 - SVG 教程
- • Markdown 图片 - Markdown 教程
- • ☆基于Java Instrument的Agent实现
- • Spring Cloud 微服务实战(三) - 服务注册与发现
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
