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('http://p.qiao.baidu.com//im/index?siteid=7342332&ucid=7601325');
}
//浮动广告
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('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);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!
