我怎樣才能在我的旋轉木馬上產生這種懸停效果？
[英]How can I produce this hover effect onto my carousel?
問題描述
基本上，我制作了一個 3D 旋轉木馬，其中包含 3 個圖像。 當用戶單擊“下一個”和“上一個”按鈕時，輪播會前后移動。 我在頂部還有一個單獨的圖像，可以產生這種懸停效果。 我想將懸停效果包含在我的旋轉木馬中的圖像上，具有相同的動畫、不透明度、文本、大小等。 但是，我不知道如何包含它。 我怎樣才能做到這一點？ 任何幫助，將不勝感激。 這是我的代碼。 謝謝。
var carousel = $(".carousel"), currdeg = 0; $(".next").on("click", { d: "n" }, rotate); $(".prev").on("click", { d: "p" }, rotate); function rotate(e){ if(e.data.d=="n"){ currdeg = currdeg - 120; } if(e.data.d=="p"){ currdeg = currdeg + 120; } carousel.css({ "-webkit-transform": "rotateY("+currdeg+"deg)", "-moz-transform": "rotateY("+currdeg+"deg)", "-o-transform": "rotateY("+currdeg+"deg)", "transform": "rotateY("+currdeg+"deg)" }); }
.container { margin: 0 auto; width: 250px; height: 200px; position: relative; top: 500px; perspective: 1000px; } .carousel { height: 100%; width: 100%; position: absolute; transform-style: preserve-3d; transition: transform 1s; } .item { display: block; position: absolute; background: #000; width: 250px; height: 200px; line-height: 200px; font-size: 5em; text-align: center; color: #FFF; opacity: 0.95; } .a { transform: rotateY(0deg) translateZ(250px); } .b { transform: rotateY(120deg) translateZ(250px); } .c { transform: rotateY(240deg) translateZ(250px); } .next, .prev { color: #444; position: absolute; top: 500px; padding: 1em 2em; cursor: pointer; background: #CCC; border-radius: 5px; border-top: 1px solid #FFF; box-shadow: 0 5px 0 #999; transition: box-shadow 0.1s, top 0.1s; } .next:hover, .prev:hover { color: #000; } .next:active, .prev:active { top: 504px; box-shadow: 0 1px 0 #999; } .next { right: 5em; } .prev { left: 5em; } .content { position: relative; width: 100%; margin-left: auto; margin-right: auto; max-width: 400px; } .container .title{ color: #1a1a1a; text-align: center; margin-bottom: 10px; } .content .content-overlay { background: rgba(0,0,0,0.7); position: absolute; height: 99%; width: 100%; opacity: 0; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .content:hover .content-overlay{ opacity: 1; } .content-image{ width: 100%; } .content-details { position: absolute; text-align: center; padding-left: 1em; padding-right: 1em; width: 100%; top: 50%; left: 50%; opacity: 0; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .content:hover .content-details{ top: 50%; left: 50%; opacity: 1; } .content-details h3{ color: #fff; font-weight: 500; letter-spacing: 0.15em; margin-bottom: 0.5em; text-transform: uppercase; } .content-details p{ color: #fff; font-size: 0.8em; } .fadeIn-bottom{ top: 80%; } .content { position: relative; width: 100%; margin-left: auto; margin-right: auto; max-width: 400px; } .content .content-overlay { background: rgba(0,0,0,0.7); position: absolute; height: 99%; width: 100%; opacity: 0; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .content:hover .content-overlay{ opacity: 1; } .content-image{ width: 100%; } .content-details { position: absolute; text-align: center; padding-left: 1em; padding-right: 1em; width: 100%; top: 50%; left: 50%; opacity: 0; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .content:hover .content-details{ top: 50%; left: 50%; opacity: 1; } .content-details h3{ color: #fff; font-weight: 500; letter-spacing: 0.15em; margin-bottom: 0.5em; text-transform: uppercase; } .content-details p{ color: #fff; font-size: 0.8em; } .fadeIn-bottom{ top: 80%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="style.css" rel="stylesheet" type="text/css"> <title>Document</title> </head> <body> <div class="content"> <a href="#open-modal"> <div class="content-overlay"></div> <img class="content-image" src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2014/03/25/12/eiffel.jpg"> <div class="content-details fadeIn-bottom"> <h3 class="content-title">Eiffel Tower</h3> </div> </a> </div> <div class="container"> <div class="carousel"> <div class="item a"><img src="https://www.insidehook.com/wp-content/uploads/2019/08/HERO-3.jpg?fit=1200%2C750" width="250px" height="200px"></div> <div class="item b"><img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2014/03/25/12/eiffel.jpg" width="250px" height="200px"></div> <div class="item c"><img src="https://nypost.com/wp-content/uploads/sites/2/2019/12/robberies-serious-crimes-spike-in-central-park-this-year.jpg?quality=80&strip=all" width="250px" height="200px"></div> </div> </div> <div class="next">Next</div> <div class="prev">Prev</div> <script src="script.js"></script> </body> </html>
1 個解決方案
解決方案1
1 已采納 2020-11-07 21:58:29
對於解決方案，我必須對 css、html 進行一些更改並修復您的 js 代碼以確定活動幻燈片。
這樣的結果有必要嗎？
var carousel = $(".carousel"), currdeg = 0, current = 0; $(".next").on("click", {d: "n"}, rotate); $(".prev").on("click", {d: "p"}, rotate); function rotate(e) { $(carousel.find('.active')).removeClass('active'); if (e.data.d == "n") { currdeg = currdeg - 120; current = (current + 1) % carousel.find('.item').length; } if (e.data.d == "p") { currdeg = currdeg + 120; current = (current - 1 + carousel.find('.item').length) % carousel.find('.item').length; } $(carousel.find('.item')[current]).addClass('active'); carousel.css({ "-webkit-transform": "rotateY(" + currdeg + "deg)", "-moz-transform": "rotateY(" + currdeg + "deg)", "-o-transform": "rotateY(" + currdeg + "deg)", "transform": "rotateY(" + currdeg + "deg)" }); }
.container { margin: -100px auto; width: 250px; height: 200px; position: relative; top: 500px; perspective: 1000px; } .carousel { height: 100%; width: 100%; position: absolute; transform-style: preserve-3d; transition: transform 1s; } .item { display: block; position: absolute; background: #000; width: 250px; height: 200px; line-height: 200px; font-size: 5em; text-align: center; color: #FFF; /*opacity: 0.95;*/ } .item.active { cursor: pointer; } .a { transform: rotateY(0deg) translateZ(250px); } .b { transform: rotateY(120deg) translateZ(250px); } .c { transform: rotateY(240deg) translateZ(250px); } .next, .prev { color: #444; position: absolute; top: 500px; padding: 1em 2em; cursor: pointer; background: #CCC; border-radius: 5px; border-top: 1px solid #FFF; box-shadow: 0 5px 0 #999; transition: box-shadow 0.1s, top 0.1s; } .next:hover, .prev:hover { color: #000; } .next:active, .prev:active { top: 504px; box-shadow: 0 1px 0 #999; } .next { right: 5em; } .prev { left: 5em; } .content { position: relative; width: 100%; margin-left: auto; margin-right: auto; max-width: 400px; } .container .title{ color: #1a1a1a; text-align: center; margin-bottom: 10px; } .carousel .content-overlay, .content .content-overlay { background: rgba(0,0,0,0.7); position: absolute; height: 100%; width: 100%; opacity: 0; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .content:hover .content-overlay{ opacity: 1; } .carousel .item.active:hover .content-overlay{ opacity: 1; } .content-image{ width: 100%; } .content-details { position: absolute; text-align: center; padding-left: 1em; padding-right: 1em; width: 100%; top: 50%; left: 50%; opacity: 0; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .content:hover .content-details{ top: 50%; left: 50%; opacity: 1; } .content-details h3{ color: #fff; font-weight: 500; letter-spacing: 0.15em; margin-bottom: 0.5em; text-transform: uppercase; } .content-details p{ color: #fff; font-size: 0.8em; } .fadeIn-bottom{ top: 80%; } .content { position: relative; width: 100%; margin-left: auto; margin-right: auto; max-width: 400px; } .content .content-overlay { background: rgba(0,0,0,0.7); position: absolute; height: 99%; width: 100%; opacity: 0; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .content:hover .content-overlay{ opacity: 1; } .content-image{ width: 100%; } .content-details { position: absolute; text-align: center; padding-left: 1em; padding-right: 1em; width: 100%; top: 50%; left: 50%; opacity: 0; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .content:hover .content-details{ top: 50%; left: 50%; opacity: 1; } .content-details h3{ color: #fff; font-weight: 500; letter-spacing: 0.15em; margin-bottom: 0.5em; text-transform: uppercase; } .content-details p{ color: #fff; font-size: 0.8em; } .fadeIn-bottom{ top: 80%; } .carousel_content-details { position: absolute; text-align: center; width: 100%; top: 50%; left: 50%; opacity: 0; margin: 0; padding: 0; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .carousel .item.active:hover .carousel_content-details{ top: 50%; left: 50%; opacity: 1; } .carousel_content-details h3{ color: #fff; font-size: 24px; font-weight: 500; letter-spacing: 0.15em; margin-bottom: 0.5em; text-transform: uppercase; margin: 0; padding: 0; } .carousel_fadeIn-bottom{ top: 50%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="style.css" rel="stylesheet" type="text/css"> <title>Document</title> </head> <body> <div class="content"> <a href="#open-modal"> <div class="content-overlay"></div> <img class="content-image" src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2014/03/25/12/eiffel.jpg"> <div class="content-details fadeIn-bottom"> <h3 class="content-title">Eiffel Tower</h3> </div> </a> </div> <div class="container"> <div class="carousel"> <div class="item a active"> <div class="content-overlay"></div> <img src="https://www.insidehook.com/wp-content/uploads/2019/08/HERO-3.jpg?fit=1200%2C750" width="250px" height="200px"> <div class="carousel_content-details carousel_fadeIn-bottom"> <h3 class="carousel_content-title">Text 1</h3> </div> </div> <div class="item b"> <div class="content-overlay"></div> <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2014/03/25/12/eiffel.jpg" width="250px" height="200px"> <div class="carousel_content-details carousel_fadeIn-bottom"> <h3 class="carousel_content-title">Text 2</h3> </div> </div> <div class="item c"> <div class="content-overlay"></div> <img src="https://nypost.com/wp-content/uploads/sites/2/2019/12/robberies-serious-crimes-spike-in-central-park-this-year.jpg?quality=80&strip=all" width="250px" height="200px"> <div class="carousel_content-details carousel_fadeIn-bottom"> <h3 class="carousel_content-title">Text 3</h3> </div> </div> </div> </div> <div class="next">Next</div> <div class="prev">Prev</div> <script src="script.js"></script> </body> </html>
jQuery：如何編輯此代碼以產生淡入淡出效果而不是滑動效果？
[英]jQuery: How can I edit this code to produce a fade effect instead of a sliding effect?
如何實現hover效果？ 具有 hover 的一個元素對另一個行為有影響嗎？
[英]How can I achieve hover effect? One element with hover influence on behaviour another?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.