jQuery彈出Div視窗置中顯示、滾動跟隨、關閉按鈕以及幾秒後自動消失

來源:互聯網
上載者:User
  <DIV id="closeLayer"  onClick="closeMe()"><IMG src="jiuye/close.gif" width="15" height="13"></DIV>  <div id ="jiuye"><img src="jiuye/jiuye1.jpg" id="jiuyeImage" onclick="javascript:location='http://www.qk12333.com'" style="cursor:hand"/></div>  <style type="text/css">  #jiuye{  position:absolute;  left:16px;  top:129px;  width:600px;  height:540px;  z-index:1;    }  #closeLayer{  position:absolute;  left:580px;  top:143px;  width:24px;  height:19px;  z-index:2;  }  </style><script src="jiuye/jquery-1.8.0.js" type="text/javascript"></script><script type="text/javascript">  function closeMe(){document.getElementById("closeLayer").style.display="none";document.getElementById("jiuye").style.display="none";$(window).unbind();}  // 置中function center() {var obj=$("#jiuye");var closeObj=$("#closeLayer");var screenWidth = $(window).width(), screenHeight = $(window).height(); //當前瀏覽器視窗的 寬高var scrolltop = $(document).scrollTop();//擷取當前視窗距離頁面頂部高度var objLeft = (screenWidth - obj.width())/2 ;var objTop = (screenHeight - obj.height())/2 + scrolltop;obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});var closeObjLeft = (screenWidth + obj.width())/2-closeObj.width()-2 ;var closeObjTop = (screenHeight - obj.height())/2 + scrolltop+12;closeObj.css({left: closeObjLeft + 'px', top: closeObjTop + 'px','display': 'block'});//瀏覽器視窗大小改變時$(window).resize(function() {screenWidth = $(window).width();screenHeight = $(window).height();scrolltop = $(document).scrollTop();objLeft = (screenWidth - obj.width())/2 ;objTop = (screenHeight - obj.height())/2 + scrolltop;obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});var closeObjLeft = (screenWidth + obj.width())/2-closeObj.width()-2 ;var closeObjTop = (screenHeight - obj.height())/2 + scrolltop+12;closeObj.css({left: closeObjLeft + 'px', top: closeObjTop + 'px','display': 'block'});});//瀏覽器有捲軸時的操作、$(window).scroll(function() {screenWidth = $(window).width();screenHeight = $(window).height();scrolltop = $(document).scrollTop();objLeft = (screenWidth - obj.width())/2 ;objTop = (screenHeight - obj.height())/2 + scrolltop;obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});var closeObjLeft = (screenWidth + obj.width())/2-closeObj.width()-2 ;var closeObjTop = (screenHeight - obj.height())/2 + scrolltop+12;closeObj.css({left: closeObjLeft + 'px', top: closeObjTop + 'px','display': 'block'});});} center();$('#closeLayer').show(300).delay(3000).fadeOut("slow");$('#jiuye').show(300).delay(3000).fadeOut("slow",function(){      //隱藏時把元素刪除     $(window).unbind();});   </script>

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.