Question

我正在创建一个JS动画，我想把这个动画放在文本和所有其他元素后面。

＆＃13;

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

＆＃13;

现在我有

和

我不拥有此文字。我只是为了实验而把它放在那里。

为了跟踪，我保留了框架。我无法找到如何将x，y设置为0,0或者有点像这样，使脚本不在标题<h1>下面，而是在它后面和同一级别上。

如何将此脚本置于后台？

Answer 1

将此CSS添加到H1 - ＆gt; position: aboslute; top: 0; left: 0; - 就是这样。如果你想要另一种行为，你可以将javascript结果绑定到某个div并设置样式。

Answer 2

您可以使用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动画放到后台的最简单方法？

2 个答案: