圖片輪播實現旋轉木馬的效果
效果圖： 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 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
