suchen

Heim  >  Artikel  >  Web-Frontend  >  JS implementiert einfach schwebende Fenster

JS implementiert einfach schwebende Fenster

不言
不言Original
2018-05-05 16:12:164152Durchsuche

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>

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);

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Avalonjs implementiert eine einfache WarenkorbfunktionNächster Artikel：Avalonjs implementiert eine einfache Warenkorbfunktion

In Verbindung stehende Artikel

Mehr sehen