1

哦，我的新网站的初始屏幕我希望有一个鼠标悬停事件，每次移动鼠标时都会改变我的徽标颜色。下面我列出了到目前为止的代码，但我无法让它显示我的图像。

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() 和一个数组来调用图像。

4

2 回答 2

0

这应该是这样的：

document.write('<img src="' + image[rand] + '">');

（据我所见，您的脚本充满了错误。我会为您快速编写一个有效的示例。）

这是一个工作示例（我认为这就是您想要的）Jsfiddle 示例 如您所见，它的效果很糟糕，我不建议使用它。

于 2013-03-03T18:02:50.227 回答
0

我制作了一个 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);
};
于 2013-03-03T18:49:01.473 回答