Question

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

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中的输出应该是（在课堂内＆＃39;徽标＆＃39;）

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

我不明白为什么它不起作用。我使用类似的代码在刷新时更改图像，仍使用math.random（）和数组来调用图像。

Answer 1

这应该是这样的：

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

（你的剧本充满了我所看到的错误。我会以你的方式为你做一个快速的工作。）

这是一个有效的例子（我认为这就是你想要的）Jsfiddle example 正如你所看到的，它看起来很糟糕，我不建议使用它。

Answer 2

我已经创建了一个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);
};

javascript中的鼠标悬停事件将不会输出

2 个答案: