インターネットを歩き回っていると、インターネットが情報の海であるだけでなく、広告の海でもあることがわかります。通常の Gif バナーや Flash に加えて、フローティング広告も、今日インターネット上で最も人気のある広告形式の 1 つです。ブラウザのスクロール バーをドラッグすると、ページ上のこの種のフローティング広告が画面とともに移動します。この効果は広告表示にはかなりの実用的価値がありますが、Web ページを閲覧するユーザーにとっては、読書の妨げになるだけでなく、読書の興味にも影響を与えるものであるため、悪用してはなりません。ただし、賢く使えば非常に便利です。
JS の基本的な知識があれば、フローティング広告のエフェクトを作成するのは難しくありません。書くのが面倒な場合は、特殊効果ツールをオンラインでダウンロードし、指示に従ってコードを貼り付けます。ただし、その作成方法を本当に理解したい場合は、JS の知識を習得する必要があります。ここでは簡単なフローティング広告の方法を紹介します。
次のコードは <body></body> の間に配置できます。この間にコメントを追加しました (つまり、「//」の後のテキストと「<!—」と「-->」の間のテキスト)。
<SCRIPT FOR=window EVENT=onload LANGUAGE="JScript">
initAd();//ページをロードした後、関数 initAd() を呼び出します
</スクリプト>
<スクリプト言語="JScript">
<!--
関数 initAd() {
document.all.AdLayer.style.posTop = -200;//onLoad イベントの発生後に、固定 y 方向を基準とした広告レイヤーの位置を設定します。
document.all.AdLayer.style.visibility = 'visible'//レイヤーを表示するように設定します
MoveLayer('AdLayer');// 関数 MoveLayer() を呼び出す
}
function MoveLayer(レイヤー名) {
var x = 600; //フローティング広告レイヤーはブラウザの x 方向の位置に固定されます。
var y = 300; //フローティング広告レイヤーはブラウザの y 方向に固定されます。
var diff = (document.body.scrollTop + y - document.all.AdLayer.style.posTop)*.40;
var y = document.body.scrollTop + y - 差分;
eval("document.all." + レイヤー名 + ".style.posTop = y");
eval("document.all." +layerName + ".style.posLeft = x");//モバイル広告レイヤー
setTimeout("MoveLayer('AdLayer');", 20);//関数 MoveLayer() を呼び出す前に 20 ミリ秒を設定します
}
//-->
</script>
<!-- 以下は、ID 名が AdLayer のレイヤーであり (ID 名が AdLayer でない場合は、上記の MoveLayer() の AdLayer もそれに応じて変更する必要があります)、リンク付きの画像が含まれています -->
<div id=AdLayer スタイル='幅:61px; 高さ:59px; 左: 600px'>
<a href=" http://www.5dmedia.com/bbs"><img src='../qqkk2000.gif' border="0" height="60" width="60"></a>
</div>
ここで、x と y の値を設定して固定レイヤーの位置を設定し、setTimeout("MoveLayer('AdLayer');", 20) の 20 の値を希望の値に変更します。 MoveLayer() の時間間隔を呼び出したい。また、使用する画像は、画像の背景色によって背後のコンテンツが見えにくくならないように、背景が透明な GIF であることが望ましいことにも注意してください。
フローティング広告は注意して使用してください。特殊効果の使用を検討する場合は、視聴者の感情も考慮し、悪用しないようにしてください。