javascript - Div 与 css 和后退按钮不正确对齐

Question

在我正在工作的网站上，我希望用户滚动并单击图标以“打开”它们。例如，如果用户单击“关于我们”图标，它将有一段信息，他们可以在其中向上滚动和下文字。虽然当我这样做时我无法弄清楚两件事。一个如何在用户单击图标并打开信息时添加后退按钮(用户单击关于我们的图标，图标消失并出现文本，然后单击后退以查看其他图标)。尽管发生错误时，我试图让它淡入段落。第二个问题是如何将信息居中放在括号之间，我尝试使用 CSS，但这不起作用。

document.body.style.overflow = "hidden";
//the key strokes for the up and down keys

// Set up our container
const el = document.querySelector("#theMiddle");
// Create new SlotMachine
const slot = new SlotMachine(el, {});


document.onkeydown = checkKey;
function checkKey(e) {
  e = e || window.event;
  //Secret Code: EADWEARD
  anime({
    targets: "div.right",
    translateX: {
      value: 200,
  duration: 500
    }
  });
  anime({
    targets: "div.left",
    translateX: {
  value: -200,
  duration: 500
    }
  });

  if (e.keyCode == "40") {
//this is down
//this will open it up
slot.prev();

  } else if (e.keyCode == "38") {
    slot.next();
  }
}

//Scroll detection occurs here, without the scrollbar
$("html").on("mousewheel", function(e) {
  anime({
targets: "div.right",
translateX: {
  value: 200,
  duration: 500
}
  });
  anime({
    targets: "div.left",
translateX: {
  value: -200,
  duration: 500
    }
  });
  var delta = e.originalEvent.wheelDelta;
  if (delta < 0) {
    //This is for the scrolling down
    // animation opens up the brakets

    slot.prev();

  }
  if (delta > 0) {
slot.next();
  }
});


//this is for detecting clicks  for the divs in the middle div
// 1 = the 2nd image , 2 = the  3rd image
$(".middle div").click(function(){
  if($(this).index() == '1'){
console.log("the fucks");

$('#aboutID').fadeOut("slow", function(){
var div = $("<p id='foo'>Lorem ipsum dolor sit amet, consectetur adipisicing         elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                                                                         </p> ").hide();
var but = $("<button id='secondbutton'>Second button</button>");
$('#theMiddle').replaceWith(div);
$('#foo').fadeIn("slow");
$('#secondbutton').fadeIn("slow");
});



  }if($(this).index() == '2'){
console.log("jobs page");
  }
});

.box{
  position: relative;
  width: 100px;
  height: 100px;
  margin: 4px;
  display: inline-block;

}

div.left {
  position: absolute;
  left: 390px;
}

div.middle {
  position: absolute;
  left: 490px;
  top: 150px;
}

div.right {
  position: absolute;
  left: 870px;
}

#left,#right{
  width: 290px;
  float: left;
}

#middle{
  width: auto;
  float: left;
}
#theMiddle{
  left: 490px;
  top: 150px;
}
#foo {
  height: 300px;
  width: 400px;
  left: 490px;
  top: 150px;
  overflow-y: scroll
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
  <title>Underscores</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://cdn.jsdelivr.net/npm/jquery-    
    slotmachine@4.0.0/dist/jquery.slotmachine.min.css">
  </style>
  <script     
src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js">
  </script>
  <script     
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>


</head>

<body>


  <div id="left" class="left">
    <img src="https://s3.amazonaws.com/underscores.xyz/images/left.png"     
alt="">
  </div>

  <div class="middle" id="theMiddle" style="width: 400px; height: 300px">
<div><img 
src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/About.png" alt=""     

class="icons" id="aboutID"></div>
<div><img 
src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/job.png" alt="" 
    class="icons" id="jobID"></div>
<div><img 
src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/middle.png" 
    alt="" class="icons" id="middleID"></div>
  </div>

  <div id="right" class="right"><img 
src="https://s3.amazonaws.com/underscores.xyz/images/right.png" alt=""></div>

  <script src="https://cdn.jsdelivr.net/npm/jquery-
slotmachine@4.0.0/dist/slotmachine.min.js"></script>
  <script src="back.js" charset="utf-8"></script>

Answer 1

据我所知，我认为这就是你想要做的，检查 JSFiddle https://jsfiddle.net/zLbysexg/6/

唯一需要更改的是 #foo id 的 CSS，以便让段落位于中心，图标所在的位置:

#foo {
  position: absolute;
  height: 300px;
  width: 400px;
  left: 490px;
  top: 150px;
  overflow-y: scroll
}

此外，我在您的代码中找不到任何与后退按钮相关的内容。