首页猿问如何在我的轮播上产生这种悬停效果？

如何在我的轮播上产生这种悬停效果？

JavaScript

吃鸡游戏 2023-07-14 15:14:13

基本上，我制作了一个 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)" });}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!DOCTYPE html><html><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 回答

拉莫斯之舞

TA贡献1820条经验获得超10个赞

对于解决方案，我必须对 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%;

}

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

<h3 class="content-title">Eiffel Tower</h3>

</div>

</a>

</div>

</div>

</div>

</div>

</body>

</html>

反对回复 2023-07-14

1 回答
0 关注
92 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

如何在我的轮播上产生这种悬停效果？

如何在我的轮播上产生这种悬停效果？

1 回答

添加回答