javascript怎么实现浮动窗口

javascript实现浮动窗口的方法：首先创建HTML文件；然后通过“function showFAd(){ ...} ”方法打开浮动广告；最后通过“function showFloat(){ ...} ”方法实现打开浮动窗口即可。

本文操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

javascript怎么实现浮动窗口？

具体如下：

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>
    meta http-equiv="Content-Type" content="text/html;
     charset=utf-8" />
    title>
    无标题文档/title>
    style type="text/css">
*{
     margin:0;
     padding:0;
}
a img{
     border:0;
}
    /style>
    /head>
    body>
    div style="height:2000px;
     background:#ccc;
     display:none;
    ">
    /div>
    !--div id="floatAd" style=" position:fixed !important;
     position:absolute;
     _top:exPression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight));
     z-index: 2147483647;
     left: 50%;
     margin-left: -240px !important;
     top: 50%;
     margin-top: -210px !important;
     background:url(images/onlineSay.jpg) no-repeat;
     width:487px;
     height:350px;
     cursor:pointer;
    ">
    div onclick="closeFAd();
    " style=" width:26px;
     height:26px;
     float:right;
    ">
    /div>
    div style="width:487px;
     height:320px;
     float:right;
    " onclick="open_online();
    ">
    /div>
    /div>
    div id="floatSide" style=" width:141px;
     height:579px;
     position:fixed !important;
     position:absolute;
     _top:exPRession(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight));
     z-index: 99999;
     right:0;
     top:6%;
     background:url(images/onlinetel.gif);
    cursor:pointer;
    " onclick="open_online();
    >
    /div-->
    /body>
    /html>
    script type="text/javascript" src="online.js">
    /script>
    

JS部分：

// JavaScript Document//浮动广告图片VAR floatAdImg = "images/onlineSay.jpg";
    //浮动侧栏图片var floatSideImg = "images/onlineTel.gif";
//打开在线沟通function open_online(){
     window.open('http://p.qiao.baidu.COM//im/index?siteid=7342332&
    ucid=7601325');
}
    //浮动广告document.writeln("div id=\"floatAd\" style=\" position:fixed !important;
     position:absolute;
     _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight));
     z-index: 2147483647;
     left: 50%;
     margin-left: -240px !important;
     top: 50%;
     margin-top: -210px !important;
     background:url("+floatAdImg+") no-repeat;
     width:487px;
     height:350px;
     cursor:pointer;
     display:none;
     \">
    ");
    document.writeln("div onclick=\"closeFAd();
    \" style=\" width:26px;
     height:26px;
     float:right;
    \">
    /div>
    ");
    document.writeln("div style=\"width:487px;
     height:320px;
     float:right;
    \" onclick=\"open_online();
    \">
    /div>
    ");
    document.writeln("/div>
    ");
    //浮动侧栏document.writeln("div style=\" width:141px;
     height:579px;
     position:fixed !important;
     position:absolute;
     _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight));
     z-index: 99999;
     right:0;
     top:6%;
     background:url("+floatSideImg+");
    cursor:pointer;
    \" onclick=\"open_online();
    \">
    /div>
    ");
//关闭浮动广告function closeFAd(){
     document.getElementById('floatAd').style.display = 'none';
}
//打开浮动广告function showFAd(){
     document.getElementById('floatAd').style.display = 'block';
}
//打开浮动窗口function showFloat(){
     document.getElementById('floatAd').style.display = 'block';
}
    //打开窗口 20 秒仅执行一次setTimeout(showFAd,20000);
    //每个 30 秒执行一次setInterval(showFloat,30000);
    

效果图如下：

【相关推荐：javascript高级教程】

以上就是javascript怎么实现浮动窗口的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！