JQuery应用例子

来源：互联网发布：iphone6网络信号差编辑：程序博客网时间：2024/05/17 23:34

JQuery实现弹出信息窗口实例(JQuery+CSS)

jsp页面代码:

========

<head>

<body>
<a href="#" onmousemove="win()" onmouseout="closeWin()">测试弹出信息框(CSS设计)</a> <br>
<div id="win">hello,我是小窗口!有我的信息 </div>

    <a href="javascript:void(0)" onclick="openWin()">点击我弹出信息框(CSS设计)</a> <br>
    <div id="onWin">
        <div id="title">标题<span id="x" onclick="closeX()">[关闭]</span></div>
        <div id="content">内容块 </div>
    </div>

</body>

---------------------------------------------

OpenWin.js页面代码:

==============

function win(){
    var v=$("#win");
    v.fadeIn("show");
}

function closeWin(){
    var v=$("#win");
    //v.hide();
    v.fadeOut("slow");

}

function openWin(){
$("#onWin").fadeIn("show");
}

function closeX(){
$("#onWin").fadeOut();
}

---------------------------------------------

OpenWin.css页面代码:

===============

#win {
    border:1px solid blue;
    height:200px;
    width:250px;
    position:absolute;
    top:35;
    left:55;
    display:none ;
}

#onWin{
    border:1px solid red;
    height:200px;
    width:250px;
    position:absolute;
    top:100;
    left:300;
    display:none ;
}

#title{
    background-color: silver;
     text-align : center;
}
#content{
    padding-top: 5px;
}

#x{
    margin-left: 90px;/*设置位置*/
    cursor: pointer; /*设置当鼠标移到位置时变成小手动作*/
}