0

我有下面的代码，当我将鼠标悬停在该元素上时，“logo p”会更改该元素中每个字符的颜色，因此每个字符都有随机颜色。

我应该如何让这个脚本在页面加载时运行。因此，当页面或特定元素加载时，将执行以下代码。我想让每个角色都有随机颜色，不仅在悬停时，而且在所有时间。

$(document).ready(function() {
    // COLOURS ARRAY
    var colours = Array("#B0171F", "#FF3E96", "#FF00FF", "#8B008B", "#9400D3", "#BF3EFF",     "#B22222", "#FF0000", "#800000", "#8E388E", "#bc8f8f"), idx;
    $("#logo p").hover(function(){
        var header = $(this); 
        var characters = header.text().split('');
        header.empty();  
        var content = '';
        for(var i = 0; i < characters.length; i++) {
            idx = Math.floor(Math.random() * colours.length);
            content += '<span style="color:'+colours[idx]+'">' + characters[i] + '</span>'; 
        }
        header.append(content);
    }, function() {
        $(this).find('span').contents().unwrap();
    });
});
4

4 回答 4

0

可能是我不明白这个问题，但你可以简单地在准备好的文档上执行你的代码：

    $(document).ready(function() {
    var colours = Array("#B0171F", "#FF3E96", "#FF00FF", "#8B008B", "#9400D3", "#BF3EFF","#B22222", "#FF0000", "#800000", "#8E388E", "#bc8f8f"), idx;
    var header = $("#logo p");
    var characters = header.text().split('');
    header.empty();  
    var content = '';
    for(var i = 0; i < characters.length; i++) {
        idx = Math.floor(Math.random() * colours.length);
        content += '<span style="color:'+colours[idx]+'">' + characters[i] + '</span>'; 
    }
    header.append(content);
});

小提琴

如果你想让它一直切换颜色，你可以把你的代码放在 setInterval

这是Fiddle。

于 2013-09-30T05:13:52.460 回答
0

尝试.each

<script type="text/javascript">
$(document).ready(function() {
// COLOURS ARRAY
var colours = Array("#B0171F", "#FF3E96", "#FF00FF", "#8B008B", "#9400D3", "#BF3EFF",     "#B22222", "#FF0000", "#800000", "#8E388E", "#bc8f8f"), idx;
$("#logo p").each(function(){
    var header = $(this); 
    var characters = header.text().split('');
    header.empty();  
    var content = '';
    for(var i = 0; i < characters.length; i++) {
        idx = Math.floor(Math.random() * colours.length);
        content += '<span style="color:'+colours[idx]+'">' + characters[i] + '</span>'; 
    }
    header.append(content);
}, function() {
    $(this).find('span').contents().unwrap();
});
});
</script>
于 2013-09-30T05:05:15.350 回答
0

而不是在页面加载上使用hoverusemouseenter和and ，只需在元素上触发事件，比如 , ，所以你可以试试这个mouseleavemouseentertarget.trigger('mouseenter');

$(function(){
    var colours = Array( "#B0171F", "#FF3E96", "#FF00FF", "#8B008B", "#9400D3", "#BF3EFF", "#B22222", "#FF0000",          "#800000", "#8E388E", "#bc8f8f" );
    $("#logo p").on('mouseenter', function(){
        var header = $(this), characters = (header.text()).split(''), content = '';
        header.empty();  
        for(var i = 0; i < characters.length; i++) {
            var idx = Math.floor(Math.random() * colours.length);
            content += '<span style="color:'+colours[idx]+'">' + characters[i] + '</span>'; 
        }
        header.append(content);
    })
    .on('mouseleave', function(){
        $(this).find('span').contents().unwrap();
    }).trigger('mouseenter');
});

演示。

这将适用于页面加载，也适用于hover(mouseenter/mouseleave)并且不需要单独的处理程序load和hover。

于 2013-09-30T05:32:24.773 回答
0

将其转换为函数并在页面加载时调用：

$(document).ready(function () {

    function changeElements() {
        // COLOURS ARRAY
        var colours = Array("#B0171F", "#FF3E96", "#FF00FF", "#8B008B", "#9400D3", "#BF3EFF", "#B22222", "#FF0000", "#800000", "#8E388E", "#bc8f8f"),
            idx;
        $("#logo p").each(function(){
            var header = $(this);
            var characters = header.text().split('');
            header.empty();
            var content = '';
            for (var i = 0; i < characters.length; i++) {
                idx = Math.floor(Math.random() * colours.length);
                content += '<span style="color:' + colours[idx] + '">' + characters[i] + '</span>';
            }
            header.append(content);
        }, function () {
            $(this).find('span').contents().unwrap();
        });
    }
    changeElements();
});
于 2013-09-30T05:09:46.620 回答