PHP & JavaScript Room :: 設置サンプル

実行結果

設置サンプル：background-attacument

scroll

新着情報
fixed

新着情報
local

新着情報
設置サンプルのソース

<!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" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル：background-attacument</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $.ajax({
                    url: "index.xml",
                    type:"GET",
                    dataType:"xml",
                    timeout:1000,
                    cache: false,
                    error:function(){
                        alert("XMLファイルの読み込みに失敗");
                    },
                    success:function(xml){
                        $(xml).find("item").each(function(){
                            var item_link=$(this).find("link").text();
                            var item_title=$(this).find("title").text();
                            if(item_title!="") $("<li></li>").html("<a href='"+item_link+"'>"+item_title+"</a>").appendTo("ol");
                        });
                    }
                });
                
            });
        </script>
        <style type="text/css">
            .feed {
                background-color:#fff;
                margin:0; padding:0;
                border:2px solid #817452;
                width:600px; height:120px;
             background:transparent;
            background-image:url(/content/img/pattern.jpg);
            background-repeat:repeat;
            background-position:0 0;
            overflow:auto;
            }
            #scroll {
               background-attachment:scroll;
           }
            #fixed {
               background-attachment:fixed;
            }
            #local {
               background-attachment:local;
            }
            .feed_title {
                background-color:#817452;
                padding:2px 10px;
                color:#fff;
                font-weight:bold;
            }
            ol {
                list-style:none;
                margin:10px; padding:0;
            }
            li {
                list-style:none;
                margin:0; padding:0;
            }
            li a {
               color:#fff;
            }
         </style>
    <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
    <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
        <div id="wrap">
            <h1>設置サンプル：background-attacument</h1>
<!-- CODE -->
            <h2>scroll</h2>
            <span class="feed_title">新着情報</span>
            <div class="feed" id="scroll"><ol></ol></div>
            <h2>fixed</h2>
            <span class="feed_title">新着情報</span>
            <div class="feed" id="fixed"><ol></ol></div>
            <h2>local</h2>
            <span class="feed_title">新着情報</span>
            <div class="feed" id="local"><ol></ol></div>
<!-- CODE / -->
        </div>
    </body>
</html>