JS實現對聯浮動廣告（初級）
阿新 • • 發佈：2019-02-15
程式碼有待改善，多多見諒
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>對聯廣告</title> <style> #leftFloat{ width: 200px; height: 280px; background-color: red; position: fixed; left: 0px; /*IE6相容*/ _position:absolute; _top:expression(document.documentElement.scrollTop+(document.documentElement.clientHeight-this.offsetHeigh)/3); } #rightFloat{ width: 200px; height: 280px; background-color: red; position: fixed; right: 0px; _position:absolute; _top:expression(document.documentElement.scrollTop+(document.documentElement.clientHeight-this.offsetHeigh)/3); } .close{ height: 20px; width: 200px; background-color: pink; position: absolute; bottom: 0px; left:0px; text-align: center; font-size: 20px; } .close a{ text-decoration: none; color: #000; } </style> <script> window.onload = function (){ var leftdiv = document.getElementById('leftFloat'); var rightdiv = document.getElementById("rightFloat");
<span style="white-space:pre"> </span>//看見區域的高度-左浮動的可見高度var t = (document.documentElement.clientHeight-leftdiv.offsetHeight)/3 + 'px'; leftdiv.style.top = t; rightdiv.style.top = t; } function close(){ document.getElementById('leftFloat').style.display='none'; document.getElementById('rightFloat').style.display='none'; } </script> </head> <body> <div id="leftFloat"> <div class="close"><a href="javascript:close()">關閉</a></div> </div> <div id="rightFloat"> <div class="close"><a href="javascript:close()">關閉</a></div> </div> </body> </html>