マウスストーカーやクリックで図が飛び散るjavascript
知人からHP作成を頼まれて作っています。
マウスストーカーやクリックした箇所で図柄が飛び散る
javascriptってありますよね。
私自身からは「見難くなるからやめた方がいい」と進言したのですが、
当の本人がどうしてもと言うので、仕方なくインターネット上で
コードを探してきて必要箇所(図柄のパスなど)を変更して
作動するようにしました。
しかし、マウスストーカーの図柄はカーソルのある場所とは離れたところに
表示されてしまいます。
飛び散るほうは、クリックした場所とは違う場所で飛び散ったりします。
ブラウザ画面の左右の両端の方では正常な動きをするのですが、
文字や画像のある部分では上記のような動きになってしまいます。
この原因か対策方法をご存じの方がおられましたら、
どうかご教示ください。
宜しくお願いいたします。
Windows Vista
使用ブラウザ:IE7
No.10ベストアンサー
- 回答日時:
ごみ消し忘れ、他
<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
- 回答日時:
---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
- 回答日時:
---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
- 回答日時:
爆発というより、花火になってしまった。
しかもIEではフェードイン/アウトがぎくしゃく、しかもおそーい。
window.setIntervalの時間調整だけでは調整困難だ。
その他つっこみどころ満載です。
長いので2回に分けて
---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
- 回答日時:
とりあえず、「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
- 回答日時:
マウスイベントで発火して爆発する文字
クリックした点(x,y)から、2PI/nの方向にn個の破片を撒き散らす。
破片の座標は、距離dとして(d*CosR,d*SinR)でdはWindowsサイズから
適度に決めて、枠にあたるまで増加させていく。
破片は<div class="hahen">をコピーして、n個クローンを作成
一回り大きい円を書いた時、内側の円を消す。
さらに、破片の大きさを外に行くほど大きくする(フォントサイズ)
さらに、破片のアルファ値も変化させよう。
以上を、つくるとおおむね2時間ぐらいか、オブジェクト思考して作ると
半日以上かかるかも....
待てよ、jQuery UI Effect に爆発あったような気がする。
No.4
- 回答日時:
状況は分かるのですが、実際のコードがどうなっているか、が示されていないので何とも回答しがたい状況です。
コード全部を掲載するか、URLを開示されれば、何らかの進展が期待できると思いますが…。
もし、それが難しい状況とすると、すぐに解決に導かれるような回答がつく可能性は相当低いと思います。
think49様
ご指摘ありがとうございます。
自分でも、情報不足は感じていましたが、
ついつい怠慢を・・・・・
これからは、回答者の皆様にも分かりやすい
質問内容にできるよう、心がけて参りたいと思います。
重ね重ねありがとうございました。
No.3
- 回答日時:
No2です。
>ご存じでしたらご教示いただけたらと思います。
残念ながら存じ上げません。
事象から想像すれば、座標系が混在しているのかと想像されます。(まったく違うかも知れません)
例えば、マウスの位置を対象要素の相対座標で取得して、表示する要素を絶対座標で指定すれば、座標系のずれの分だけずれて表示されるのが道理です。
>わたくしjavascriptの知識がほとんどないため、
とのことですので、詳しく説明しても意味が無いでしょうから、参考になさっているサイトと同じような設定方法で設置するのが一番手っ取り早い方法ではないでしょうか?
もとのものがどのような仮定のもとに作られているかわかりませんので、どのようなCSSレイアウトをすると崩れるのかは私にはわかりません。
(↑)に書きましたように、まずは、元のものに近い形で設置してみて、少しずつ変えていってみれば、何をするとまずいのかはおのずとわかるのではないでしょうか?
あるいは、No1様がお勧めのように、要素の位置に依存しないようなスクリプトを探すとか?
(範囲限定という)お望みにぴったりのものがあるかどうかは、わかりませんが…
fujillin様
度重なるわたくしの質問に、親身になって
回答をしてくださり、ありがとうございました。
色々と自分なりに探しては見ましたが、
原因が見つけられませんでした。
コードを見ていると眩暈がしてきますけれど、
もう少し自分で勉強してみます。
本当にありがとうございました。
No.2
- 回答日時:
何も情報がないので特定できませんが、
>クリックした場所とは違う場所で飛び散ったりします
>文字や画像のある部分では上記のような動きになってしまいます。
トリガーをどのように設定しているのか不明ですが、カーソル位置の取得に問題があるのでは?
画面上の座標は、event.clientX などで、
scrollの量(左上座標)は,
window.pageYOffset や (document.compatMode?document.body:document.documentElement).scrollTop
などで取得できるかと…
この回答への補足
fujillin様
回答ありがとうございます。
わたくしjavascriptの知識がほとんどないため、
公開していたサイトにあったコードを読んでもチンプンカンプンなのですが、
そのプログラムを公開していたサイトでは
きちんとした動作をしていたところをみると、
わたしの作っているHPのCSSによるレイアウトにより
座標取得に問題が生じているのでは?(positionプロパティ等が影響しているのでは)
と考えました。
おおざっぱなレイアウトを申し上げますと、コンテンツをdivタグで囲い、
800PXの幅に設定して画面中央に配置しています。
その範囲内でのみ、マウスストーカーや飛び散る図柄の不具合が起きのるです。
正確なカーソルの位置座標を取得するにあたって、CSSによるレイアウトで
注意しなければならない点とかあるのでしょうか?
もし、ご存じでしたらご教示いただけたらと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Windows 8 動画の再生とタイトルの変更方法を教えてください。 3 2022/08/01 14:51
- Windows 10 explorerをedgeで開く方法 2 2022/06/05 14:59
- 洗濯・クリーニング・コインランドリー 衣類にヘアマスカラ(白髪用)が付いた時の落とし方について 1 2023/05/16 21:11
- ネットワーク 「ファイル名を指定して実行」が遅い 4 2023/04/04 21:50
- JavaScript 空白で入力フォームのボタンをクリックしたら、ブラウザの上部からjavascriptで 表示されるアラ 1 2022/05/20 11:16
- MySQL MySQL,JavaScript,PHPコードの結果を表示する方法を教えてください。 1 2023/02/13 17:49
- その他(ブラウザ) Amazonに掲載されている図書のURLについて 2 2022/12/13 10:31
- ハッキング・フィッシング詐欺 このようなメールが来ました。 注文の詳細を表示、をクリックしたら私の住所等、個人情報を入れるページに 2 2022/05/16 05:44
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- 画像編集・動画編集・音楽編集 Google Earth Pro 高速道路上空を一定の速度で飛ぶツアー動画の作り方は?? 1 2022/06/01 15:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ActiveXobjectが作成できない
-
任意の座標をクリックさせるには
-
javascriptでスロットゲームを...
-
javascript 特定のタグのidの存...
-
<a>タグのテキストを取得
-
onchangeイベントを使ってspan...
-
innerHTML実行後のイベント
-
Click回数を数え、規定された回...
-
DIV内のDIV要素を移動する。
-
重複しないくじの作り方がわか...
-
画像上のクリックした場所が分...
-
HTML:Tableタグに対し、JavaScr...
-
モーダルダイアログウィンドウ...
-
JavaScriptで決まった「時刻」...
-
C#テキストボックスの文字を配...
-
Boolean型配列中のTrueの有無を...
-
google apps scriptの終了のさせ方
-
関数でy=g(x)のgとは何の略です...
-
jspからjavascriptの変数引継ぎ
-
Linux バイナリ実行できない "...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<a>タグのテキストを取得
-
[初心者]javascriptのfor文でな...
-
ActiveXobjectが作成できない
-
任意の座標をクリックさせるには
-
appendChildがieだとできない??
-
onchangeイベントを使ってspan...
-
【Tabキー】特定の範囲内だけで...
-
モーダルダイアログウィンドウ...
-
javascript 特定のタグのidの存...
-
日本語入力の禁止
-
innerHTML実行後のイベント
-
HTML:Tableタグに対し、JavaScr...
-
onclickを使わずにイベント処理...
-
アンカークリックのイベントを...
-
javascriptでスロットゲームを...
-
画像上のクリックした場所が分...
-
javascriptでCSVを呼出しvlookup
-
javascriptで編集可能不可能の...
-
Click回数を数え、規定された回...
-
子画面からwindow.openを開いた...
おすすめ情報