gpt4 book ai didi

html - 有没有办法在加载器上方 float 按钮和文本?

转载 作者:行者123 更新时间:2023-11-28 06:25:03 24 4
gpt4 key购买 nike

我想在网站的左下角放置两个按钮,并在左上角放置一个标题。然而,我导入了一个 3D 模型,尽管它位于页面中央,但它的一部分(我猜是背景)似乎覆盖了我已经安装好的按钮。我想知道是否可以将按钮和文本 float 在模型上方或将模型放置在某物内以设置它的大小以阻止它与按钮重叠。

非常感谢任何形式的帮助,因为我是新手。

我到目前为止的代码可以在下面看到。

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function() {

$('#button').click(function() {
$('blood.DAE').toggle();
});



});
</script>

<title>Visualising Cells</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="three.js"></script>
<script src="ColladaLoader.js"></script>

</head>

<body>

<button type="button">Load Red Blood Cell</button>


<script>

var width = window.innerWidth;
var height = window.innerHeight;


var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.01, 500 );
camera.position.z = 0.16;
camera.position.x = 0;
camera.position.y = 0;
scene.add(camera);


var renderer=new THREE.WebGLRenderer();
renderer.setSize(width,height);
document.body.appendChild(renderer.domElement);
renderer.render(scene,camera);
renderer.setClearColor("rgb(255,255,255)");

light = new THREE.DirectionalLight(0xffffff);
light.position.set(1, 1, 1);
scene.add(light);

light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 0, 0.14);
scene.add(light);



var loader = new THREE.ColladaLoader();
loader.load('blood.DAE', function (collada) {

object = collada.scene;
object.position.x = 0;
object.position.y = 0;
object.position.z = 0;
object.updateMatrix();
scene.add(object);
}
);



document.addEventListener('keydown', function(event) {
console.log("Up Arrow Pressed");
console.log(camera.position.z);
if (event.keyCode == 38) {

if (camera.position.z >= 0.1) {

camera.position.z = camera.position.z - 0.01;

}

}

else if (event.keyCode == 40) {

console.log("Down Arrow Pressed")

if (camera.position.z < 0.2) {

camera.position.z = camera.position.z + 0.01;
}

}
}, true);

render = function () {
requestAnimationFrame(render);

object.rotation.x += 0.01;
object.rotation.y += 0.01;

renderer.render(scene, camera);
};
render();


</script>


</body>

</html>

最佳答案

id="BottomLeftButton"<-- 将其添加到您的按钮中

这是你的CSS

#BottomLeftButton{
position:fixed;
bottom:0px
left:0px;
}

添加你想要的其他属性(或者如果你已经有一个选择器,只需将上面的添加到它)

CSS 会将您的按钮“固定”到其容器的左下角:)

关于html - 有没有办法在加载器上方 float 按钮和文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35346817/

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