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

コードの一部をクリーンアップし、jQueryを利用するJSfiddleを作成しました。

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 に答える