マウスストーカーやクリックで図が飛び散るjavascript

質問

マウスストーカーやクリックで図が飛び散るjavascript

知人からHP作成を頼まれて作っています。
マウスストーカーやクリックした箇所で図柄が飛び散る
javascriptってありますよね。
私自身からは「見難くなるからやめた方がいい」と進言したのですが、
当の本人がどうしてもと言うので、仕方なくインターネット上で
コードを探してきて必要箇所（図柄のパスなど）を変更して
作動するようにしました。

しかし、マウスストーカーの図柄はカーソルのある場所とは離れたところに
表示されてしまいます。
飛び散るほうは、クリックした場所とは違う場所で飛び散ったりします。

ブラウザ画面の左右の両端の方では正常な動きをするのですが、
文字や画像のある部分では上記のような動きになってしまいます。

この原因か対策方法をご存じの方がおられましたら、
どうかご教示ください。

宜しくお願いいたします。

Windows　Vista
使用ブラウザ：IE7

回答No.10

yyr446 · ベストアンサー

ごみ消し忘れ、他
<title>PopUpTest</title>
と
<div id="popup" style="display:none;border:1px solid black;">
　Pop Up
</div>
は全然関係ないごみです。

それから、
　　 var hahens=[];
　　 for(var i=0;i<36;i++){
　　　hahens[i]=hahen.cloneNode(true);
　　　hahens[i].className="hahen";
　　　hahens[i].style.fontSize=size[dist];
　　　hahens[i].style.color=color[dist];
　　　document.body.appendChild(hahens[i]);
　　 }
はループの中で毎回作らない方が早いかもしれない。

お礼

yyr446様ぁ～～！！！

わたくしめの為に、このようなプログラムを作って頂きまして
ありがとうございます。
これだけのコードを書くというのは大変だったのではないでしょうか？
早速試させていただきましたところ、firefoxとsafariでは見事に散りました。
ただ、わたくしのスキル不足で
既存のHPにどのようにコードを足して良いかわからず・・・
せっかく書いて頂いたので、頑張ってみますね。

何よりも、どこの馬の骨ともわからないわたくしの為に、
これほどの労力を掛けてくれたことに感動しました。
これを機に、javascriptを勉強してみようという気にもなりました。

深く深く感謝いたします。
本当にありがとうございました。

回答No.9

yyr446

---Part3-----
var fadein = function (node,interval){
　this.counter = 0;
　this.target = node;
　this.interval = interval;
　this.timerId = setInterval((function(that){
　 return function(){that.loop();};
　})(this),this.interval);
　this.stop = function (elm) {
　 this.timerId && clearInterval(this.timerId);
　 this.timerId = null;
　};
　this.loop = function(){
　 this.target.style.opacity = this.counter*2 / 100;
　 this.target.style.filter = "alpha(opacity=" + this.counter*2 + ")";
　 if( ++this.counter>50) this.stop(this.target);
　};
};
var fadeout = function (node,interval){
　this.counter = 50;
　this.target = node;
　this.interval = interval;
　this.timerId = setInterval((function(that){
　 return function(){that.loop();};
　})(this),this.interval);
　this.stop = function (elm) {
　 this.timerId && clearInterval(this.timerId);
　 this.timerId = null;
　};
　this.loop = function(){
　 this.target.style.opacity = this.counter*2 / 100;
　 this.target.style.filter = "alpha(opacity=" + this.counter*2 + ")";
　 if( --this.counter<0) this.stop(this.target);
　};
};
</script>
</body>
</html>
------------------
これで全部、全角空白は半角空白に直す事！
実働デモは参照URLへ（いつまでも同じものがあるとは限らない）

回答No.8

yyr446

---Part2-----
　function clickFunc(event,hahen,range){
　 var dx=range.w/14,dy=range.h/14;
　 this.genten={"x":0,"y":0};
　 this.genten.x=event.clientX+(window.pageXOffset||document.body.scrollLeft);
　 this.genten.y=event.clientY+(window.pageYOffset||document.body.scrollTop);
　 var main_timer= setInterval((function(dist){
　　 return function(){
　　 var size=['xx-small','x-small','small','medium','large','x-large','xx-large'];
　　 var color=['Red','Orange','Yellow','Green','Blue','Navy','Purple'];
　　 var ddx=dx+dx*dist;
　　 var ddy=dy+dy*dist;
　　 var hahens=[];
　　 for(var i=0;i<36;i++){
　　　hahens[i]=hahen.cloneNode(true);
　　　hahens[i].className="hahen";
　　　hahens[i].style.fontSize=size[dist];
　　　hahens[i].style.color=color[dist];
　　　document.body.appendChild(hahens[i]);
　　 }
　　 for(var i=0;i<36;i++){
　　　var x= Math.round(ddx * Math.cos(Math.PI*2*i/36))+this.genten.x;
　　　var y= Math.round(ddy * Math.sin(Math.PI*2*i/36))+this.genten.y;
　　　if(x<0)x=0;if(x>range.w)x=range.w;if(y<0)y=0;if(y>range.h)y=range.h;
　　　hahens[i].style.left=x+"px";
　　　hahens[i].style.top=y+"px";
　　　hahens[i].style.filter="alpha(opacity=0)";
　　　hahens[i].style.opacity=0;
　　　hahens[i].style.display="block";
　　 }
　　 for(var i=0;i<36;i++){
　　　fadein.start(hahens[i],1);
　　 }
　　 for(var i=0;i<36;i++){
　　　fadeout.start(hahens[i],1);
　　 }
　　 if( ++dist>6) stop();
　 };})(0),2000);
　 function stop(){
　　 clearInterval(main_timer);
　　 var gomi=document.querySelectorAll(".hahen");
　　 for(var i=0;i<gomi.length;i++){
　　　document.body.removeChild(gomi[i]);
　　 }
　 }
　 fadein.start = function(target,interval){
　　 new fadein(target,interval );
　 }
　 fadeout.start = function(target,interval){
　　 new fadeout(target,interval );
　 }
　}
}

回答No.7

yyr446

爆発というより、花火になってしまった。
しかもIEではフェードイン/アウトがぎくしゃく、しかもおそーい。
window.setIntervalの時間調整だけでは調整困難だ。
その他つっこみどころ満載です。
長いので２回に分けて
---Part1-----
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>PopUpTest</title>
<style type="text/css">
.hahen {display:none;position:absolute;}
</style>
</head>
<body>
<div id="hahen" style="color:red;display:none;">★</div>
<div id="popup" style="display:none;border:1px solid black;">
　Pop Up
</div>
<script type="text/javascript">
explode(document.querySelector("#hahen"));
function explode(hahen){
　this.range={"w":window.innerWidth||document.documentElement.clientWidth,
　　　　　　　 "h":window.innerHeight||document.documentElement.clientHeight}
　if('undefined' !== typeof document.addEventListener){
　 document.addEventListener('click',function(event){
　　　clickFunc(event,hahen,range);
　　 },true);
　 window.addEventListener('resize',function(){
　　　this.range.w=window.innerWidth,this.range.h=window.innerHeight;
　　 },true);
　}else if('undefined' !== typeof document.attachEvent){
　 document.attachEvent('onclick',function(event){
　　　clickFunc(event,hahen,range);
　　 });
　 window.attachEvent('onresize',function(){
　　　this.range.w=document.documentElement.clientWidth;
　　　this.range.h=document.documentElement.clientHeight;
　　 });
　}

回答No.6

yyr446

とりあえず、「jQuery UI Efect」の例を紹介
ぱっと見たところ、位置に左右されないはず。
飛び散らせたい<div>にidをふっておくだけです。
--------------
<head>
----------------
<link type="text/css" href="jquery.ui.all.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.effects.core.js"></script>
<script type="text/javascript" src="jquery.effects.explode.js"></script>
<style type="text/css">
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
</style>
<script type="text/javascript">
function explode(){
　$("#effect").effect('explode',{},500,modosu);
};
function modosu(){
　setTimeout(function(){
　　$("#effect:hidden").removeAttr('style').hide().fadeIn();
　},1000);
};
</script>
</head>
<body>
　<div id="effect" class="ui-widget-content ui-corner-all">
　　<p>この中が飛び散る。この中が飛び散る。この中が飛び散る。</p>
　</div>
</body>

※ explode()をクリックとかマウスストーカー（何のこっちゃ）のイベントで
よんでやればよい。＜＝それもjQuery使っちゃて、$("#hoge").click(explode)とか
※オリジナル爆発見たかったら、しばらく放置プレーしてね。

回答No.5

yyr446

マウスイベントで発火して爆発する文字
クリックした点（x,y）から、2PI/ｎの方向にｎ個の破片を撒き散らす。
破片の座標は、距離ｄとして(d*CosR,d*SinR)でｄはWindowsサイズから
適度に決めて、枠にあたるまで増加させていく。
破片は<div class="hahen">をコピーして、ｎ個クローンを作成
一回り大きい円を書いた時、内側の円を消す。
さらに、破片の大きさを外に行くほど大きくする（フォントサイズ）
さらに、破片のアルファ値も変化させよう。

以上を、つくるとおおむね２時間ぐらいか、オブジェクト思考して作ると
半日以上かかるかも．．．．

待てよ、jQuery UI Effect に爆発あったような気がする。

回答No.4

think49

状況は分かるのですが、実際のコードがどうなっているか、が示されていないので何とも回答しがたい状況です。

コード全部を掲載するか、URLを開示されれば、何らかの進展が期待できると思いますが…。
もし、それが難しい状況とすると、すぐに解決に導かれるような回答がつく可能性は相当低いと思います。

お礼

think49様

ご指摘ありがとうございます。
自分でも、情報不足は感じていましたが、
ついつい怠慢を・・・・・
これからは、回答者の皆様にも分かりやすい
質問内容にできるよう、心がけて参りたいと思います。

重ね重ねありがとうございました。

回答No.3

fujillin

No2です。

＞ご存じでしたらご教示いただけたらと思います。
残念ながら存じ上げません。

事象から想像すれば、座標系が混在しているのかと想像されます。（まったく違うかも知れません）
例えば、マウスの位置を対象要素の相対座標で取得して、表示する要素を絶対座標で指定すれば、座標系のずれの分だけずれて表示されるのが道理です。

＞わたくしjavascriptの知識がほとんどないため、
とのことですので、詳しく説明しても意味が無いでしょうから、参考になさっているサイトと同じような設定方法で設置するのが一番手っ取り早い方法ではないでしょうか？
もとのものがどのような仮定のもとに作られているかわかりませんので、どのようなCSSレイアウトをすると崩れるのかは私にはわかりません。
（↑）に書きましたように、まずは、元のものに近い形で設置してみて、少しずつ変えていってみれば、何をするとまずいのかはおのずとわかるのではないでしょうか？

あるいは、No1様がお勧めのように、要素の位置に依存しないようなスクリプトを探すとか？
（範囲限定という）お望みにぴったりのものがあるかどうかは、わかりませんが…

お礼

fujillin様

度重なるわたくしの質問に、親身になって
回答をしてくださり、ありがとうございました。
色々と自分なりに探しては見ましたが、
原因が見つけられませんでした。

コードを見ていると眩暈がしてきますけれど、
もう少し自分で勉強してみます。

本当にありがとうございました。

回答No.2

fujillin

何も情報がないので特定できませんが、

＞クリックした場所とは違う場所で飛び散ったりします
＞文字や画像のある部分では上記のような動きになってしまいます。

トリガーをどのように設定しているのか不明ですが、カーソル位置の取得に問題があるのでは？
画面上の座標は、event.clientX などで、
scrollの量（左上座標）は,
window.pageYOffset や (document.compatMode?document.body:document.documentElement).scrollTop
などで取得できるかと…

補足

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

わたくしjavascriptの知識がほとんどないため、
公開していたサイトにあったコードを読んでもチンプンカンプンなのですが、
そのプログラムを公開していたサイトでは
きちんとした動作をしていたところをみると、
わたしの作っているHPのCSSによるレイアウトにより
座標取得に問題が生じているのでは？（positionプロパティ等が影響しているのでは）
と考えました。
おおざっぱなレイアウトを申し上げますと、コンテンツをdivタグで囲い、
800PXの幅に設定して画面中央に配置しています。
その範囲内でのみ、マウスストーカーや飛び散る図柄の不具合が起きのるです。

正確なカーソルの位置座標を取得するにあたって、CSSによるレイアウトで
注意しなければならない点とかあるのでしょうか？

もし、ご存じでしたらご教示いただけたらと思います。

回答No.1

babu_baboo

なんだ！かんたんなことさ！

「そこのそれをつかわず、これをかわりにつかうと、なおるとおもいどおりになるとおもうよ！」と
いわれても、もんくのつけようがないくらいの、できだ。

きっとこたえは、「それとは、ちがうさんぷるをさがす。」だよ

お礼

babu_baboo様

どうしてもダメだったら、ご指摘通り、
違うサンプルを探してみます。

この度は、ありがとうございました。