これはどんなJavaScriptなのでしょうか？

解決済

質問者：MEET37
質問日時：2009/06/21 11:49
回答数：4件

こんにちは。

●http://www.rakuten.ne.jp/gold/shop-marble/
このサイトの左上にあるJavaScriptを自分のＨＰでも使いたいのですが(同じような)サインプルを紹介されているサイトや、分かる方がいましたら、是非教えてほしいです。

宜しければアドバイス、ご回答宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： utakataXEX
回答日時：2009/06/21 12:30

補足要求ですが、左上のどの機能を「JavaScriptが使われている」と判断されての、ご質問でしょうか？

以下、「ここかも」と思われる部分について。

[画像のリンクにマウスオーバーで半透明にする]
スタイルシートを使っています。
A:hover IMG
で、alpha(opacity=70); opacity: 0.7
を指定しているようですね。

[メニューバーリンクにマウスオーバーで下線表示]
これもスタイルシートです。
A:hover
で、TEXT-DECORATION: underline
を指定すればマウスオーバーで下線が表示されます。

この回答への補足

説明不足で申し訳ございません。
（なのに回答頂き誠にありがとうございます！m(＿)m）

捕捉で添付させて頂いた画像の場所です。
大きな画像は常に入れ替わり(フラッシュのフェイドインのような動き)小さな画像にマウスオーバーすると、それが大きな画像として表示します。
一応ソースで調べたところ、JavaScriptだと思ったのですが…
宜しければ再度アドバイス頂けますでしょうか。

宜しくお願い致します。

補足日時：2009/06/21 13:02

通報する

- 0
- 件

通報する

No.4

回答者： babu_baboo
回答日時：2009/06/22 16:22

IEのふぃるたーをつかわないで、やってみようとおもって

つくってみましたが、そくどがだめだめでした。
なので、とちゅうでやめちゃったじょ。
がぞうがきりかわるだけ～。
また、ごみだぁ～！^^;

ばぶぅ！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<title>TEST</title>

<style type="text/css">
</style>
<body>
<div>
<img src="./img/photo0.jpg" width="640" height="200" id="a"><br>
<img src="./img/photo1.jpg" width="640" height="200" id="b">
</div>
<script type="text/javascript">
//@cc_on
setOpacity = function (op) {
　this./*@if (@_jscript) filter = 'alpha(opacity='+ op + ')' @else@*/ opacity = op / 100 /*@end@*/;
};

Changer = function () {
　this.init.apply(this, arguments);
};

Changer.prototype.init = function (eId, x_span, speed, step) {
　var tgt = document.getElementById(eId);
　this.tgt = tgt;
　this.speed = speed;
　this.step = step;
　this.makeScreen(tgt, x_span);
};

Changer.prototype.makeScreen = function (e, n) {
　var d = document.createElement('div');
　var s = d.style;
　var x = 0;
　var y = 0;
　var g = e;
　var c = 0;
　var img;
　var duv;
　var p = e.offsetWidth / n;
　this.n = n;
　
　do x += g.offsetLeft, y += g.offsetTop; while (g = g.offsetParent)
　s.top = y + 'px';
　s.left = x + 'px';
　s.position = 'absolute';
　document.body.appendChild(d);

　this.screen = new Array(n);
　this.opacity = new Array(n);
　for (c = 0; c<n; c++) {
　　img = document.createElement('img');
　　img.src = e.src;
　　s = img.style;
　　s.position = 'absolute';
　　setOpacity.call(s, 0);
　　s.top = '0px';
　　s.left = '0px';
　　s.width = e.offsetWidth + 'px';
　　s.height = e.offsetHeight + 'px';
　　s.clip = 'rect(0px, '+(p*(c+1)/*@if(1)-1@end@*/)+'px, 200px, ' + (p*c) + 'px)';
　　d.appendChild(img);
　　this.screen[c] = img;
　　this.opacity[c] = 0;
　}
};
Changer.prototype.changeImage = function (src) {
　var c = 0;
　var o;
　while (o = this.screen[c]) {
　　setOpacity.call(o.style, 0);
　　o.src = src;
　　this.opacity[c] = 0;
　　c++;
　}
　this.buf = src;
　this.f = false;
　this.cnt0 = 0;
　this.cnt1 = 1;
　this.loop();
};

Changer.prototype.loop = function () {
　var i, op;
　for (i = this.cnt0; i < this.cnt1; i++) {
　　op = this.opacity[i];
　　setOpacity.call(this.screen[i].style, op);
　　this.opacity[i] = (op += this.step);
　　if (op>100) { this.cnt0++; continue; }
　}
　if(this.n>this.cnt1) this.cnt1++;
　if (this.opacity[this.n-1]>100) this.f = true;
　if (! this.f) { setTimeout((function(cb_){ return function() {cb_.loop();};})(this), this.speed); return; }
　this.tgt.src = this.buf;
　var c = 0;
　var o;
　while (o = this.screen[c]) {
　　setOpacity.call(o.style, 0);
　　this.opacity[c] = 0;
　　c++;
　}
　
};

var p = new Changer('a', 50, 10, 2);
p.changeImage('./img/photo1.jpg');

</script>

- 0
- 件

通報する

No.3

回答者： think49
回答日時：2009/06/21 14:13

IE7,Firefox3で現象を再現できないので、ソースを読んだだけですが、filterを使っているようです。

----
<SCRIPT type="text/JavaScript">

</SCRIPT>
----
<div onmouseout="restartRotate();" style="margin: 0px; padding: 0px; position: absolute;" onmouseover="clearTimeout(nRotateTimer);" id="divRolling">...</div>
----

フィルタとトランジション
http://msdn.microsoft.com/ja-jp/library/cc392324 …
動く画像
http://homepage2.nifty.com/yoshi-m/makehp/dhtml/ …

# filterはIE専用で他ブラウザで動作しないので気をつけてください。

- 0
- 件

通報する

No.2

回答者： utakataXEX
回答日時：2009/06/21 13:30

>大きな画像は常に入れ替わり(フラッシュのフェイドインのような動き)小さな画像にマウスオーバーすると、それが大きな画像として表示します。

なるほど。

私の環境（XPでFirefoxとIE6）では補足いただいたような表示にはならないのですが、何かAjaxのライブラリを使っているのではないでしょうか？

LightBox2のような画像だけではなくコンテンツそのものをコントロールするもので私が知っているのはこの辺ですが。
↓
http://www.coders.me/ejemplos/sexy-lightbox-2/

当方で再現できないので、この程度の回答ですいません。