鼠标点击自定义文字展现特效JS代码

最新推荐文章于 2025-10-17 05:06:27 发布

转载最新推荐文章于 2025-10-17 05:06:27 发布 · 756 阅读

文章标签：

#js #JS

JS 专栏收录该内容

14 篇文章

订阅专栏

本文提供了一段简单的JavaScript代码，用于实现网页上的鼠标点击特效。当用户点击页面时，会在光标位置显示社会主义核心价值观的关键词并向上淡出消失。此特效通过监听click事件并在指定位置创建和动画化元素实现。

只需将如下JS代码放到</body>之前就好了。也可以保存为JS文件，通过链接调取。

<script type="text/javascript">
/* 鼠标特效 */
(function() {
    var coreSocialistValues = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"],
    index = Math.floor(Math.random() * coreSocialistValues.length);
    document.body.addEventListener('click',
    function(e) {
        if (e.target.tagName == 'A') {
            return;
        }
        var x = e.pageX,
        y = e.pageY,
        span = document.createElement('span');
        span.textContent = coreSocialistValues[index];
        index = (index + 1) % coreSocialistValues.length;
        span.style.cssText = ['z-index: 9999999; position: absolute; font-weight: bold; color: #ff6651; top: ', y - 20, 'px; left: ', x, 'px;'].join('');
        document.body.appendChild(span);
        animate(span);
    });
    function animate(el) {
        var i = 0,
        top = parseInt(el.style.top),
        id = setInterval(frame, 16.7);
        function frame() {
            if (i > 180) {
                clearInterval(id);
                el.parentNode.removeChild(el);
            } else {
                i += 2;
                el.style.top = top - i + 'px';
                el.style.opacity = (180 - i) / 180;
            }
        }
    }
} ());
</script>