2013/11/17

jQuery 修改z-index達成置頂廣告效果

平常看ETtoday新聞,閒置三分鐘後會出現廣告





廣告通常置頂於最上層,作法可能是去調整z-index

以下是我的程式碼:
<html>
 <head>
  <meta charset="utf8">
  <title>Demo</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script type="text/javascript">
   $(function () {
    $("#test2").position({
     left: 0,
     top:0
    });
   });

   function Hide () {
    $("#test2").hide();
   }
  </script>
  <style type="text/css">
   #test2{
    position: absolute;
    z-index: 1;
    left: 120px;
    top: 100px;
   }
   
   #test2 img{
    margin: 0 auto;
    width: 640px;
    height: 480px;
   }
  </style>
 </head>
 <body>
  <div id="test1">
   testdsadasdsad<br>
   eqwewqe<br>
   qewqeqwe<br>
   wqewqewqe<br>
   wqewqe<br>
  </div>
  <div id="test2">
   <img src="1.jpg" onclick="Hide();">
  </div>
 </body>
</html>

開啟範例網頁會出現假廣告


點擊時,會將廣告隱藏起來,或將廣告直接刪除



參考資料:
http://api.jquery.com/offset/

圖片來源:
http://www.wired.com/wiredenterprise/wp-content/uploads/2013/07/ff_googleinfrastructure_large.jpg