晚霞

马黑黑 · 发表于 2024-4-12 07:38

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

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

x

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

帖子代码

<style>

#mydiv { margin: 20px 0 0 calc(50% - 721px); width: 1280px; height: 800px; background: url('https://638183.freep.cn/638183/t24/1/wjxx.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px #000; z-index: 1; cursor: crosshair; position: relative; }

</style>

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

sF.charset = 'utf-8';

sF.src = 'https://638183.freep.cn/638183/web/js/line-lz.js';

document.body.appendChild(sF);

/* lz参数配置说明

papa : 帖子容器id标识，带#号，需要引号，如果是class，带 . 号 [例] papa: '.tiezi',

total : 粒子总数

radius : 线段两端的小圆点半径，取值 0.5~2 之间为合适

color : 点和线段颜色，必须使用 rgba(r,g,b,a) 格式，需要引号。其中，a 为alpha通道，取值 0~1 之间，建议 0.5 或 .5

*/

var lz = { papa: '#mydiv', total: 100, radius: 1, color: 'rgba(205,205,0,.5)' }

</script>

马黑黑 · 发表于 2024-4-12 07:51

本帖最后由马黑黑于 2024-4-12 08:03 编辑

帖子所使用的JS资源已经封装音频与粒子效果的联动功能，音频播放，粒子运动，音频暂停，粒子停止运动。

音频播放暂停控制为帖子容器元素，在帖子的任何地方点击均能暂停/播放音乐。点击帖子，粒子有响应动作。

粒子除相应鼠标在帖子上的点击操作外，还能相应鼠标在帖子上的悬停操作：若鼠标悬停与帖子界面某处，粒子会非常缓慢地向鼠标指针方向聚拢、成团，形状极其美妙。鼠标移开，它们会自动散开，鼠标点击，它们会跳弹而去。还有，响应鼠标指针在帖子上的移动操作，请自行体会。

粒子核心代码来源于网络，我仅根据应用场景和功能需求做些增删修改并封装成独立资源。