gpt4 book ai didi

CSS3 : Text stay in the box when translated

转载 作者:行者123 更新时间:2023-11-28 19:31:15 28 4
gpt4 key购买 nike

我已经用 CSS3/javascript 做了一个幻灯片演示,但这不能正常工作..

当您单击箭头时,“diapos”div 会朝一个方向移动,但在我的例子中,框内的文本并没有完全移动,一小部分文本留在下一张幻灯片中

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>

点击“箭头”按钮进行翻译

最佳答案

你做的很好,只要记住 positiondisplay 是棘手的 CSS 选项,你需要通过尝试和理解它们的作用来掌握它们。

您的示例在 #diapo* 元素上缺少一些 widthheightp 开始填充缺失空间的空白。

我添加了一些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>

关于CSS3 : Text stay in the box when translated,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54991702/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com