Blissful Mind

马黑黑 · 发表于 2024-4-23 10:15

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

×

马黑黑 · 发表于 2024-4-23 10:15

帖子代码

<style>

#papa { margin: 20px 0 20px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/2/bliss.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px rgba(0,0,0,.6); z-index: 1; display: grid; place-items: center; position: relative; }

#player { position: absolute; bottom: 0; width: 120px; height: 180px; cursor: pointer; z-index: 10; }

.vid { position: absolute; bottom: 0; width: 200px; height: 200px; object-fit: cover; mix-blend-mode: screen; }

</style>

</div>

var vids = document.querySelectorAll('.vid');

var sc = document.createElement('script');

sc.charset = 'utf-8';

sc.src = 'https://638183.freep.cn/638183/web/js/dot-lz.js';

document.body.appendChild(sc);

var lz = {papa: '#papa', total: 100, r: 3, max_r: 15, step: 0.5, color: 'rgba(255,255,255,.7)', opacity: .9, move: false};

var mState = () => {

vids.forEach(vid => aud.paused ? vid.pause() : vid.play());

lz.move = !aud.paused;

};

aud.onplaying = aud.onpause = () => mState();

player.onclick = () => aud.paused ? aud.play() : aud.pause();

</script>

马黑黑 · 发表于 2024-4-23 10:16

本帖最后由马黑黑于 2024-4-23 11:46 编辑

由于本论坛的一些资源加载失败，导致整体页面的一些基于元素布局的数据出现不可琢磨的现象，最初的 dot-lz.js 脚本在这里出现水土不服，现已修正脚本，理论上粒子响应鼠标指针移动的准确度应该正常了。
dot-lz 的使用说明请查阅：dot-lz.js使用说明 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

脚本为原创拙作，可以另存后上传到自己的空间，可以随意修改和使用，不用注明作者和出处。

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

非常漂亮的音画作品，点赞！~~~

马黑黑 · 发表于 2024-4-23 10:25

愤怒的葡萄发表于 2024-4-23 10:21
非常漂亮的音画作品，点赞！~~~

一些计算在这个论坛不够精准

愤怒的葡萄 · 发表于 2024-4-23 10:25

马黑黑发表于 2024-4-23 10:25
一些计算在这个论坛不够精准

马版，你的作品挺不错的了，葡萄还不会做呢。

马黑黑 · 发表于 2024-4-23 10:29

愤怒的葡萄发表于 2024-4-23 10:25
马版，你的作品挺不错的了，葡萄还不会做呢。

X3.2论坛程序有诸多问题，导致一些JS计算失效。我在 3.4 版本上测试过，非常完美，在自由页面上更没问题：

http://qhxy.52qingyin.cn/art/bsh ... art=uvuz_1713832591

愤怒的葡萄 · 发表于 2024-4-23 10:33

马黑黑发表于 2024-4-23 10:29
X3.2论坛程序有诸多问题，导致一些JS计算失效。我在 3.4 版本上测试过，非常完美，在自由页面上更没问题 ...

马版挺了不起了，你分享了很多主题帖，葡萄不会制作音画的，我也想学习一下，以后我会在论坛里看看你分享的教程的。

马黑黑 · 发表于 2024-4-23 10:33

愤怒的葡萄发表于 2024-4-23 10:33
马版挺了不起了，你分享了很多主题帖，葡萄不会制作音画的，我也想学习一下，以后我会在论坛里看看你分享 ...

这个学起来需要一些时间

愤怒的葡萄 · 发表于 2024-4-23 10:36

马黑黑发表于 2024-4-23 10:33
这个学起来需要一些时间

我会尝试一下的，其实制作音画我很早就想学了，我在东篱雅苑论坛看到很多版主分享的精美的音画帖，当时我就想学一下了。

马黑黑 · 发表于 2024-4-23 11:22

愤怒的葡萄发表于 2024-4-23 10:36
我会尝试一下的，其实制作音画我很早就想学了，我在东篱雅苑论坛看到很多版主分享的精美的音画帖，当时我 ...

那还是有一点基础的，学起来很快能上手

小文 · 发表于 2024-4-23 11:24

非常漂亮的

愤怒的葡萄 · 发表于 2024-4-23 11:28

马黑黑发表于 2024-4-23 11:22
那还是有一点基础的，学起来很快能上手

马版一直在论坛啊？我今天早上上来了一会。

马黑黑 · 发表于 2024-4-23 11:39

愤怒的葡萄发表于 2024-4-23 11:28
马版一直在论坛啊？我今天早上上来了一会。

在家养病，贪玩了

马黑黑 · 发表于 2024-4-23 11:41

小文发表于 2024-4-23 11:24
非常漂亮的

针对花潮论坛做了一些改动，现在粒子响应鼠标指针的精准度应该可以了

朵拉 · 发表于 2024-4-23 12:25

漂亮，欣赏学习~~

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

马黑黑发表于 2024-4-23 10:16
由于本论坛的一些资源加载失败，导致整体页面的一些基于元素布局的数据出现不可琢磨的现象，最初的 dot-lz. ...

我可能是由于限制的原因，电脑有问题。（得换台电脑再试)
手机浏览此贴，触击点周围粒子变大，一切正常。。

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

马黑黑发表于 2024-4-23 11:41
针对花潮论坛做了一些改动，现在粒子响应鼠标指针的精准度应该可以了

做贴跟做程序似的，需要整两套。。

马黑黑 · 发表于 2024-4-23 12:40

南无月发表于 2024-4-23 12:38
做贴跟做程序似的，需要整两套。。

其实也就是一套，整合一下

马黑黑 · 发表于 2024-4-23 12:41

南无月发表于 2024-4-23 12:37
我可能是由于限制的原因，电脑有问题。（得换台电脑再试)
手机浏览此贴，触击点周围粒子变大，一切正常 ...

[音乐心情] Blissful Mind

请马上登录，朋友们都在花潮里等着你哦：）

评分

帖子代码

评分

花潮帅哥

鼠

牛

虎

兔

龙

蛇

马

羊

猴

鸡

狗

猪

多彩人生

星月交辉

奔放热烈

海样胸怀

春风拂面

火热情怀

优雅迷人

神秘浪漫

相遇之美

鹰傲苍穹

花好月圆

紫色情节

飞龙在天

王者至尊

大将风范

音画大师

天籁妙音

共看流星

风雨同行

我心永远

幸福快乐

喜乐安康

侠骨柔肠

心想事成

开朗大方

花潮管理

心曲飞扬

七彩绚丽

流光溢彩

花潮版主

花潮美女

心香一瓣

妙笔生花

天长地久

花潮贵宾

蝴蝶情怀

绚丽缤纷