Rumah >hujung hadapan web >tutorial js >javascript怎么实现浮动窗口

javascript怎么实现浮动窗口

藏色散人asal: 2021-06-30 10:39:433591semak imbas

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

javascript怎么实现浮动窗口

本文操作环境：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(&#39;http://p.qiao.baidu.com//im/index?siteid=7342332&ucid=7601325&#39;);
}
//浮动广告
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(&#39;floatAd&#39;).style.display = &#39;none&#39;;
}
//打开浮动广告
function showFAd()
{
 document.getElementById(&#39;floatAd&#39;).style.display = &#39;block&#39;;
}
//打开浮动窗口
function showFloat()
{
 document.getElementById(&#39;floatAd&#39;).style.display = &#39;block&#39;;
}
//打开窗口 20 秒仅执行一次
setTimeout(showFAd,20000);
//每个 30 秒执行一次
setInterval(showFloat,30000);

效果图如下：

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

Atas ialah kandungan terperinci javascript怎么实现浮动窗口. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：javascript怎么取set的值Artikel seterusnya：浅谈JavaScript中如何操作光标和选区？

Artikel berkaitan

Lihat lagi