JS implementiert einfach schwebende Fenster-js-Tutorial-php.cn

JS implementiert einfach schwebende Fenster

不言

Freigeben： 2018-05-05 16:12:16

Original

4172 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die einfache Implementierung des Floating-Window-Effekts mit JS vorgestellt, einschließlich der Erstellung, des Öffnens, des Schließens und anderer verwandter Betriebstechniken für den Betrieb von Floating-Fenstern mit Javascript

Das Die Beispiele in diesem Artikel beschreiben die einfache Implementierung von JS, um den Floating-Window-Effekt zu erzielen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

HTML-Teil:

<!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>
<p style="height:2000px; background:#ccc; display:none;">
</p>
<!--p 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;">
<p onclick="closeFAd();" style=" width:26px; height:26px; float:right;"></p>
<p style="width:487px; height:320px; float:right;" onclick="open_online();"></p>
</p>
<p 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();></p-->
</body>
</html>
<script type="text/javascript" src="online.js"></script>

Nach dem Login kopieren

JS-Teil:

// 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("<p 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("<p onclick=\"closeFAd();\" style=\" width:26px; height:26px; float:right;\"></p>");
document.writeln("<p style=\"width:487px; height:320px; float:right;\" onclick=\"open_online();\"></p>");
document.writeln("</p>");
//浮动侧栏
document.writeln("<p 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();\"></p>");
//关闭浮动广告
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);

Nach dem Login kopieren

Das Rendering ist wie folgt:

Verwandte Empfehlungen:

JS zu realisieren dynamischer Schneeflockenfall

Canvas und JS implementieren dynamische Uhranimation

Das obige ist der detaillierte Inhalt vonJS implementiert einfach schwebende Fenster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!