example11.html 933 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. #adv {
  8. position: fixed;
  9. right: 10px;
  10. top: 10px;
  11. width: 200px;
  12. height: 200px;
  13. background-color: blue;
  14. color: yellow;
  15. }
  16. #close {
  17. float: right;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div id="adv">
  23. <span>此广告位招租</span>
  24. <button id="close">关闭</button>
  25. </div>
  26. <script src="js/common.js"></script>
  27. <script>
  28. (function() {
  29. var div = document.getElementById("adv");
  30. var closeButton = document.getElementById("close");
  31. bind(closeButton, "click", function() {
  32. var divStyle = div.currentStyle ||
  33. document.defaultView.getComputedStyle(div);
  34. var top = parseInt(divStyle.top);
  35. if (top < 300) {
  36. div.style.top = (top + 30) + "px";
  37. } else {
  38. div.style.display = "none";
  39. // div.style.visibility = "hidden";
  40. }
  41. });
  42. })();
  43. </script>
  44. </body>
  45. </html>