プログラミング学習の記録 162.1 Silverlight+JavaScriptでふちが青色で赤色の長方形が正方形になるAnimationをそれぞれ変化のスピードが異なるものを3つ描いてみる。

開発環境:Microsoft Visual Web Developer+Internet Explorer+Silverlight
Script言語:JavaScript

Silverlight+JavaScriptでふちが青色で赤色の長方形が正方形になるAnimationをそれぞれ変化のスピードが異なるものを3つ描いてみる。

参考書籍

JavaScript 2 Webアプリケーションの基礎とJavaScriptを使ったプログラミングテクニック (CD-ROM付) (プログラミング学習シリーズ)

Sample11.html

<!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>Silverlight Sample11 Rectangle Animation</title>
    <style type="text/css">
        .style1
        {
            height: 148px;
        }
    </style>
</head>
<body>
<script type="text/javascript" src="Silverlight.js"></script>
<script language="javascript" type="text/javascript">
    
    // 低速
    function createRectangleAnimation0() {
        var tb0 = document.getElementById("tb0");
        Silverlight.createObject(
        "Scene11.xaml",
        tb0,
        "rectangleAnimation0",
        { width: 150, height: 150,
            inplaceInstallPrompt:true,
            background: 'Yellow'
        },
        { onError: null, onLoad: null },
        null);
    }
    
    // 普通
    function createRectangleAnimation1() {
        var tb1 = document.getElementById("tb1");
        Silverlight.createObject(
        "Scene11-1.xaml",
        tb1,
        "rectangleAnimation1",
        { width: 150, height: 150,
            inplaceInstallPrompt: true,
            background: 'Yellow'
        },
        { onError: null, onLoad: null },
        null);
    }
    
    // 高速
    function createRectangleAnimation2() {
        var tb2 = document.getElementById("tb2");
        Silverlight.createObject(
        "Scene11-2.xaml",
        tb2,
        "rectangleAnimation2",
        { width: 150, height: 150,
            inplaceInstallPrompt: true,
            background: 'Yellow'
        },
        { onError: null, onLoad: null },
        null);
    }</script>
<p>Silverlight+JavaScriptでふちが青色で赤色の長方形が正方形になるAnimationをそれぞれ変化のスピードが異なるものを3つ描いてみる。</p>
<input type="button" value="ゆっくり" onclick="createRectangleAnimation0()" />
<input type="button" value="Click!" onclick="createRectangleAnimation1()" />
<input type="button" value="速い!" onclick="createRectangleAnimation2()" />
<p>実行結果</p>
<table width="450">
            <tr>
                <td id="tb0">
                    </td>
                <td id="tb1">
                    </td>
                <td id="tb2">
                </td>
            </tr>
</table>
</body>
</html>

Scene11.xaml

Scene11-1.xaml

Scene11-2.xaml

保管場所: Silverlight Sample11 Rectangle Animation