详细内容
Jquery设计的慢慢升起并淡淡消失的提示窗口
发布日期:2010-07-18     点击:5357     字体:[ ]

下面是用Jquery设计的慢慢升起并淡淡消失的提示窗口
index.html:
Html代码:
  1. <html>
  2. <head>
  3. <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
  4. <title>mymenu</title>
  5. <linktype="text/css"rel="stylesheet"href="menu.css"/>
  6. <scripttype="text/javascript"src="jquery-1.4.min.js"></script>
  7. <scripttype="text/javascript"src="menu.js"></script>
  8. </head>
  9. <bodystyle="overflow:hidden">
  10. <divid="right"class="window">
  11. <divclass="title">
  12. <imgsrc="images/close.gif"alt="关闭"/>
  13. 温馨提示!
  14. </div>
  15. <divclass="context">
  16. 站点基地网站素材(www.zdbase.com)!!
  17. </div>
  18. </div>
  19. &nbsp;
  20. </body>
  21. </html>


javascript:

Js代码:
  1. jQuery(document).ready(function(){
  2. varrightwin=jQuery("#right");
  3. varwindowobj=jQuery(window);
  4. varcwinWidth=rightwin.width();
  5. varcwinHeight=rightwin.height();
  6. varbrowserWidth=windowobj.width();
  7. varbrowserHeight=windowobj.height();
  8. varscrollLeft=windowobj.scrollLeft();
  9. varscrollTop=windowobj.scrollTop();
  10. rightwin.mywin({left:"right",top:"bottom"},
  11. function(){
  12. rightwin.hide(1000);
  13. },{left:browserWidth-cwinWidth-5,top:browserHeight}
  14. ).fadeOut(30000).dequeue();
  15. });
  16.  
  17.  
  18. /*name:mywin插件
  19. *参数position:窗口显示的最终位置{left:XX,top:XX}
  20. *参数hidefunc:关闭时调用的函数
  21. *参数initPos:窗口初位置{left:XX,top:XX}
  22. */
  23. jQuery.fn.mywin=function(position,hidefunc,initPos){
  24. if(position&&positioninstanceofObject){
  25. varpositionleft=position.left;
  26. varpositiontop=position.top;
  27.  
  28. varleft;
  29. vartop;
  30. varwindowobj=$(window);
  31. varcurrentwin=this;
  32. varcwinWidth=this.outerWidth(true);
  33. varcwinHeight=this.outerHeight(true);
  34.  
  35. varbrowserWidth;//浏览器宽度
  36. varbrowserHeight;//浏览器高度
  37. varscrollLeft;//
  38. varscrollTop;//
  39.  
  40. //计算浏览器可视区域位置
  41. functiongetWinDin(){
  42. browserWidth=windowobj.width();
  43. browserHeight=windowobj.height();
  44. scrollLeft=windowobj.scrollLeft();
  45. scrollTop=windowobj.scrollTop();
  46. }
  47. //计算浏览器的左边距
  48. functioncallLeft(positionleft,browserWidth,scrollLeft,cwinWidth){
  49. if(positionleft&&typeofpositionleft=="string"){
  50. if(positionleft=="center"){
  51. left=(browserWidth-cwinWidth)/2;
  52. }
  53. elseif(positionleft=="left"){
  54. left=0;
  55. }
  56. elseif(positionleft=="right"){
  57. left=browserWidth-cwinWidth;
  58. }
  59. }
  60. elseif(positionleft&&typeofpositionleft=="number"){
  61. top=positionleft;
  62. }else{
  63. left=(browserWidth-cwinWidth)/2;
  64. }
  65. }
  66.  
  67. //计算浏览器的上边距
  68. functioncallTop(positiontop,browserHeight,scrollTop,cwinHeight){
  69. if(positiontop&&typeofpositiontop=="string"){
  70. if(positiontop=="center"){
  71. top=(browserHeight-cwinHeight)/2;
  72. }
  73. elseif(positiontop=="top"){
  74. top=0
  75. }
  76. elseif(positiontop=="bottom"){
  77. top=browserHeight-cwinHeight;
  78. }
  79. }
  80. elseif(positiontop&&typeofpositiontop=="number"){
  81. top=positiontop;
  82. }else{
  83. top=(browserHeight-cwinHeight)/2;
  84. }
  85. }
  86. //移动窗口的位置
  87. functionmovewin(){
  88. callLeft(currentwin.data("positionleft"),browserWidth,scrollLeft,cwinWidth);
  89. callTop(currentwin.data("positiontop"),browserHeight,scrollTop,cwinHeight);
  90. currentwin.animate({
  91. left:left-5,
  92. top:top
  93. },2000);
  94. }
  95.  
  96. //拖动窗口滚动条后重新调整窗口的相对位置
  97. varscrolltimeout;
  98. $(window).scroll(function(){
  99. if(!currentwin.is(":visible")){
  100. return;
  101. }
  102. clearTimeout(scrolltimeout);
  103. scrolltimeout=setTimeout(function
    用户评论
    昵称:11 来自:121.28.92.*  
    2016/12/19 10:53:10
    去去去
    昵称:匿名 来自:202.104.66.*  
    2013/1/7 17:54:05
    33
    昵称 
    内容  *
    验证码   
       
Copyright © 2010 zdbase.com All Rights Reserved. 苏ICP备15039389号 可人软件设计