论坛 › 马黑黑教程专版 › dot-lz.js使用说明

马黑黑 发表于 2024-4-23 11:38

dot-lz.js使用说明

<style>
.mybox { font: normal 18px/24px sans-serif; }
.mybox p { margin: 12px 0; }
.mybox mark { margin: 0 6px; background: lightblue; padding: 0 6px; }
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>

<div class="mybox">
        <p>dot-li.js 没有 ball-lz.js 的碰撞机制，其特色是粒子能响应鼠标指针移动（移动设备是点击）而产生变化，粒子在离鼠标指针150px之内的距离时会慢慢变大到指定尺寸，变大后如果距离超出了范围又会慢慢变回原来的尺寸。粒子可以响应帖子内外鼠标指针的移动，同时鼠标指针不会受到帖子内外其他顶层元素的影响。dot-js脚本还加入了resize机制，改变浏览器窗口大小后还可以较好响应鼠标指针的移动交互。</p>
        <h2>资源引用与粒子配置</h2>
        <div class='mum'>
<cl-cd data-idx="1"><span class="tBlue">var</span> sc = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="2">sc.charset = <span class="tMagenta">'utf-8'</span>;</cl-cd>
<cl-cd data-idx="3">sc.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/js/dot-lz.js'</span>;</cl-cd>
<cl-cd data-idx="4"><span class="tRed">document</span>.body.appendChild(sc);</cl-cd>
<cl-cd data-idx="5">&nbsp;</cl-cd>
<cl-cd data-idx="6"><span class="tBlue">var</span> lz = {</cl-cd>
<cl-cd data-idx="7">    <span class="tBlue">papa:</span> <span class="tMagenta">'#papa'</span>,<span class="tGreen">/* 帖子父元素标识 */</span></cl-cd>
<cl-cd data-idx="8">    <span class="tBlue">total:</span> 100, <span class="tGreen">/* 粒子总数 */</span></cl-cd>
<cl-cd data-idx="9">    <span class="tBlue">r:</span> 3, <span class="tGreen">/* 粒子半径 */</span></cl-cd>
<cl-cd data-idx="10">    max_<span class="tBlue">r:</span> 15, <span class="tGreen">/* 粒子变大半径极限 */</span></cl-cd>
<cl-cd data-idx="11">    <span class="tBlue">step:</span> 0.5, <span class="tGreen">/* 粒子行进步幅 */</span></cl-cd>
<cl-cd data-idx="12">    <span class="tBlue">color:</span> <span class="tMagenta">'rgba(255,255,255,.7)'</span>, <span class="tGreen">/* 粒子颜色 缺省或空值表示使用随机颜色 */</span></cl-cd>
<cl-cd data-idx="13">    <span class="tBlue">opacity:</span> .9, <span class="tGreen">/* 粒子随机颜色透明度 */</span></cl-cd>
<cl-cd data-idx="14">    <span class="tBlue">move:</span> false <span class="tGreen">/* 粒子移动开关 */</span></cl-cd>
<cl-cd data-idx="15">};</cl-cd>
<cl-cd data-idx="15"><span class="tGreen">//配置可以写在一行里</span></cl-cd>
<cl-cd data-idx="16"><span class="tBlue">var</span> lz = {<span class="tBlue">papa:</span> <span class="tMagenta">'#papa'</span>, <span class="tBlue">total:</span> 100, <span class="tBlue">r:</span> 3, max_<span class="tBlue">r:</span> 15, <span class="tBlue">step:</span> 0.5, <span class="tBlue">color:</span> <span class="tMagenta">'rgba(255,255,255,.7)'</span>, <span class="tBlue">opacity:</span> .9, <span class="tBlue">move:</span> false};</cl-cd>
        </div>
        <h2>相关说明</h2>
        <p>所有配置均可缺省，这表示将使用dot-lz的默认配置，它将是全页粒子功能。一般不建议这么做，应根据需要选择性地配置相关参数。另外，如果粒子容器元素使用class，papa 变量值应带一个前缀<mark>.</mark>，例如：<mark>papa: '.mybox',</mark>如此，脚本才能正确识别。</p>
        <p>粒子采用后追加方式引入，因此具备较高的自然元素层级，可能会阻挡其他页面元素的交互操作。若此，可以给相应元素提升 z-index 属性值来规避此种现象。当然还有其他的解决方案，这里就不深入探讨了。</p>
        <h2>实例</h2>
        <p><a href="http://qhxy.52qingyin.cn/">午后时光</a> → <a href="http://qhxy.52qingyin.cn/art/bshow.php?st=4&sd=4&art=uvuz_1713832591" target="_blank">Blissful Mind</a></p>
        <p><a href="http://mhh.52qingyin.cn/">马黑整站系统</a> → <a href="http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1713843023" target="_blank">Blissful Mind</a></p>
        <p><a href="https://www.huachaowang.com/">花潮论坛</a> → <a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=75591" target="_blank">Blissful Mind</a></p>
</div>

南无月 发表于 2024-4-23 12:40

试了全页粒子，试了更改别的纯色，和变成随机颜色。。都相当完美 。。
这个粒子可以适合不同色调的贴子。。
非常灵活的配置。。{:4_187:}

马黑黑 发表于 2024-4-23 12:42

南无月 发表于 2024-4-23 12:40
试了全页粒子，试了更改别的纯色，和变成随机颜色。。都相当完美 。。
这个粒子可以适合不同色调的贴子。 ...

粒子配置时可以改变尺寸，r 是粒子的半径

南无月 发表于 2024-4-23 12:45

马黑黑 发表于 2024-4-23 12:42
粒子配置时可以改变尺寸，r 是粒子的半径

好哒。。。{:4_170:}
试全页的时候我把整句都删了，所以看着小小的。。。
那就留个改半径的就好了

马黑黑 发表于 2024-4-23 12:48

南无月 发表于 2024-4-23 12:45
好哒。。。
试全页的时候我把整句都删了，所以看着小小的。。。
那就留个改半径的就好了

{:4_181:}

庶民 发表于 2024-4-23 14:54

太专业了，点赞。

愤怒的葡萄 发表于 2024-4-23 15:21

看上去有点专业啊，葡萄来临帖学习了。

红影 发表于 2024-4-23 16:35

还有这么仔细的说明帖子呢，这个粒子封装真棒{:4_199:}

马黑黑 发表于 2024-4-23 18:05

红影 发表于 2024-4-23 16:35
还有这么仔细的说明帖子呢，这个粒子封装真棒

{:4_190:}

马黑黑 发表于 2024-4-23 18:06

愤怒的葡萄 发表于 2024-4-23 15:21
看上去有点专业啊，葡萄来临帖学习了。

{:4_190:}

马黑黑 发表于 2024-4-23 18:06

庶民 发表于 2024-4-23 14:54
太专业了，点赞。

{:4_191:}

南无月 发表于 2024-4-23 18:24

马黑黑 发表于 2024-4-23 12:48


居然可以完全不要这个粒子的配置，
有点木有想到。
{:4_189:}

马黑黑 发表于 2024-4-23 18:58

南无月 发表于 2024-4-23 18:24
居然可以完全不要这个粒子的配置，
有点木有想到。

默认嘛

南无月 发表于 2024-4-23 19:12

马黑黑 发表于 2024-4-23 18:58
默认嘛

好哒。。。每天都能学到点东西，也是乐趣。。{:4_199:}

红影 发表于 2024-4-23 21:02

马黑黑 发表于 2024-4-23 18:05


谢大咖{:4_187:}

马黑黑 发表于 2024-4-23 21:21

红影 发表于 2024-4-23 21:02
谢大咖

大杯伺候{:4_170:}

马黑黑 发表于 2024-4-23 21:31

南无月 发表于 2024-4-23 19:12
好哒。。。每天都能学到点东西，也是乐趣。。

乐趣多多增强免疫力

红影 发表于 2024-4-23 21:51

马黑黑 发表于 2024-4-23 21:21
大杯伺候

只要不是大刑伺候就好{:4_189:}

南无月 发表于 2024-4-23 22:21

马黑黑 发表于 2024-4-23 21:31
乐趣多多增强免疫力

这个必须的。。。心情好自然抵抗能力强。。全世界通用。{:4_173:}

马黑黑 发表于 2024-4-23 22:35

南无月 发表于 2024-4-23 22:21
这个必须的。。。心情好自然抵抗能力强。。全世界通用。

不分人种

查看完整版本: dot-lz.js使用说明