キラキラ画像がマウスに付いてくるブログパーツ「Pika_Mouse」
この度は、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を宜しくお願い致します。
関連記事：
- FC2共有テンプレート第一作「The-truth-Sky-Blue」
- FC2共有テンプレート第二作「Truth-AnotherVer」
- FC2共有テンプレート第三作「Nature_Mystery_2culm」
- FC2共有テンプレート第四作「Truth_Flare_Fire」
- FC2共有テンプレート第五作「White_Blue_Nature」
- FC2共有テンプレート第六作「Black_Clear_Clean」
- FC2共有テンプレート第七作「Clear_Glass_Seconds」
- FC2共有テンプレート第八作「Nature_Mystery_3C」
- FC2共有テンプレート第九作「Read_more」
- FC2共有テンプレート第十作「SkyBlue_Cloud」
- FC2携帯用共有テンプレート第一作「Mobile_Truth_Blue」審査合格
- FC2共有テンプレート制作者の心得
- 週間DLランキングトップ！ありがとうございます
- 英語や韓国など計8カ国の言語に対応させる翻訳プラグイン「World-Word-翻訳」
- キラキラ画像が降ってくるJavaScript製ブログパーツ「PikaPika_Atlantis」
- サイトのブックマーク数を全て表示！？「ポチッとSeeブックマーク」
- Googleページランクをワンクリックで一括チェック「ページランクChecker」
- 星のFlash時計「StarFirstWatch」
No related posts.
管理人の制作物
| 
JavaScript, ブログパーツ, マウス, マウスストーカー
こんにちは！キラキラのマウスストーカーを探していてこちらのサイトを発見しました！さっそく自分の個人ホームページで使用させていただこうと思いページに設定してみたところブラウザ自体をスクロールするとキラキラがマウスについてこなくなってしまいます、、、なにか回避方法ってございますか？とっても気に入っているのでどうしても使いたいです！！
こんにちは。
早速入れてみましたが、スクロールダウンすると★がついてこなくなります。どうすれば直りますか？
それと色なんですが、ゴールドの★とかに変えれる方法はありますか？