#javascript #html #css
#javascript #HTML #css
Вопрос:
Я пытаюсь закодировать бесконечного монстра с прокруткой (например, endless.horse, но без jQuery). Но он продолжает показывать пробелы между элементами при прокрутке, и это выглядит не так хорошо. Выполнение высоты строки просто сведет строки в странный blob и ничего не даст. Пробел ничего не делает, чтобы остановить пробелы. Что мне делать?
window.onscroll = function() {hello()};
function hello() {
var para = document.createElement("pre");
var node = document.createTextNode(` | | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
`);
para.appendChild(node);
var element = document.getElementById("hello");
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
} <html>
<head>
<title>My first three.js app</title>
<script src="myScript.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#hello
float: left;
padding: 0;
margin: 0;
display: inline-block;
}
pre {
padding: 0;
margin-bottom: 0;
}
</style>
</head>
<body>
<pre>
_-~~~-_ _-~~~-_
/~ ~ : ,
' ~ , |: :
{ /~~ :--~"""".: :
(... : /^ /^ ;
~_____ | | | |:~
/ |__O|_|_O|;
( / O
( `_______/)
` /
) ~-------~'
/
: ||
| | ||
| |.======[]== '|
(~~~~) | |~)
/ | |
~ ___/)______/^__|_/
` // | | | |
`__//' | | | |
~~ | | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
</pre>
<div id="hello">
</div>
</body>
</html> Ответ №1:
добавить got pre{margin:0;}
window.onscroll = function() {hello()};
function hello() {
var para = document.createElement("pre");
var node = document.createTextNode(` | | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
`);
para.appendChild(node);
var element = document.getElementById("hello");
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
} pre{margin:0;} <html>
<head>
<title>My first three.js app</title>
<script src="myScript.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#hello
float: left;
padding: 0;
margin: 0;
display: inline-block;
}
pre {
padding: 0;
margin-bottom: 0;
}
</style>
</head>
<body>
<pre>
_-~~~-_ _-~~~-_
/~ ~ : ,
' ~ , |: :
{ /~~ :--~"""".: :
(... : /^ /^ ;
~_____ | | | |:~
/ |__O|_|_O|;
( / O
( `_______/)
` /
) ~-------~'
/
: ||
| | ||
| |.======[]== '|
(~~~~) | |~)
/ | |
~ ___/)______/^__|_/
` // | | | |
`__//' | | | |
~~ | | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
</pre>
<div id="hello">
</div>
</body>
</html>