キラキラ画像がマウスに付いてくるブログパーツ「Pika_Mouse」

By , 2012年5月7日


この度は、FC2に共有申請させていただいた。ブログパーツ「Pika_Mouse」についての解説です。
この、Pika_Mouseをお使いのサイトに設置すれば、キラキラ画像がマウスについてくるようになります。

それでは、詳細は続きから。

【はじめに】

まず初めに、当プラグイン「Pika_Mouse」をダウンロードしてくださり
誠にありがとうございました。

この「Pika_Mouse」をお使いのサイトに設置すれば、キラキラ画像がマウスについてくるようになります。

【動作環境】

IE4・IE5・IE5.5・IE6・IE7・IE8
Firefox2 Firefox3
Opera
Safari

大体主要ブラウザの殆どに対応していることを確認致しました。

【プレビュー】

Pika_Mouse」をお試し表示する

http://annkokunokizinn.blog116.fc2.com/?plugin=27997&index

【ダウンロードURL】

共有プラグインの欄のURLで
?plugin=27997&index

共有プラグインナンバー
27997

【~コード~上記利用規約を守り、コピーしてお使いください】

//~~▼JavaScriptコードここから▼~~

<script language="JavaScript1.2">
<!--
/**********************************
初めに当プラグイン「PikaPika_Mouse」をダウンロードしていただき
ありがとうございます。利用規約は以下のようになっています。
・二次配布:不可
・アダルトサイト:使用不可

PikaPika_Mouse(プラグイン)の詳細

http://3et.org/production/pikapika-mouse.html

******************************************/

//表示する画像の数を指定(デフォルトでは7)
var imgset = 7;

// 画像のURLを変更することで表示する画像を変更できます。
var url = "http://blog-imgs-19.fc2.com/a/n/n/annkokunokizinn/pikas_js.gif";

var browser=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //IE6かの判定
var i,a = 0;

function initimg() { // スクリプトの準備
 images = new Array() // 画像配列のSET
 for (i = 0; i < parseInt(imgset); i++) {
 images[i] = new Image();
 images[i].src = url;
 }
 imgmove = new Array() // 座標格納配列のSET
 for (i = 0; i < images.length*14;i++) {
 imgmove[i] = 0;
 }
 for (i = 0; i < images.length; i++) {
 document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images[i].src + '"></div>');
 }
 loope();
}

function loope() {// 画像の引き続き関数
 for (i = 0; i < images.length; i++) {
 document.getElementById("obj" + i).style.top = imgmove[a]+'px';
 document.getElementById("obj" + i).style.left = + imgmove[a+1]+'px';
 a+=16;
 }

 for (i = imgmove.length; i >= 2; i--) { // 座標保持
 imgmove[i] = imgmove[i-2];
 }
 a = 0; // reset for future use
 var timer = setTimeout("loope()",10); // 再呼び出しタイム
}

function Pevent(s) { // イベントと処理(画像の位置座標)
 if (window.event) { //IE用
 imgmove[0] = window.event.y+browser.scrollTop+10;
 imgmove[1] = window.event.x+browser.scrollLeft+10;
 } else {
 imgmove[0] = s.pageY+12;
 imgmove[1] = s.pageX+12;
 }
}
 initimg();
 document.onmousemove = Pevent; // イベントの処理
//-->
</script>
<noscript>
お使いの環境ではこのJavaScriptは動作しないようです
動作環境に関するご報告は<a href="http://3et.org/">3et.org</a>までお願い致します。
</noscript>
<!--プラグイン作者記述領域-->
<div style="padding-left:2px;">
powered by<br>
<a href="http://3et.org/"><img src="http://blog-imgs-19.fc2.com/a/n/n/annkokunokizinn/3etorglogox100x100.jpg" alt="3ET"></a>
</div>

~JavaScriptコードここまで~

【様々なカスタマイズ】

今回のプラグインは上記のぴかぴか画像だけではなく他にも様々な
画像を降らせることも出来ます。

例えば表示する画像を替えたいときは以下の部分の数値を変更すると、表示する画像の数を変えることが出来ますし、

//表示する画像の数を指定(デフォルトでは7)
var imgset = 7;

以下の部分を変更することで、表示する画像を変更することも出来ます。

// 画像のURLを変更することで表示する画像を変更できます。
var url = “http://blog-imgs-19.fc2.com/a/n/n/annkokunokizinn/pikas_js.gif”;

【後書き】
少し前に見た、Flashで搭載されていた、マウスにキラキラ画像がついてくる機能をJavaScriptにて、実装してみました。

制作にあたって、大変だったところは、IEと他ブラウザなどにおいて、Firefoxでは正常に動作するにも拘わらず、IEでは、動作しなくなったりと、Scriptのブラウザ別の動作を調整するのが大変でした。普通にマウスについてくるだけの、スクリプトなら割と簡単なんですけどね。

prototype.jsなどの、ライブラリは使用していませんので、純粋にJSのみでコードが書かれています。

本当はブラウザごとの解釈の違いをまとめてくれる&処理の最適化などをしてくれる、JavaScriptライブラリを使用するのが、一番望ましいのですが、管理人自身、標準JS以外のライブラリは未勉強なので、今回は実装していません^^;

これから、機会があれば、高度なライブラリを使用したスクリプトも書いてみたい&学んでみたいな~と思っています。

それでは、このたびは「Pika_Mouse」をダウンロードしてくださり、誠にありがとうございました。
今後とも3ETを宜しくお願い致します。

関連記事:


コチラもあわせてどうぞ!
  1. JavaScriptメモ帳、その2
  2. 画像が降るJavaScript「PikaPika_Atlantis」共有プラグイン
  3. JavaScriptデバッグ中のエラーの種類について
  4. ポチッとSeeブックマーク概要
  5. ページランクをリンク一括チェック!?ページランクChecker

4 Responses to “キラキラ画像がマウスに付いてくるブログパーツ「Pika_Mouse」”

  1. sd_kim より:

    こんにちは!キラキラのマウスストーカーを探していてこちらのサイトを発見しました!さっそく自分の個人ホームページで使用させていただこうと思いページに設定してみたところブラウザ自体をスクロールするとキラキラがマウスについてこなくなってしまいます、、、なにか回避方法ってございますか?とっても気に入っているのでどうしても使いたいです!!

  2. ミスさじべ より:

    こんにちは。
    早速入れてみましたが、スクロールダウンすると★がついてこなくなります。どうすれば直りますか?
    それと色なんですが、ゴールドの★とかに変えれる方法はありますか?

  3. payday loans より:

    Oh my goodness! Amazing article dude! Thanks, However I am going through problems with your RSS.
    I don’t understand why I am unable to subscribe to it. Is there anyone else getting the same RSS issues? Anyone who knows the solution can you kindly respond? Thanks!!

Leave a Reply


OfficeFolders theme by Themocracy