[英]What's the easiest way to put the javascript animation to the background?
我正在创建一个JS动画，我想将此动画放在文本和所有其他元素的后面。
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <link rel="stylesheet" href="http://hub.chemdoodle.com/cwc/latest/ChemDoodleWeb.css" type="text/css"> <script type="text/javascript" src="http://hub.chemdoodle.com/cwc/latest/ChemDoodleWeb.js"></script> <title>Molecules</title> </head> <body> <h1 style="font-size:300%; text-align: center; font-family: Menlo;">Molecules</h1> <script> var w = window.innerWidth; var h = window.innerHeight; console.log('WIDTH', w, 'AND HEIGHT', h); var rotate3D = new ChemDoodle.RotatorCanvas('rotate3D', w, h, true); rotate3D.specs.atoms_useJMOLColors = true; rotate3D.specs.atoms_circles_2D = true; rotate3D.specs.bonds_symmetrical_2D = true; var exampleMolFile = 'Molecule Name\\n CHEMDOOD12250908183D 0 0.00000 0.00000 0\\n[Insert Comment Here]\\n 40 44 0 0 0 0 0 0 0 0 1 V2000\\n -2.4201 -1.3169 0.4885 C 0 0 0 1 0 0 0 0 0 0 0 0\\n -2.4007 -0.2197 0.6870 C 0 0 0 1 0 0 0 0 0 0 0 0\\n -3.1630 -1.7585 0.5832 H 0 0 0 1 0 0 0 0 0 0 0 0\\n -1.4920 -1.8472 0.1276 C 0 0 0 1 0 0 0 0 0 0 0 0\\n -3.3129 0.2911 0.9878 O 0 0 0 1 0 0 0 0 0 0 0 0\\n -1.4550 0.3261 0.5477 C 0 0 0 1 0 0 0 0 0 0 0 0\\n -0.5339 -1.2844 -0.0016 C 0 0 0 1 0 0 0 0 0 0 0 0\\n -1.5355 -2.6937 -0.0688 H 0 0 0 1 0 0 0 0 0 0 0 0\\n -3.1138 1.0345 1.1162 H 0 0 0 1 0 0 0 0 0 0 0 0\\n -0.5385 -0.2088 0.2615 C 0 0 0 1 0 0 0 0 0 0 0 0\\n -1.3162 1.4114 0.6041 O 0 0 0 1 0 0 0 0 0 0 0 0\\n 0.4574 -1.7528 -0.5024 C 0 0 0 1 0 0 0 0 0 0 0 0\\n 0.3884 0.5420 0.1963 C 0 0 0 1 0 0 0 0 0 0 0 0\\n -0.2569 1.5925 0.1057 C 0 0 0 1 0 0 0 0 0 0 0 0\\n 0.6675 -2.4994 -0.0963 H 0 0 0 1 0 0 0 0 0 0 0 0\\n 1.4380 -0.9689 -0.5556 C 0 0 0 1 0 0 0 0 0 0 0 0\\n 0.2503 -1.9697 -1.3283 H 0 0 0 1 0 0 0 0 0 0 0 0\\n 1.0495 0.4819 1.2355 C 0 0 0 1 0 0 0 0 0 0 0 0\\n 1.0919 0.2175 -0.7577 C 0 0 0 1 0 0 0 0 0 0 0 0\\n 0.1184 2.2301 0.5784 H 0 0 0 1 0 0 0 0 0 0 0 0\\n -0.3921 2.0169 -1.0582 C 0 0 0 1 0 0 0 0 0 0 0 0\\n 1.9358 -1.2202 -1.2354 H 0 0 0 1 0 0 0 0 0 0 0 0\\n 2.1438 -0.9618 0.4030 N 0 0 0 1 0 0 0 0 0 0 0 0\\n 1.6007 -0.6068 1.3817 C 0 0 0 1 0 0 0 0 0 0 0 0\\n 0.5521 0.6440 1.9410 H 0 0 0 1 0 0 0 0 0 0 0 0\\n 1.6648 1.1088 1.2152 H 0 0 0 1 0 0 0 0 0 0 0 0\\n 0.5456 0.4220 -1.8161 C 0 0 0 1 0 0 0 0 0 0 0 0\\n 1.8191 0.7140 -0.7698 H 0 0 0 1 0 0 0 0 0 0 0 0\\n -1.4411 2.4257 -1.2400 O 0 0 0 1 0 0 0 0 0 0 0 0\\n -0.1380 1.2410 -1.9394 C 0 0 0 1 0 0 0 0 0 0 0 0\\n 0.1565 2.6937 -1.1652 H 0 0 0 1 0 0 0 0 0 0 0 0\\n 2.6986 -1.9758 0.5733 C 0 0 0 1 0 0 0 0 0 0 0 0\\n 2.1879 -0.5234 2.0289 H 0 0 0 1 0 0 0 0 0 0 0 0\\n 1.0187 -1.2041 1.6545 H 0 0 0 1 0 0 0 0 0 0 0 0\\n 0.7435 -0.0833 -2.4955 H 0 0 0 1 0 0 0 0 0 0 0 0\\n -1.9229 1.9705 -0.8287 H 0 0 0 1 0 0 0 0 0 0 0 0\\n -0.4917 1.3949 -2.7191 H 0 0 0 1 0 0 0 0 0 0 0 0\\n 3.1158 -2.2288 -0.1548 H 0 0 0 1 0 0 0 0 0 0 0 0\\n 3.3129 -1.8835 1.1918 H 0 0 0 1 0 0 0 0 0 0 0 0\\n 2.1618 -2.6206 0.8240 H 0 0 0 1 0 0 0 0 0 0 0 0\\n 1 2 2 0 0 0 0\\n 1 3 1 0 0 0 0\\n 1 4 1 0 0 0 0\\n 2 5 1 0 0 0 0\\n 2 6 1 0 0 0 0\\n 7 4 2 0 0 0 0\\n 4 8 1 0 0 0 0\\n 5 9 1 0 0 0 0\\n 6 10 2 0 0 0 0\\n 6 11 1 0 0 0 0\\n 10 7 1 0 0 0 0\\n 7 12 1 0 0 0 0\\n 10 13 1 0 0 0 0\\n 14 11 1 0 0 0 0\\n 12 15 1 0 0 0 0\\n 16 12 1 0 0 0 0\\n 12 17 1 0 0 0 0\\n 13 18 1 0 0 0 0\\n 13 14 1 0 0 0 0\\n 13 19 1 0 0 0 0\\n 14 20 1 0 0 0 0\\n 21 14 1 0 0 0 0\\n 16 22 1 0 0 0 0\\n 19 16 1 0 0 0 0\\n 16 23 1 0 0 0 0\\n 18 24 1 0 0 0 0\\n 18 25 1 0 0 0 0\\n 18 26 1 0 0 0 0\\n 19 27 1 0 0 0 0\\n 19 28 1 0 0 0 0\\n 21 29 1 0 0 0 0\\n 30 21 1 0 0 0 0\\n 21 31 1 0 0 0 0\\n 23 32 1 0 0 0 0\\n 23 24 1 0 0 0 0\\n 24 33 1 0 0 0 0\\n 24 34 1 0 0 0 0\\n 27 35 1 0 0 0 0\\n 27 30 2 0 0 0 0\\n 29 36 1 0 0 0 0\\n 30 37 1 0 0 0 0\\n 32 38 1 0 0 0 0\\n 32 39 1 0 0 0 0\\n 32 40 1 0 0 0 0\\nM END'; var mol = ChemDoodle.readMOL(exampleMolFile); rotate3D.loadMolecule(mol); rotate3D.startAnimation(); </script> <p> Hydrogen bonding plays a significant role in many chemical and biological pro- cesses, including ligand binding and enzyme catalysis. Consideration of hydro- gen-bonding properties in drug design is important because of their strong influ- ence on specificity of binding, transport, adsorption, distribution, metabolization, and excretion properties of small molecules. Their ubiquity and flexibility make hydrogen bonds the most important physical interaction in systems of biomole- cules in aqueous solution. Because hydrogen atoms comprise approximately one- half of the atoms within biological macromolecules and two-thirds of the atoms of the solvating water, hydrogen atoms, or protons, are found between almost every pair of non-covalently bonded heavy atoms in a biological system. Since the basic necessary condition for a hydrogen bond being present is that a proton lies be- tween the electron clouds of two other atoms and modifies their interaction in a manner that is not explicable in terms of the van der Waals (dispersion-repulsion) effect, hydrogen bonds almost rival van der Waals interactions in number. </p> </body> </html>
我现在有
和
我没有这本书。 我只是为了实验而提出它。
我保留框架是为了跟踪。 我找不到如何将x，y设置为0,0或类似的名称，以使脚本不在标题<h1> ，而是在标题后和同一级别。
如何将这个脚本放到后台？
将此CSS添加到H1-> position: aboslute; top: 0; left: 0; position: aboslute; top: 0; left: 0; -就是这样。 您可以将javascript结果绑定到某些div并设置样式，如果您想要其他行为。
您可以使用CSS相互定位：
通过将元素包装为div，可以控制分层的位置和z-index。
标记：
<div id="wrapper">
<div id="content">
// YOUR CONTENT
</div>
<div id="animation">
// YOUR CANVAS SCRIPT
</div>
</div>
CSS：
#wrapper {
position: relative;
}
#content {
position: relative;
z-index: 1;
}
#animation {
position: absolute;
top: 0;
z-index: 0;
}
https://jsfiddle.net/mattBBP/m0Lo5v6w/
您可能要确保您的内容具有画布动画的最小高度，以防止其中断：
#content {
...
min-height: 400px;
}
使用JavaScript将弹出式div放在链接/光标位置的最简单方法是什么？
[英]What's the easiest way to put a pop up div at link / cursor location utilizing JavaScript?
在 JavaScript 中将数字转换为百分比的最简单方法是什么？
[英]What's the easiest way to convert a number to a percentage in JavaScript?
在 Windows 上运行 .js javascript 文件的最简单方法是什么？
[英]What's the easiest way to run a .js javascript file on windows?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.