プロが教えるわが家の防犯対策術！

黒背景で、白文字（リンク挿入）をフェードインするHTMLソースを教えて

解決済

  • 質問者：aoyan037
  • 質問日時：
  • 回答数：4件

黒背景で、白文字（リンク挿入）をフェードインするHTMLソースを教えてください。

<head>の間に、


<script language="JavaScript">
<!--
var count = 0;
var f3 = "0123456789abcdef";
function fadein(i) {
if ( count < 16 ) {
c = f3.charAt(i);
document.fgColor = c + c + c + c + c + c;
count++;
setTimeout("fadein(count)",100);
}
}
fadein();
//-->
</script>
</head>

<body bgcolor="#000000" text="#ffffff">


以上のタグを入れ、
<body bgcolor="#000000" text="#ffffff">
タグを<body>の代わりに置くと、リンク挿入されていない文字はフェードインされるのですが、リンク挿入文字は対応されません。
ソースをどのようにすれば、リンク挿入文字もフェードイン対応されるでしょうか。

通報する

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

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： babu_baboo
  • 回答日時：

＃１だ。

ていせいだべぇ。
すくりぷとむこうのとぎも、やっぱりけぇておけばいがった。はんせいだぁ～。
color:#0 もよぉ～、まずかった。あどがらきづいだぁ。すまねぇ。


<!DOCTYPE html>
<title></title>
<style type="text/css">
a { font-size: 2em; }
</style>

<script>
document.write (
　'<style type="text/css">\n　a.fade { background-color: #000; color:#000; }\n</style>'
);
</script>

<body>
<ol>
<li><a href="#">abc</a>
<li><a href="#" class="fade">def</a>
<li><a href="#">ghi</a>
<li><a href="#" class="fade">jkl</a>
</ol>

<script>
//@cc_on

var fadeIn = (function (addRule) {
　return function (styleSheet, selector, interval) {
　　var color = 0;
　　var count = 15;

　　var loop = function () {
　　　var colorStr = 'color:#' + (color ? color.toString (16): '000');
　　　addRule.call (styleSheet, selector, colorStr);
　　　count-- && setTimeout (arguments.callee, interval);
　　　color += 0x111;
　　};
　　
　　loop ();
　};
})(function ( selector, property ) {
　/*@if (@_jscript)
　　this.addRule (selector, property);
　@else@*/
　　this.insertRule (selector + '{' + property + '}',
　　　'undefined' == typeof this.cssRules ? 0: this.cssRules.length);
　/*@end@*/
});

fadeIn (document.styleSheets[1], 'a.fade', 100);
</script>

すくりぷとでかいた、すたいるしーとは、２ばんめなので
document.styleSheets[1] だぁ。まぢげぇねぇようになぁ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

希望のソースだけでなく、私の提示したタグが旧式のものという知識など、すべての回答がとても参考になりました！
今回は使用させていただいたものをベストアンサーとさせていただきました。
ご回答、本当にありがとうございました。

通報する
お礼日時：2010/09/01 02:11

No.3

  • 回答者： fujillin
  • 回答日時：

#1様のおっしゃる、「おぱしてぃ～」を利用した操作のほうが、文字の色が何色でも良いし画像があっても同様にフェードインできるし便利ではなかろうか？



ちょっとずるをして、ライブラリを使うともっと簡単。
（画像は投稿が面倒なので、入れてないし、背景も関係ないので白のままですが…）

下の例ではクラス指定がfadeのものだけフェードインするようにしています。（jqueryを使用）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. …
<script type="text/javascript">
<!--
$(function() { $(".fade").hide().fadeIn(4000); });
//-->
</script>
</head>

<body>

<p>なんたらかんたら</p>
<span class="fade" style="color:#f00;">
フェードインする<a href="#">ここがリンク</a>
</span>

<p>あ～だ、こ～だ</p>

<div class="fade" style="width:300px; color:#0ff; background-color:#ffd;">
画像とかでもそのままフェードイン
<div style="width:150px; height:100px; color:#0d0; background-color:#fdd; margin:50px;">
何でも良いんだよね
</div>
</div>

<p>むにゃ、むにゃ、むにゃ…</p>

</body>
</html>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： yyr446
  • 回答日時：

document.bgColor


document.fgColor
document.linkColor
document.vlinkColor
document.alinkColor

リンクのカラーに相当するdocument.bgColor
は、document.linkColorだけど、そもそも
　document.bgColor
　document.fgColor
　document.linkColor
　document.vlinkColor
　document.alinkColor
は、ブラウザーに極度の依存し、しかもReadOnly
だったような...。もう廃止されるのでは...

そこで、↓のようにかなり書き換えました。
<body onload="fadein(0);" style="background-color:#000000;color:#ffffff;">
にして

function fadein(i) {
　var count=i;
　console.log(i);
　var f3 = "0123456789abcdef";
　if ( count < 16 ) {
　 c = f3.charAt(i);
　 var colorstr = c + c + c + c + c + c;
　 document.body.style.color= "#" + colorstr;
　 var link=document.getElementsByTagName("a");
　 for(var c=0;c<link.length;c++){
　　 link[c].style.color = "#"+colorstr;
　 }
　 count++;
　 var timer = setTimeout(function(){fadein(count);},100);
　} else clearTimeout(timer);
}

です。（半角空白は全角空白にして下さい）。
※timerの後始末もした方がよかろうとclearTimeoutもしてます。
※今回は、timer=setTimeout("fadein(count)",100);はだめ。
　var timer = setTimeout((function(sore){
　　return function(){fadein(sore);};
　})(count),100);
ならよいけど...無駄な....
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： babu_baboo
  • 回答日時：

きっとだれかが、あんかーをあつめてきて、それぞれにおぱしてぃ～でもへんかさせるやつを


かくだろうとおもい、ちがうやつで、せめてみた。
へんかするのがくろからしろだけなのでかなりださいね。すみません。
こしがいたくて・・・。

ぜんかくくうはくははんかくにしてね。

<!DOCTYPE html>
<title></title>

<style type="text/css">
a.fade { background-color: #000; color:#000; }
</style>

<body>
<ol>
<li><a href="#">abc</a>
<li><a href="#" class="fade">def</a>
<li><a href="#">ghi</a>
<li><a href="#" class="fade">jkl</a>
</ol>

<script>
//@cc_on

var fadeIn = (function (addRule) {
　return function (styleSheet, selector, interval) {
　　var color = 0;
　　var count = 15;

　　var loop = function () {
　　　addRule.call (styleSheet, selector, 'color:#' + color.toString (16));
　　　count-- && setTimeout (arguments.callee, interval);
　　　color += 0x111;
　　};
　　
　　loop ();
　};
})(function ( selector, property ) {
　/*@if (@_jscript)
　　this.addRule (selector, property);
　@else@*/
　　this.insertRule (selector + '{' + property + '}',
　　　'undefined' == typeof this.cssRules ? 0: this.cssRules.length);
　/*@end@*/
});

fadeIn (document.styleSheets[0], 'a.fade', 100);
</script>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報