JS：cloneNode 能做什么
本帖最后由 马黑黑 于 2023-8-11 22:04 编辑 <br /><br /><style>#mydiv {
width: 232px;
height: 172px;
}
#rbox {
width: 200px;
top: 100px;
transform: translate(0,100px) scale(1, -1);
opacity: .45;
}
.hcode {
tab-size: 4;
}
</style>
<p>JS 的 cloneNode 方法可以将一个元素及其所有内容克隆到目标元素，我们可以借此制作兼容性较好的倒影效果。请看以下代码：<br><br></p>
<pre class="hcode">
<style>
#mydiv {
width: 232px;
height: 172px;
}
#rbox {
width: 200px;
top: 100px;
transform: translate(0,100px) scale(1, -1);
-webkit-mask: linear-gradient(to bottom, transparent, red);
}
</style>
<div id="mydiv"><img alt="" src="https://638183.freep.cn/638183/t22/webp/bird5.gif" /></div>
<div id="rbox"></div>
</pre>
<p>这组代码，id="mydiv" 的元素带有一个 img 子元素，id="rbox" 的元素没有任何内容，二者的CSS设置里尺寸相同，#rbox 有额外的设置：Y轴倒转+透明度设置。然后我们通过如下 JS 代码将 mydiv 元素的内容完整复制到 rbox 元素中：<br><br></p>
<pre class="hcode">
<script>
let node = document.getElementById('mydiv').cloneNode(true);
rbox.appendChild(node);
</script>
</pre>
<p>最终效果如下：<br><br></p>
<div id="mydiv"><img alt="" src="https://638183.freep.cn/638183/t22/webp/bird5.gif" /></div>
<div id="rbox"></div>
<p><br><br><br><br><br><br>本例，我们仅通过设置目标元素的 opacity 就能模拟出倒影，也许不够逼真，但已经很不错了。其实我们还有其他手段，诸如 blur 滤镜、mask 遮罩等等，利用好它们，再辅以合适的场景，营造出更为逼真的倒影效果并不是什么难事。</p>
<script>
let node = document.getElementById('mydiv').cloneNode(true);
rbox.appendChild(node);
</script>
原来克隆是这样用的，真棒{:4_199:} 红影 发表于 2023-8-11 22:24
原来克隆是这样用的，真棒
确切说，克隆可以这么用 马黑黑 发表于 2023-8-11 22:28
确切说，克隆可以这么用
还能把一个里面的元素塞到另一个里面去{:4_173:} 醉美水芙蓉 发表于 2023-8-12 06:21
欣赏学习老师克隆教程！
早 红影 发表于 2023-8-11 23:37
还能把一个里面的元素塞到另一个里面去
这就是克隆，将对象复制一份到目标元素 马黑黑 发表于 2023-8-12 07:31
这就是克隆，将对象复制一份到目标元素
如果图图在#rbox里，直接在css里就能完成倒影的吧。这个主要是讲怎样在空的里面被克隆上内容。有需求的时候这个非常重要。 一款新的倒影效果……
萌哒哒的图片很耐看~~ 花飞飞 发表于 2023-8-12 09:06
一款新的倒影效果……
萌哒哒的图片很耐看~~
图片次要，关键问题是倒影的原理 红影 发表于 2023-8-12 09:03
如果图图在#rbox里，直接在css里就能完成倒影的吧。这个主要是讲怎样在空的里面被克隆上内容。有需求的时 ...
这是两种不同的方式，你说的实现方式，是两个都有一模一样的，这意味着你要生一对双胞胎，而cloneNode方法是在第二个盒子中无中生有。 马黑黑 发表于 2023-8-12 09:52
这是两种不同的方式，你说的实现方式，是两个都有一模一样的，这意味着你要生一对双胞胎，而cloneNode方 ...
无中生有这个词用得好，正是这个克隆的强大之处呢{:4_199:} 红影 发表于 2023-8-12 10:52
无中生有这个词用得好，正是这个克隆的强大之处呢
其实你那方法也是克隆，手动克隆。当克隆对象有很多属性和子元素，且某个时候需要更改一些细节，我觉得手动克隆不是最省事的做法。 马黑黑 发表于 2023-8-12 11:05
其实你那方法也是克隆，手动克隆。当克隆对象有很多属性和子元素，且某个时候需要更改一些细节，我觉得手 ...
我哪有什么方法，只是你以前教的啊。嗯嗯，明白你说的非手动的意义所在{:4_204:} 红影 发表于 2023-8-12 12:21
我哪有什么方法，只是你以前教的啊。嗯嗯，明白你说的非手动的意义所在
{:4_190:}喝咖啡 马黑黑 发表于 2023-8-12 12:34
喝咖啡
这次不是喝水了啊{:4_173:} 马黑黑 发表于 2023-8-12 09:50
图片次要，关键问题是倒影的原理
{:4_170:}小白尽量理解中。。。碰到代码我慢好几拍，容我慢慢想。。 花飞飞 发表于 2023-8-12 17:07
小白尽量理解中。。。碰到代码我慢好几拍，容我慢慢想。。
啊波测的不是学的挺好的吗 红影 发表于 2023-8-12 12:57
这次不是喝水了啊
水喝多了也不好 马黑黑 发表于 2023-8-12 18:05
啊波测的不是学的挺好的吗
挺好的，就是啊波测的有时候不灵光。。