This article describes the simple implementation of floating window effects by JS. Share it for your reference, as follows:
HTML part:
<!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>Unt titled document</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 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 part:
// JavaScript Document//Floating advertising image var floatAdImg = "images/onlineSay.jpg";//Floating sidebar image var floatSideImg = "images/onlineTel.gif";//Open online communication function open_online(){ window.open('http://p.qiao.baidu.com//im/index?siteid=7342332&ucid=7601325');}//Floating advertising 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>");//Floating sidebar 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>");//Close floating advertising function closeFAd(){ document.getElementById('floatAd').style.display = 'none';}//Open floating ad function showFAd(){ document.getElementById('floatAd').style.display = 'block';}//Open floating window function showFloat(){ document.getElementById('floatAd').style.display = 'block';}//Open the window function showFloat(){ document.getElementById('floatAd').style.display = 'block';}//Open the window for 20 seconds and only execute setTimeout once(showFAd,20000);//Open setInterval(showFloat,30000);The renderings are as follows:
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript Traversal Algorithm and Skills", "Summary of JavaScript Switching Special Effects and Skills", "Summary of JavaScript Search Algorithm Skills", "Summary of JavaScript Animation Special Effects and Skills", "Summary of JavaScript Errors and Debugging Skills", "Summary of JavaScript Data Structures and Algorithm Skills" and "Summary of JavaScript Mathematical Operation Usage"
I hope this article will be helpful to everyone's JavaScript programming.