实现原理
通过监听鼠标点击事件，动态创建带有关键词的文字元素，结合CSS动画实现点击特效。当用户点击页面任意位置时，会在点击坐标处生成包含”富强、民主、和谐”的浮动文字，文字呈现淡入淡出效果后自动消失。
代码实现步骤
1. 创建HTML结构
在<body>底部添加初始化脚本：
<script>
// 鼠标点击特效初始化代码将在此处编写
</script>2. 实现核心功能
在脚本标签中添加以下JavaScript代码：
document.addEventListener('click', function(e) {
// 定义关键词数组
const keywords = ['富强', '民主', '和谐'];
// 创建文字元素
const el = document.createElement('div');
el.className = 'click-effect';
// 随机选择关键词
el.textContent = keywords[Math.floor(Math.random() * keywords.length)];
// 设置元素位置
el.style.left = `${e.clientX}px`;
el.style.top = `${e.clientY}px`;
// 添加元素到页面
document.body.appendChild(el);
// 设置自动移除（动画结束后）
setTimeout(() => {
el.remove();
}, 1000);
});效果增强技巧
- 动画优化：可通过修改
@keyframes fadeOut实现不同动画效果，如添加旋转、缩放等 - 样式自定义：
- 修改
color属性调整文字颜色 - 调整
font-size改变文字大小 - 通过
text-shadow增强立体感
- 位置偏移：在
e.clientX/Y基础上增加随机偏移量，使文字呈现更自然的分布
完整JavaScript代码
<!--鼠标点击文字-->
<script type="text/javascript">
// 鼠标特效实现
let a_idx = 0;
const keywords = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
document.addEventListener('DOMContentLoaded', () => {
document.body.addEventListener('click', (e) => {
// 创建文字元素
const span = document.createElement('span');
span.textContent = keywords[a_idx];
a_idx = (a_idx + 1) % keywords.length;
// 设置样式
span.style.position = 'absolute';
span.style.zIndex = '999999999999999999999999999999999999999999999999999999999999999999999';
span.style.top = `${e.pageY - 20}px`;
span.style.left = `${e.pageX}px`;
span.style.fontWeight = 'bold';
span.style.color = '#ff6651';
// 添加到页面
document.body.appendChild(span);
// 执行动画
animateElement(span, e.pageY - 180);
});
});
/**
* 元素动画函数
* @param {HTMLElement} element - 要动画的元素
* @param {number} targetY - 目标Y坐标
*/
function animateElement(element, targetY) {
// 设置初始状态
element.style.transition = 'all 1.5s ease-out';
element.style.opacity = '1';
// 执行动画
setTimeout(() => {
element.style.top = `${targetY}px`;
element.style.opacity = '0';
// 动画结束回调
setTimeout(() => {
element.remove();
}, 1500);
}, 10);
}
</script>
<!--鼠标点击文字-->实际应用场景
![图片[1]-使用原生JavaScript为网站添加”富强、民主、和谐”鼠标点击特效-QQ沐编程](https://www.qqmu.com/wp-content/uploads/2025/07/js-dianji.png)
该特效可应用于：
- 政务类网站互动增强
- 新闻资讯站的爱国教育页面
- 企业官网的品牌价值观展示
- 社区论坛的文明互动提示
常见问题解答
Q：如何修改文字显示时长？
A：修改setTimeout的1000毫秒参数，并同步调整CSS动画持续时间
Q：文字位置偏移不自然？
A：可添加随机偏移计算：
const offsetX = Math.random() * 20 - 10;
const offsetY = Math.random() * 20 - 10;
el.style.left = `${e.clientX + offsetX}px`;
el.style.top = `${e.clientY + offsetY}px`;Q：如何添加更多关键词？
A：只需扩展keywords数组：
const keywords = ['富强', '民主', '和谐', '自由', '平等', '公正'];扩展阅读
通过以上实现，您可以快速为网站添加符合社会主义核心价值观的互动特效，在提升用户体验的同时传递正能量。建议在实际部署时根据网站主题适当调整颜色和动画参数，使效果更自然和谐。
© 版权声明
本站资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。敬请谅解！
THE END
