WordPress给鼠标点击添加颜色效果

2024年6月16日 · 阅读需 3 分钟

WordPress子主题实现：鼠标在空白处摁下左键，会弹出五彩斑斓的颜色

要在WordPress子主题中实现这样的效果，你需要使用JavaScript来捕获鼠标左键按下事件，并在空白处生成五彩斑斓的颜色。以下是实现此功能的基本步骤：

在子主题中添加JavaScript

创建JavaScript文件：在你的WordPress子主题目录下创建一个新的JavaScript文件，比如 custom.js。

// custom.js
jQuery(document).ready(function($) {
    $(document).mousedown(function(event) {
        // Check if left mouse button is pressed
        if (event.which === 1) {
            // Generate random RGB color
            var color = getRandomColor();
            // Create a div with the color at mouse position
            createColorSpot(event.pageX, event.pageY, color);
        }
    });

    function getRandomColor() {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return 'rgb(' + r + ',' + g + ',' + b + ')';
    }

    function createColorSpot(x, y, color) {
        // Create a colored div at the specified position
        var $spot = $('<div></div>').css({
            'position': 'absolute',
            'left': x + 'px',
            'top': y + 'px',
            'width': '20px',
            'height': '20px',
            'background-color': color,
            'border-radius': '50%'
        });

        // Append the div to the body
        $('body').append($spot);

        // Fade out and remove the div after a certain time
        $spot.fadeOut(1500, function() {
            $(this).remove();
        });
    }
});

将JavaScript文件添加到WordPress主题中：打开你的子主题的 functions.php 文件，在其中添加以下代码将 custom.js 文件包含进来。

function add_custom_scripts() {
    wp_enqueue_script('custom-script', get_stylesheet_directory_uri() . '/custom.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'add_custom_scripts');

解释与功能说明

jQuery Document Ready：确保文档加载完成后再执行JavaScript代码。
mousedown事件监听：捕获鼠标左键按下事件。
event.pageX和event.pageY：获取鼠标点击位置的页面坐标。
getRandomColor函数：生成随机的RGB颜色值。
createColorSpot函数：创建一个带有随机颜色的div，并将其放置在鼠标点击的位置上。
fadeOut和remove：设置颜色块淡出并在淡出完成后从DOM中移除，以避免页面过度加载。

注意事项

这段代码假设你的子主题中已经包含了jQuery库。大多数WordPress主题都会自带jQuery，但如果没有，你需要将其手动添加到你的主题中。
这种效果会在用户点击页面空白处时产生颜色斑点，但它们会渐渐消失，而不会永久留在页面上。

通过这些步骤，你就可以在WordPress子主题中实现在空白处按下鼠标左键时产生五彩斑斓颜色的效果了。

在子主题中添加JavaScript​

解释与功能说明​

注意事项​

在子主题中添加JavaScript

解释与功能说明

注意事项