CSS3: текст остается в поле при переводе - PullRequest
Новая
       10

CSS3: текст остается в поле при переводе

0 голосов
/ 05 марта 2019

Я сделал слайд-презентацию в CSS3 / javascript, но это не работает должным образом.

Когда вы нажимаете на стрелку, div "diapos" движется в направлении, но в моем случаетекст внутри полей не полностью перемещается, и небольшая часть текста остается на следующем слайде 

function clic_left() {
          var objet = document.getElementById("diapo1");
           left = getComputedStyle(objet, null).left;
           var left2 = parseInt(left);
           left2=left2+2000;  
           diapo1.style.left=left2+"px";
           
           var objet = document.getElementById("diapo2");
           left = getComputedStyle(objet, null).left;
           var left2 = parseInt(left);
           left2=left2+2000;
           diapo2.style.left=left2+"px";
           
           var objet = document.getElementById("diapo3");
           left = getComputedStyle(objet, null).left;
           var left2 = parseInt(left);
           left2=left2+2000;
           diapo3.style.left=left2+"px";
}

function clic_right() {
          var objet = document.getElementById("diapo1");
           left = getComputedStyle(objet, null).left;
           var left2 = parseInt(left);
           left2=left2-2000;  
           diapo1.style.left=left2+"px";
           
           var objet = document.getElementById("diapo2");
           left = getComputedStyle(objet, null).left;
           var left2 = parseInt(left);
           left2=left2-2000;
           diapo2.style.left=left2+"px";
           
            var objet = document.getElementById("diapo3");
           left = getComputedStyle(objet, null).left;
           var left2 = parseInt(left);
           left2=left2-2000;
           diapo3.style.left=left2+"px";
}
#arrow_left {
color: red;
display: block;
position: absolute;
top: 50%;
bottom: 50%;
left: 5%;
opacity: 0.3;

}

#arrow_right {
color: red;
display: block;
position: absolute;
top: 50%;
bottom: 50%;
right: 5%;
opacity: 0.3;
}

#arrow_right:hover {
displa      y: block;
opacity: 1;

transform: translate(5px);
cursor: pointer;

}


#arrow_left:hover {
display: block;
opacity: 1;
transform: translate(-5px);
cursor: pointer;
}

.bordure_left  {
    position: absolute; 
    width: 10%;
	height: 1024;
    top: 3em;
    left: 0px;
    bottom: 0px;
	z-index: 9;
}

.bordure_right {
    position: absolute; 
    width: 10%;
	height: 1024;
    top: 3em;
    right: 0px;
    bottom: 0px;
	z-index: 9;
}

.centre {
	position: absolute;
    height: 100em;
	width: 1020px;
    margin: 118px;
    margin-top: 3em;
	border: 5px solid;
	z-index: 1;

}

#diapo1 {
	position: absolute;
    left: 0px;
	z-index: 1;
    transition: 1s;
}

#diapo2 {
	position: absolute;
    left: 2000px;
	z-index: 1;
    transition: 1s;
}

#diapo3 {
	position: absolute;
    left: 4000px;
	z-index: 1;
    transition: 1s;
}

.robot {
    text-align: center;
    white-space: normal;
    text-shadow: 1px 2px grey;
	color: black;
	font-size: 1.5em;
	font-family: SaborDigital;
	word-spacing: 5px;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Projet SIN</title>
    <link href="css/style.css" rel=stylesheet type="text/css" />
	<script src="js/slide.js"></script>
</head>

<body scroll="no" style="overflow: hidden"> <!-- no scroll -->
    <div class="bordure_left">
		<p id="arrow_left" onclick="clic_left()">ARROW<p> 
    </div>
    
    <div class="bordure_right">
    <p id="arrow_right" onclick="clic_right()">ARROW<p> 
    </div>
     
    <div class="centre">
	<div id="diapo1">
	
    <p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae. 
    </p>
    
        <p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae. 
    </p>
    
    
    

    
	</div>
	
    <div id="diapo2">
	
    <p class="robot">AAA  ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae. 
    </p>
    
        <p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae. 
    </p>
    

    
	</div>
	
    <div id="diapo3">
	
    <p class="robot">AAA  ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae. 
    </p>
    
        <p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae. 
    </p>
    

    
	</div>
	
	
    </div>
</body>

нажмите на кнопку со стрелкой, чтобы сделать перевод

1 Ответ

0 голосов
/ 05 марта 2019

У вас все хорошо, просто помните, что position и display - это хитрые опции CSS, которые вы должны освоить, попробовав и поняв, что они делают.

В вашем примере не хватает некоторых widthи height на элементах #diapo*.p начал заполнять пробелы в пропущенном месте.

Я добавил немного background-color, чтобы вы могли легче его отладить.

Ссылки: https://zellwk.com/blog/css-positions/ и https://developer.mozilla.org/en-US/docs/Web/CSS/display

function clic_left() {
  var objet = document.getElementById("diapo1");
  left = getComputedStyle(objet, null).left;
  var left2 = parseInt(left);
  left2 = left2 + 2000;
  diapo1.style.left = left2 + "px";

  var objet = document.getElementById("diapo2");
  left = getComputedStyle(objet, null).left;
  var left2 = parseInt(left);
  left2 = left2 + 2000;
  diapo2.style.left = left2 + "px";

  var objet = document.getElementById("diapo3");
  left = getComputedStyle(objet, null).left;
  var left2 = parseInt(left);
  left2 = left2 + 2000;
  diapo3.style.left = left2 + "px";
}

function clic_right() {
  var objet = document.getElementById("diapo1");
  left = getComputedStyle(objet, null).left;
  var left2 = parseInt(left);
  left2 = left2 - 2000;
  diapo1.style.left = left2 + "px";

  var objet = document.getElementById("diapo2");
  left = getComputedStyle(objet, null).left;
  var left2 = parseInt(left);
  left2 = left2 - 2000;
  diapo2.style.left = left2 + "px";

  var objet = document.getElementById("diapo3");
  left = getComputedStyle(objet, null).left;
  var left2 = parseInt(left);
  left2 = left2 - 2000;
  diapo3.style.left = left2 + "px";
}
#arrow_left {
  color: red;
  display: block;
  position: absolute;
  top: 50%;
  bottom: 50%;
  left: 5%;
  opacity: 0.3;
}

#arrow_right {
  color: red;
  display: block;
  position: absolute;
  top: 50%;
  bottom: 50%;
  right: 5%;
  opacity: 0.3;
}

#arrow_right:hover {
  display: block;
  opacity: 1;
  transform: translate(5px);
  cursor: pointer;
}

#arrow_left:hover {
  display: block;
  opacity: 1;
  transform: translate(-5px);
  cursor: pointer;
}

.bordure_left {
  position: absolute;
  width: 10%;
  height: 1024;
  top: 3em;
  left: 0px;
  bottom: 0px;
  z-index: 9;
}

.bordure_right {
  position: absolute;
  width: 10%;
  height: 1024;
  top: 3em;
  right: 0px;
  bottom: 0px;
  z-index: 9;
}

.centre {
  position: relative; /* changed */
  height: 100em;
  width: 1020px;
  margin: 118px;
  margin-top: 3em;
  border: 5px solid;
  z-index: 1;
}

#diapo1 {
  position: absolute;
  left: 0px;
  z-index: 1;
  transition: 1s;
  background: red;
  height: 100%; /* changed */
  width: 100%; /* changed */
}

#diapo2 {
  position: absolute;
  left: 2000px;
  z-index: 1;
  transition: 1s;
  background: blue;
  height: 100%; /* changed */
  width: 100%; /* changed */
}

#diapo3 {
  position: absolute;
  left: 4000px;
  z-index: 1;
  transition: 1s;
  background: green;
  height: 100%; /* changed */
  width: 100%; /* changed */
}

.robot {
  display: block;
  height: 100%;
  width: 100%;
  text-align: center;
  white-space: normal;
  text-shadow: 1px 2px grey;
  color: black;
  font-size: 1.5em;
  font-family: SaborDigital;
  word-spacing: 5px;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Projet SIN</title>
  <link href="css/style.css" rel=stylesheet type="text/css" />
  <script src="js/slide.js"></script>
</head>

<body scroll="no" style="overflow: hidden">
  <!-- no scroll -->
  <div class="bordure_left">
    <p id="arrow_left" onclick="clic_left()">ARROW
      <p>
  </div>

  <div class="bordure_right">
    <p id="arrow_right" onclick="clic_right()">ARROW
      <p>
  </div>

  <div class="centre">
    <div id="diapo1">

      <p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
        vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
        tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
      </p>

      <p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
        vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
        tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
      </p>





    </div>

    <div id="diapo2">

      <p class="robot">AAA ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
        vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
        tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
      </p>

      <p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
        vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
        tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
      </p>



    </div>

    <div id="diapo3">

      <p class="robot">AAA ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
        vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
        tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
      </p>

      <p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
        vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
        tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
      </p>



    </div>


  </div>
</body>
...