提示信息的窗口效果

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title > 提示信息的窗口效果 </ title >

     < script  type ="text/javascript"  src ="jquery-1.4.1.js" ></ script >

     < style  type ="text/css" >
        .css_window
         {
            background-color :  #D0DEF0 ;
            width :  250px ;
            padding :  2px ;
            margin :  5px ;
            position :  absolute ;
            display :  none ;
         }
        .css_window_title
         {
            padding :  2px ;
            font-size :  14px ;
         }
        .css_window_title span
         {
            float :  right ;
            font-size :  12px ;
            color :  blue ;
            cursor :  pointer ;
         }
        .css_window_content
         {
            height :  150px ;
            background-color :  White ;
            font-size :  13px ;
            overflow :  auto ;
         }
     </ style >

     < script  type ="text/javascript" >

         /*
        @param position         窗口最终位置，包含left和top属性
        @param hidefunc         执行窗口隐藏的方法
        @param initPosition     窗口初始化位置，包含left和top属性
         */
        $.fn.show_window  =   function (position, hidefunc, initPosition) {
             // 当前窗口
             var  cwin  =   this ;
             // 当前窗口的宽和高
             // outerXXX()参数为true时包含padding,margin……的值
             var  cwind_width  =   this .outerWidth( true );
             var  cwind_height  =   this .outerHeight( true );

             // 最终确定的left和top
             var  left;
             var  top;

             // 用于判断输入的值
             var  p_left  =  position.left;
             var  p_top  =  position.top;

             // 游览器窗口的宽和高，滚动条的左边界值和上边界值
             var  browser_width;
             var  browser_height;
             var  scroll_left;
             var  scroll_top;

             // 获取游览器窗口的宽和高，滚动条的左边界值和上边界值
             function  getBrowserDim() {
                browser_width  =  $(window).width();
                browser_height  =  $(window).height();
                scroll_left  =  $(window).scrollLeft();
                scroll_top  =  $(window).scrollTop();
            }

             function  setleft(p_left, scroll_left, browser_width, cwind_width) {
                 // 设置left
                 if  (p_left  &&   typeof  p_left  ==   " string " ) {
                     if  (p_left  ==   " center " ) left  =  scroll_left  +  (browser_width  -  cwind_width)  /   2 ;
                     else   if  (p_left  ==   " left " ) left  =  scroll_left;
                     else   if  (p_left  ==   " right " ) left  =  scroll_left  +  browser_width  -  cwind_width;
                     else  left  =  scroll_left  +  browser_width  -  cwind_width;
                }
                 else   if  (p_left  &&   typeof  p_left  ==   " number " ) {
                    left  =  p_left;
                }
                 else  {
                    left  =   0 ;
                }
            }

             function  settop(p_top, scroll_top, browser_height, cwind_height) {
                 // 设置top
                 if  (p_top  &&   typeof  p_top  ==   " string " ) {
                     if  (p_top  ==   " center " ) top  =  scroll_top  +  (browser_height  -  cwind_height)  /   2 ;
                     else   if  (p_top  ==   " top " ) top  =  scroll_top;
                     else   if  (p_top  ==   " bottom " ) top  =  scroll_top  +  browser_height  -  cwind_height;
                     else  top  =  scroll_top  +  browser_height  -  cwind_height;
                }
                 else   if  (p_top  &&   typeof  p_top  ==   " number " ) {
                    top  =  p_top;
                }
                 else  {
                    top  =   0 ;
                }
            }

             // 移动窗口
             function  moveWin() {
                setleft(p_left, scroll_left, browser_width, cwind_width);
                settop(p_top, scroll_top, browser_height, cwind_height);
                 // cwin.css("left", left).css("top", top);
                 // 使用动画的方式改变left和top
                cwin.animate({ left: left, top: top },  600 );
            }

             // 关闭
            cwin.children( " .css_window_title " ).children( " span " ).click( function () {
                 if  ( ! hidefunc) cwin.hide( " slow " );
                 else  hidefunc();
            });


             // 窗口初始位置
             if  (initPosition  &&  initPosition  instanceof  Object) {
                 var  init_left  =  initPosition.left;
                 var  init_top  =  initPosition.top;

                 if  (init_left  &&   typeof  init_left  ==   " number " )
                    cwin.css( " left " , init_left);
                 else
                    cwin.css( " left " ,  0 );

                 if  (init_top  &&   typeof  init_top  ==   " number " )
                    cwin.css( " top " , init_top);
                 else
                    cwin.css( " top " ,  0 );

                cwin.show();
            }

             // 初始化页面
            cwin.data( " p_left " , p_left);  // 保存p_left;
            cwin.data( " p_top " , p_top);  // 保存p_top;
            getBrowserDim();
            moveWin();

             // 注册滚动条的滚动事件
             var  scrollTimeout;
            $(window).scroll( function () {
                 // 判断当前窗口是否可见
                 if  ( ! cwin.is( " :visible " ))
                     return ;
                 // 延时300毫秒防止闪烁
                clearTimeout(scrollTimeout);
                setTimeout( function () {
                    getBrowserDim();
                    moveWin();
                },  300 );
            });

             // 注册游览器大小改变的事件
            $(window).resize( function () {
                getBrowserDim();
                moveWin();
            });

             return  cwin;
        }


        $( function () {

            setTimeout( function () {
                 // 窗口（中间)
                $( " #css_window_center " )
            .show_window({ left:  " center " , top:  " center "  })
            .show( " slow " );

                 // 窗口（左下)
                 var  lb  =  $( " #css_window_leftbottom " ).show_window({ left:  " left " , top:  " bottom "  },  function () {
                    lb.slideUp( " slow " );
                });
                lb.show( " slow " );

                 // 窗口（右下)
                 var  browser_width  =  $(window).width();
                 var  browser_height  =  $(window).height();
                 var  scroll_left  =  $(window).scrollLeft();
                 var  scroll_top  =  $(window).scrollTop();
                 var  cwind_width  =  $( " #css_window_rightbottom " ).outerWidth( true );
                 var  cwind_height  =  $( " #css_window_rightbottom " ).outerHeight( true );
                 var  rb  =  $( " #css_window_rightbottom " ).show_window(
                            { left:  " right " , top:  " bottom "  },  function () { rb.hide(); },
                            {
                                left: scroll_left  +  browser_width  -  cwind_width,
                                top: scroll_top  +  browser_height
                            })
                .fadeOut( 15000 ).dequeue();
                rb.show( " slow " );
            },  500 );
        });
     </ script >

</ head >
< body >
     < div  id ="css_window_center"  class ="css_window" >
         < div  class ="css_window_title" >
             < span > 关闭 </ span >  提示信息的窗口（中间）
         </ div >
         < div  class ="css_window_content" >
            提示信息的窗口（中间） 内容
         </ div >
     </ div >
     < div  id ="css_window_leftbottom"  class ="css_window" >
         < div  class ="css_window_title" >
             < span > 关闭 </ span >  提示信息的窗口（左下）
         </ div >
         < div  class ="css_window_content" >
            提示信息的窗口（左下） 内容
         </ div >
     </ div >
     < div  id ="css_window_rightbottom"  class ="css_window" >
         < div  class ="css_window_title" >
             < span > 关闭 </ span >  提示信息的窗口（右下）
         </ div >
         < div  class ="css_window_content" >
            提示信息的窗口（右下） 内容
         </ div >
     </ div >
</ body >
</ html >

 

转载于:https://www.cnblogs.com/xyjblog/archive/2010/02/18/1669244.html