2

ユーザーがサムネイルをロールオーバーすると、画像が変更されるjsギャラリーを作成しようとしています。私はそれを正常に作成し、画像の変更に css3 フェードイン アニメーションを使用しましたが、正常に動作しますが、thumb1 でカーソルをロールオーバーすると、アニメーションが終了するのを待たずに別のサムネイルでロールオーバーすると、アニメーションなしで画像が変更されます。私の英語が上手ではないので説明が難しいので、私のコードを紹介します。

    <?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Untitled-1</title>
<style id="css21" type="text/css" media="screen">
html, body {
color : #405060;
font : normal normal normal 95%/1.5 Verdana, Tahoma, Arial, san-serif;
height : auto;
margin : 0;
padding : 0;
text-align : center;
width : auto; }
body {
background-color : #000000; }
div {
border : none;
margin : 0;
padding : 0; }
div#gscreen {
float : none;
height : 250px;
width : 100%;
clear : both;

-webkit-transition: background 1500ms ease-in 0ms; /* property duration timing-function delay */
-moz-transition: background 1500ms ease-in 0ms;
-o-transition: background 1500ms ease-in 0ms;
transition: background 1500ms ease-in 0ms;  }
</style>
<script type="text/javascript">


var imageGallery = ( function() {

var xelem = ( function( xTag ) {
var ua = ((( ie = document.all.tags( xTag )) && !!!( ff = document.getElementsByTagName( xTag ))) ? 1 : 0 );
var xObj = null || { 0 : ff, 1 : ie }[ ua ];
return xObj;
} );
return function imageGallery( tagX ) {
var xItem = xelem("div");
var xScreen = xItem["gscreen"];
var xImg = xelem( tagX );
var iLen = xImg.length;
for ( i = 0; !!( xImg[ i ] ); i++ ) {
xImg[ i ].onmouseover = function() {
var xIndex = Number( this.id.match(/\d+/)[ 0 ] );
xScreen.style.background = " url(" + this.src + ") no-repeat top center";

}
}
}
} )();
onload = function() {
imageGallery("img")
}
</script>
</head>
<body>
<div id="gscreen"></div>

<img id="i0" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSMMlTzBMWSeD6IrQCLTT7urbpXORjY_2vqmA_mFj6OJcsfsH-yuw" height="100" width="200" style="background-image='url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSMMlTzBMWSeD6IrQCLTT7urbpXORjY_2vqmA_mFj6OJcsfsH-yuw)'" alt="test images" />
<img id="i1" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSlGvpoCsCgGcX74IWG5YNmjULh1Q428frxtmabTCNM_aVKFGH9" style="background-image='url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSMMlTzBMWSeD6IrQCLTT7urbpXORjY_2vqmA_mFj6OJcsfsH-yuw)'" height="100" width="200" alt="test images" />
<img id="i2" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ3DluQXJW-4stVrHlArRc6gZnuxqmKKyheZsDWt-kGjvfjj43M" height="100" width="200" style="background-image='url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSMMlTzBMWSeD6IrQCLTT7urbpXORjY_2vqmA_mFj6OJcsfsH-yuw)'" alt="test images" />
<img id="i3" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQDC56QxLfOgZyrX96BfPveif-dKlrDIwsB45uGlL3XicDL10EqlA" height="100" width="200" style="background-image='url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSMMlTzBMWSeD6IrQCLTT7urbpXORjY_2vqmA_mFj6OJcsfsH-yuw)'" alt="test images" />

</body>
</html>

したがって、「onmouseover」を実行した後に1500ミリ秒JavaScriptを一時停止すると、ユーザーは別のサムネイルをロールオーバーするときに関数を再度実行できなくなると思いますが、どうすればそれを行うことができますか? それとも、画像変更効果を修正するためのオプションが他にもあるのでしょうか?

回答ありがとうございます。

4

2 に答える 2

0

setTimeout 関数を使用できます

例：

// run this code after 1500ms
setTimeout(function () {
   // this code will run later;
   alert("Hello World");
},1500);

更新：あなたの場合

xImg[ i ].onmouseover = function() {
    var that = this;
    setTimeout(function () {
        var xIndex = Number( that.id.match(/\d+/)[ 0 ] );
        xScreen.style.background = " url(" + that.src + ") no-repeat top center";
    },1500);
}
于 2012-11-06T19:20:01.243 に答える
0

When the function starts, set the property to のimageGalleryようなプロパティを指定します。次に、関数の最後で、imageGallery.isReady = true;falsesetTimeout(function() {imageGallery.isReady = true;}, 1500);

関数が呼び出されたら、imageGallery.isReady = true;次のことを確認してください。そうでない場合は、関数を実行しないでください。ある場合は、それを実行します。

編集: または、関数の開始時にイベント リスナーを削除し、その後に再度追加することもできます。setTimeout();

于 2012-11-06T19:22:56.477 に答える