javascript - 我怎样才能在我的旋转木马上产生这种悬停效果？-6ren

javascript - 我怎样才能在我的旋转木马上产生这种悬停效果？

转载作者：行者123 更新时间：2023-12-03 07:09:58

基本上，我制作了一个包含 3 张图像的 3D 旋转木马。当用户单击“下一步”和“上一步”按钮时，轮播会来回移动。我在顶部还有一个单独的图像，可以产生这种悬停效果。我想将悬停效果添加到我的旋转木马中的图像上，具有相同的动画、不透明度、文本、大小等。但是，我不知道如何包含它。我怎样才能做到这一点？任何帮助，将不胜感激。这是我的代码。谢谢。

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>

最佳答案

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

关于javascript - 我怎样才能在我的旋转木马上产生这种悬停效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64731620/

文章推荐： javascript - Karate UI 中的 ShadowRoot dom 元素访问问题

文章推荐： javascript - 在 underscore.js 微模板中评估数据的不良做法？

文章推荐： javascript - 从 d3.js 中的文件读取 json 数据不起作用

文章推荐： javascript - 创建元素时滚动到底部

javascript - 执行存在于输入值字段中的 javascript - JavaScript
我有一个 html 格式的表单: 我需要得到 JavaScript在value input 字段执行，但只能通过表单的 submit .原因是页面是一个模板所以我不控制它(不能有
javascript - JavaScript 代码片段正在破坏其他 JavaScript
我管理的论坛是托管软件，因此我无法访问源代码，我只能向页面添加 JavaScript 来实现我需要完成的任务。我正在尝试用超链接替换所有页面上某些文本关键字的第一个实例。我还根据国家/地区代码对这些
javascript - JavaScript 如何使新页面包含更多 JavaScript？
我正在使用 JS 打开新页面并将 HTML 代码写入其中，但是当我尝试使用 document.write() 在新页面中编写 JS 时功能不起作用。显然，一旦看到，主 JS 就会关闭。用于即将打开的
javascript - Javascript 引擎如何在浏览器中执行 Javascript？
提问不是为了解决问题，提问是为了更好地理解系统专家!我知道每当你将 javascript 代码输入 javascript 引擎时，它会立即由 javascript 引擎执行。由于没有看过Engi
javascript - 如何将 JavaScript 变量从一个 JavaScript 文件传递到另一个 JavaScript 文件？
我在一个文件夹中有两个 javascript 文件。我想将一个变量的 javascript 文件传递到另一个。我应该使用什么程序？最佳答案 window.postMessage用于跨文档消息。使
javascript - javascript 中的 javascript 输入问题
我有一个练习，我需要输入两个输入并检查它们是否都等于一个。如果是 console.log 正则 console.log false 我试过这样的事情: function isPositive(fir
javascript - 在加载其他 javascript 库的页面上嵌入 Javascript？
我正在做一个Web应用程序，计划允许其他网站(客户端)在其页面上嵌入以下javascript: 我的网络应用程序位于 http://example.org 。我不能假设客户端网站的页面有 JQue
javascript - 从 Javascript 内部调用 Javascript
目前我正在使用三个外部 JS 文件。我喜欢将所有三个 JS 文件合而为一。尽一切可能。我创建 aio.js 并在 aio.js 中 src="https://code.jquery.com/
javascript - AngularJS/javascript javascript 对象的特殊排序顺序
我有例如像这样的数组: var myArray = []; var item1 = { start: '08:00', end: '09:30' } var item2 = {
javascript - 在 Javascript 内部执行 Javascript？
所以我正在制作一个 Chrome 扩展，它使用我制作的一些 TamperMonkey 脚本。我想要一个“主”javascript 文件，您可以在其中包含并执行其他脚本。我很擅长使用以下行将其他 jav
javascript - 如何将变量从 javascript 移动到 javascript？
我有 A、B html 和 A、B javascript 文件。并且，如何将 A JavaScript 中使用的全局变量直接移动到 B JavaScript 中？示例 JavaScript) va
javascript - 从 javascript 调用 javascript
我需要将以下整个代码放入名为 activate.js 的 JavaScript 中。你能告诉我怎么做吗？ var int = new int({ seconds: 30, mark
javascript - 将变量值从一个 JavaScript 传递到另一个 JavaScript
我已经为我的 .net Web 应用程序创建了母版页 EXAMPLE1.Master。他们的 I 将值存储在 JavaScript 变量中。我想在另一个 JS 文件中检索该变量。示例1.大师:-
javascript - 有没有开源库可以在浏览器中使用 Javascript 来整理 Javascript？
是否有任何库可以用来转换这样的代码: function () { var a = 1; } 像这样的代码: function () { var a = 1; } 在我的浏览器中。因为我在 Gi
javascript - javascript 中的参数列表后缺少语法 javascript 错误 )
我收到语法缺失 ) 错误 $(document).ready(function changeText() { var p = document.getElementById('bidp
javascript - 第一个 JavaScript 完成后启动第二个 JavaScript
我正在制作进度条。它有一个标签。我想调整某个脚本完成的标签。在找到可能的解决方案的一些答案后，我想出了以下脚本。第一个启动并按预期工作。然而，第二个却没有。它出什么问题了？代码如下: HTML:
javascript - 为什么外部 javascript 库会阻止我页面上的 javascript？
这里有一个很简单的问题，我简单的头脑无法回答:为什么我在外部库中加载时，下面的匿名和onload函数没有运行？我错过了一些非常非常基本的东西。 Library.js 只有一行:console.log(
javascript - 如何区分代码内 javascript 和客户端 javascript
我知道 javascript 是一种客户端语言，但如果实际代码中嵌入的 javascript 代码以某种方式与在控制台上运行的代码不同，我会尝试找到答案。让我用一个例子来解释它: 我想创建一个像 Mi
javascript - 将 Javascript 内联到不显眼的 JavaScript？
我如何将这个内联 javascript 更改为 Unobtrusive JavaScript？谢谢! 感谢您的回答，但它不起作用。我的代码是: PHP js文件 document.getElem
javascript - 如何将 JavaScript 对象导出为 JavaScript？
我正在寻找将简单的 JavaScript 对象“转储”到动态生成的 JavaScript 源代码中的最优雅的方法。目的:假设我们有 node.js 服务器生成 HTML。我们在服务器端有一个对象x。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 我怎样才能在我的旋转木马上产生这种悬停效果？