有沒有辦法在按鈕和文本上方浮動一個加載器？

我想要在網站的左下角放置兩個按鈕以及左上角的標題。但是，我導入了一個3D模型，儘管它位於頁面的中心，但它的一部分（即時猜測背景）似乎覆蓋了我已有的按鈕。我想知道是否可以將模型上方的按鈕和文字浮起來，或者將模型放置在某個東西中以設置其大小以阻止它重疊按鈕。有沒有辦法在按鈕和文本上方浮動一個加載器？

任何形式的幫助都非常感謝，因爲我是一個新手。

我到目前爲止的代碼可以在下面看到。

<!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>

來源

2016-02-11 G.Smith

ID = 「BottomLeftButton」 < - 添加到您的按鈕

，這對你的CSS

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

添加你想要其他屬性（或者，如果你已經有了一個選擇只需在上面添加即可）

css將「修復」您的按鈕到其容器的左下角:)

來源

2016-02-11 18:20:37 WelshBoyZz

把你需要的按鈕浮動在一個固定位置的div。

<style type="text/css"> 
    .float-btn{ 
     position: fixed; 
     bottom: 1%; 
     left: 2%; 
    } 
</style> 

<div class="float-btn"> 
    <button type="button">Load Red Blood Cell</button> 
    <button type="button">Another Button</button> 
</div>

看到這個fiddle

來源

2016-02-11 18:24:18

謝謝你們的快速重播，它完美的作品！我也想知道是否可以使用jquery將每個3D模型分配給每個按鈕，我已經在問題中發佈了代碼，但我不確定如何選擇模型，我需要選擇自己的模型（blood.DAE），渲染器還是裝載器？ –

@ G.Smith這個問題似乎超出了你提出的html和css標籤的範圍。您可以通過詢問單獨的問題來獲得更好的答案，其中包含three.js，webgl或collada標記。 –

好的，謝謝你的幫助。 –

有沒有辦法在按鈕和文本上方浮動一個加載器？

回答

相關問題