0

ポップアップウィンドウをシンプルな形式で表示します。ポップアップウィンドウを開く別の形式を適用したい。ポップウィンドウが開いたときに非常に見栄えがするように、フォーマットまたはスタイルを適用するにはどうすればよいですか？以下は私のソースコードです：

<div onMouseOver="show('healing')" onMouseOut="hide('healing')">
    <div id="healing" class="bgdiv" >
        <div id ="title" class="Title" >Healing</div>
        <img class="img"  src="images/healing.bmp">
        <div class="description" >Welcome Sir.</div>
    </div>
</div>

javascriptコード

<script language="JavaScript">
function show(id) 
{     
    document.getElementById(id).style.visibility = "visible"; 
} 
</script>
4

1 に答える 1

1

JQuery（http://jquery.com/）をご覧ください。JQueryはJavascriptフレームワークであり、フェード、スライド、表示/非表示などの要素を表示するためのエフェクトを使用できます。

あなたがしなければならないのはあなたのコードを少し変えることです（Jqueryソリューション）：

<div id="showhealing">
    <div id="healing" class="bgdiv">
        <div id ="title" class="Title" >Healing</div>
        <img class="img" src="images/healing.bmp">
        <div class="description" > Welcome Sir.</div>
    </div>
</div>

<script>
    $('#showhealing').hover(
        function() { $('#healing').show(500) }, function() { $('#healing').hide(500) }
    );
</script>

JQuery UI（JQueryの拡張機能）を使用すると、さらに多くの効果が得られます。（ここを見てください：http：//jqueryui.com/demos/effect/）。

Effect of JQuery UIを使用するには、次のようにスクリプトを更新する必要があります。

<script>
    $('#showhealing').hover(
        function() { $('#healing').show("explode", {}, 500); }, function() { $('#healing').hide("explode", {}, 500) }
    );;
</script>
于 2012-07-10T07:34:18.470 に答える