JavaScript

【JavaScript】マウスが動いていないときの画像切替

画像枠内でマウスを動かすとモノクロ画像、マウスを動かさないとカラー画像にフェードインアウトで切り替えます。

サンプルはこちら 画像切替サンプル



マウスが止まってから6秒後にカラー画像に変わっていきます。

マウスが動いていないときの判定は、
3秒おきにマウスポインタの座標を取得、比較をして座標が同じだったら動いていないということにしました。

HTML
<div id="content">
<img id="mono" class="fadein" src="http://akiko-hatayama.chips.jp/blog/wp-content/uploads/mono.png">
<img id="color" class="fadeout" src="http://akiko-hatayama.chips.jp/blog/wp-content/uploads/color.png">
</div>

CSS
.fadeout{
opacity: 0;
transition: 3s ease-in-out;
-webkit-transition: 3s ease-in-out;
}
.fadein{
opacity: 1;
transition: 3s ease-in-out;
-webkit-transition: 3s ease-in-out;
}
#content{
position: relative;
}
#mono{
position: absolute;
}

JavaScript
backgroundImage = new Array(
"http://akiko-hatayama.chips.jp/blog/wp-content/uploads/mono.png",
"http://akiko-hatayama.chips.jp/blog/wp-content/uploads/color.png"
)

//表示フラグ
var displayFlg = 0;
//座標比較フラグ
var comparisonFlg = 0;

//X座標
var xCoordinate = 0;
//X座標1
var xCoordinateNo1 = 0;
//X座標2
var xCoordinateNo2 = 0;
//Y座標
var yCoordinate = 0;
//Y座標1
var yCoordinateNo1 = 0;
//Y座標2
var yCoordinateNo2 = 0;
//home領域
var region = document.getElementById("content");

//マウスが動いたとき
region.onmousemove = function (e){
    displayFlg = 0;

    //モノクロ表示
    changPhoto(displayFlg);

    xCoordinate = e.clientX;
    yCoordinate = e.clientY;
};

//3秒おきに座標を比較
setInterval('xyComparison()',3000);


//座標を比較
function xyComparison () {
    if (comparisonFlg === 0) {
      xCoordinateNo1 = xCoordinate;
      yCoordinateNo1 = yCoordinate;
      comparisonFlg = 1;
    }else{
      xCoordinateNo2= xCoordinate;
      yCoordinateNo2= yCoordinate;
      comparisonFlg = 0;
    }
    //座標が動いていないとき
    if(xCoordinateNo1 === xCoordinateNo2 && yCoordinateNo1 === yCoordinateNo2){
      displayFlg = 1;

      //カラー表示
      changPhoto(displayFlg);
    }
};

//表示切替
function changPhoto ($displayFlg) {
    //モノクロ表示
    if (displayFlg === 0) {
      document.getElementById("mono").src = backgroundImage[displayFlg];
      document.getElementById("mono").className = "fadein";
      document.getElementById("color").className = "fadeout";
    }
    //カラー表示
    if (displayFlg === 1) {
      document.getElementById("color").src = backgroundImage[displayFlg];
      document.getElementById("mono").className = "fadeout";
      document.getElementById("color").className = "fadein";
    }
};

HTML/CSS/JavaScript
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>画像切替サンプル</title>
<style>
.fadeout{
opacity: 0;
transition: 3s ease-in-out;
-webkit-transition: 3s ease-in-out;
}
.fadein{
opacity: 1;
transition: 3s ease-in-out;
-webkit-transition: 3s ease-in-out;
}
#content{
position: relative;
}
#mono{
position: absolute;
}
</style>
</head>
<body>
<div id="content">
<img id="mono" class="fadein" src="http://akiko-hatayama.chips.jp/blog/wp-content/uploads/mono.png">
<img id="color" class="fadeout" src="http://akiko-hatayama.chips.jp/blog/wp-content/uploads/color.png">
</div>

<script>
//-----------------------------
//背景画像切り替え
//-----------------------------
backgroundImage = new Array(
"http://akiko-hatayama.chips.jp/blog/wp-content/uploads/mono.png",
"http://akiko-hatayama.chips.jp/blog/wp-content/uploads/color.png"
)

//表示フラグ
var displayFlg = 0;
//座標比較フラグ
var comparisonFlg = 0;

//X座標
var xCoordinate = 0;
//X座標1
var xCoordinateNo1 = 0;
//X座標2
var xCoordinateNo2 = 0;
//Y座標
var yCoordinate = 0;
//Y座標1
var yCoordinateNo1 = 0;
//Y座標2
var yCoordinateNo2 = 0;
//home領域
var region = document.getElementById("content");

//マウスが動いたとき
region.onmousemove = function (e){
    displayFlg = 0;

    //モノクロ表示
    changPhoto(displayFlg);

    xCoordinate = e.clientX;
    yCoordinate = e.clientY;
};

//3秒おきに座標を比較
setInterval('xyComparison()',3000);

//座標を比較
function xyComparison () {

    if (comparisonFlg === 0) {
      xCoordinateNo1 = xCoordinate;
      yCoordinateNo1 = yCoordinate;
      comparisonFlg = 1;
    }else{
      xCoordinateNo2= xCoordinate;
      yCoordinateNo2= yCoordinate;
      comparisonFlg = 0;
    }
    //座標が動いていないとき
    if(xCoordinateNo1 === xCoordinateNo2 && yCoordinateNo1 === yCoordinateNo2){
      displayFlg = 1;

      //カラー表示
      changPhoto(displayFlg);
    }
};


//表示切替
function changPhoto ($displayFlg) {
    //モノクロ表示
    if (displayFlg === 0) {
      document.getElementById("mono").src = backgroundImage[displayFlg];
      document.getElementById("mono").className = "fadein";
      document.getElementById("color").className = "fadeout";
    }
    //カラー表示
    if (displayFlg === 1) {
      document.getElementById("color").src = backgroundImage[displayFlg];
      document.getElementById("mono").className = "fadeout";
      document.getElementById("color").className = "fadein";
    }
};
</script>
</body>
</html>

カテゴリー

おすすめ記事

アーカイブ

PAGE TOP