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/）。

要使用 JQuery UI 的效果，您需要像这样更新脚本：

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