jQueryを使用して右下隅の広告ウィンドウが追従する効果を実現する例

本文实例讲述了jQuery实现的右下角广告窗体跟随效果。分享给大家供大家参考。具体如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    body{margin:0px;font-size:12px;}
    #message
    {
      width:100px;
      height:100px;
      position:fixed;
      background-color:gold;
      right:0px;
      bottom:0px;
      display:none;
    }
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $.function () {
      //注意：slideDownは展開、slideUpは折り畳みです
      $("#message").slideDown(2000, function () {
        //$.slideUp(5000);   //花5秒で折り畳みます
        setTimeout("$('#message').slideUp(5000);",2000)   //タイマーを待ち、2秒後に折り畳みます。ここでは$(this)を使用することはできません。IDを取得して使用する必要があります。
      });
    });
  </script>
</head>
<body>
  <div id="message">
    広告です、ごめんなさい!!
  </div>
</body>
</html>

jQueryに関連する内容に興味を持つ読者は、以下の本サイトの特集を参照してください：《jQuery拡張技術のまとめ》、《jQuery常用プラグイン及び用法のまとめ》、《jQueryドラッグ効果と技術のまとめ》、《jQueryテーブル(table)操作技術のまとめ》、《jQuery中Ajaxの用法のまとめ》、《jQueryよくある効果のまとめ》、《jQueryアニメーションと効果の用法のまとめ》および《jQuery選択子の用法のまとめ》

本稿の内容が皆様のjQueryプログラムデザインに役立つことを願っています。

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーにより自発的に貢献し、自己でアップロードされました。本サイトは所有権を有しておらず、人工的な編集は行われていません。著作権に関する問題がある場合は、メールを送信してください：notice#oldtoolbag.com（メールを送信する際には、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認がとれましたら、本サイトは即座に侵害を疑われるコンテンツを削除します。）

基礎教程