- ベストアンサー
これはどんなJavaScriptなのでしょうか？
こんにちは。 ●http://www.rakuten.ne.jp/gold/shop-marble/ このサイトの左上にあるJavaScriptを自分のＨＰでも使いたいのですが(同じような)サインプルを紹介されているサイトや、分かる方がいましたら、是非教えてほしいです。 宜しければアドバイス、ご回答宜しくお願い致します。
- MEET37
- お礼率75% (44/58)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
補足要求ですが、左上のどの機能を「JavaScriptが使われている」と判断されての、ご質問でしょうか？ 以下、「ここかも」と思われる部分について。 [画像のリンクにマウスオーバーで半透明にする] スタイルシートを使っています。 A:hover IMG で、alpha(opacity=70); opacity: 0.7 を指定しているようですね。 [メニューバーリンクにマウスオーバーで下線表示] これもスタイルシートです。 A:hover で、TEXT-DECORATION: underline を指定すればマウスオーバーで下線が表示されます。
その他の回答 (3)
- babu_baboo
- ベストアンサー率51% (268/525)
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>
- think49
- ベストアンサー率59% (285/482)
IE7,Firefox3で現象を再現できないので、ソースを読んだだけですが、filterを使っているようです。 ---- <SCRIPT type="text/JavaScript"> <!--// var nHangNo = 1; ... //--> </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.aspx 動く画像 http://homepage2.nifty.com/yoshi-m/makehp/dhtml/sorce/image/5.htm # filterはIE専用で他ブラウザで動作しないので気をつけてください。
- utakataXEX
- ベストアンサー率69% (711/1018)
>大きな画像は常に入れ替わり(フラッシュのフェイドインのような動き)小さな画像にマウスオーバーすると、それが大きな画像として表示します。 なるほど。 私の環境（XPでFirefoxとIE6）では補足いただいたような表示にはならないのですが、何かAjaxのライブラリを使っているのではないでしょうか？ LightBox2のような画像だけではなくコンテンツそのものをコントロールするもので私が知っているのはこの辺ですが。 ↓ http://www.coders.me/ejemplos/sexy-lightbox-2/ 当方で再現できないので、この程度の回答ですいません。
補足
説明不足で申し訳ございません。 （なのに回答頂き誠にありがとうございます！m(＿)m） 捕捉で添付させて頂いた画像の場所です。 大きな画像は常に入れ替わり(フラッシュのフェイドインのような動き)小さな画像にマウスオーバーすると、それが大きな画像として表示します。 一応ソースで調べたところ、JavaScriptだと思ったのですが… 宜しければ再度アドバイス頂けますでしょうか。 宜しくお願い致します。