オンマウスで背景画像をアニメーション/画像表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

背景画像mouseleave,mootools

SAMPLE
CODE
DownLoad

<!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>
    <title>Mootools</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
    <script src="js/clickMe.js" type="text/javascript"></script>
    <style type="text/css">
    /*<![CDATA[*/
    body{margin:0; padding:0; font-size:12;}
	div{height:400px;}
	#posts {
        padding: 0;
        margin: 0;
    }
    #posts li {
    	width: 650px;
    	border: 1px solid #eee;
    	background-color: #F9F9F9;
        background-image: none;
    	float: left;
        clear: both;
        list-style: none;
        margin: 0 0 5px 0;
        padding: 5px;
    }
    #posts a {
        text-decoration: none;
        color: #999;
        font-size: 0.85em;
    }
    #posts img {
        display: block;
        float: left;
        border: 1px #ccc solid;
        background: white;
        padding: 3px;
        margin: 0 10px 0 0;
    }
    #posts h1 {
        padding: 5px 0;
        margin: 0;
        color: #FF9900;
        font-size: 1.2em;
    }
    #posts p {
        margin: 0;
        padding: 0 0 10px 0;
    }
    /*]]>*/
    body,td,th {
	font-size: 12px;
}
</style>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>
<div>
        <ol id="posts">
            <li>
                <img src="images/mejiro.jpg" alt="" />
                <h1>背景をアニメーション</h1>
                <p>IDを指定するだけなので簡単に実装できます。</p>
                <a href="#">&lt;li&gt;直下の&lt;a&gt;のリンク先がこの範囲のリンクとなります。</a>
            </li>
            <li>
                <img src="images/megane.jpg" alt="" />
                <h1>MEGANE&amp;NEKUTAI</h1>
                <p>リンクがない場合はページ移動はしません。</p>
            </li>
            <li>
                <img src="images/unknow.jpg" alt="" />
                <h1>?</h1>
                <p>？</p>
            </li>

        </ol>
</div>
</body>

</html>

	Web-kreation

背景画像をアニメーションすることが出来るJavascript。
CSSでアニメーション前の状態を設定して、Javascriptでアニメーションの終点を設定します。
複雑な動きは表現できませんが、フェードとモーションを行ってくれるので十分かもしれません。
ulやolにidをつけるだけで実装できるので、導入はとても簡単です。
IE７だと、引数エラーが出るので、実際に使う場合には検討が必要です。
製作元のコメントを呼んでいると、「IE7での確認してなかったけどtodoリストに入れたから心配しないで、やるから。」、的なコメントが見て取れます。
アップデートを待ってから実装した方が良いかもしれません。

セッティング
CSS&JS設定

ダウンロード

サイトへ行き、Downloadという箇所をクリックしてファイルをダウンロードしてください。
解凍されたフォルダの中に必要なものは全て揃っていますので、すぐにでも実装することができます。

<head>～</head>の設定

通常通りJavascriptファイルを読み込ませます。

この２つのファイルを読み込ませます。
パスは任意で決定してください。

ソースの設定

実装したい、ulまたはolに以下のように「id="posts"」を指定するだけで、
内部の<li>がアニメーションの対象となります。

<ol id="posts">
   <li>
   <img src="images/mejiro.jpg" alt="" />
   <h1>背景をアニメーション</h1>
   <p>IDを指定するだけなので簡単に実装できます。</p>
   <a href="#"><li>直下の<a>のリンク先がこの範囲のリンクとなります。</a>
   </li>

liの中に<a>でリンクを設定したものを設置すると、そのリンク先が全体のリンク先となります。
これで下準備は完了です。