鼠标悬停即使在javascript中也不会输出

Mouseover even in javascript wont output

本文关键字：输出 javascript 悬停 鼠标      更新时间：2023-09-26

哦，我的新网站的闪屏，我希望有一个鼠标悬停事件，这将改变我的标志的颜色每次鼠标被移动。下面我列出了目前为止的代码，但我无法让它显示我的图像。

var images = new Array()
images[0] = 'img/CMbl.png'
images[1] = 'img/CMo.png'
images[2] = 'img/CMg.png'
images[3] = 'img/CMp.png'
images[4] = 'img/CMblu.png'
var p = images.length;
logo = document.getElementById( 'logo' ),
console = document.getElementById( 'console' );

logo.addEventListener('mousemove', changeImage);

function changeImage() {
var rand = Math.round(Math.random()*(p-1));
var image = p[ rand ];
if ( image == logo.src ) {
    changeImage();
    return false;
}

logo.src = console.innerText = image;
    function showImage(){
        document.write('<img src="+image[rand]">');
    }
}

和我在html中的输出应该是(在类'logo'中)

<script language="javascript">
showImage()
</script>

我不明白为什么它不工作。我使用类似的代码在刷新时更改图像，它仍然使用math.random()和一个数组来调用图像。

应该是这样的:

document.write('<img src="' + image[rand] + '">');
在我看来，你的剧本错误百出。我将为您做一个快速的，有效的例子。

这是一个工作的例子(我认为这是你想要的)正如你所看到的，它产生了一个可怕的效果，我不建议使用它。

我已经做了一个JSfiddle，它清理了一些代码，并使用了jQuery。

http://jsfiddle.net/jackcannon/2EXs5/

var images = [
        'http://colorvisiontesting.com/plate%20with%205.jpg',
        'http://regentsparkcollege.org.uk/wp-content/uploads/2012/09/test.jpg',
        'http://nyquil.org/uploads/IndianHeadTestPattern16x9.png',
        'http://25.media.tumblr.com/tumblr_m9p3n1vJmZ1rexr16o1_400.jpg',
        'http://www.themoralofthestoryis.com/wp-content/uploads/2013/01/test.gif'
    ];

$('#logo').mouseover( changeImage );
function changeImage() {
    var rand = Math.floor(Math.random() * images.length);
    var image = images[ rand ];
    if ( image == $('#logo').attr('src') ) {
        changeImage();
        return false;
    }
    $('#logo').attr('src', image);
};
相关文章：