页面右下角提示信息框

来源：互联网发布：数据方舟产品编辑：程序博客网时间：2024/06/04 19:56

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>  <head>    <title>index.html</title>         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>    <meta http-equiv="description" content="this is my page"/>    <meta http-equiv="content-type" content="text/html; charset=GBK"/>         <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->   </head>     <body onload='initPage();'>  </body>  <script type="text/javascript">    function initPage(){        var returnMsg = "<p>信息1 jquery-1.7.2.min.js</p><p>信息2 notice.js</p>";        $.show('提示信息',returnMsg,10000);    }  </script>  <script src="jquery.min.js" type="text/javascript" ></script>  <script type="text/javascript" >var time;var delayTime;$(function(){    // 增加浮动DIV    $('body').append("<div id='notice' onselectstart='return false'><span class='notice_title'> </span><span class='cbtn'>[关闭]</span><div class='notice_content'></div></div>");         // 更改样式    $('#notice').css({right:"0",bottom:"0",cursor:"default",position:"fixed","background-color":"#F0F9FD",color:"#1F336B","z-index":"999",border:"1px #F2F2FB solid",margin:"2px",padding:"10px","font-weight":"bold","line-height":"25px",display:"none",width:"400px",height:"200px"});    $('#notice .cbtn').css({color:"#FF0000",cursor:"pointer","padding-right":"5px",float:"right",position:"relative"});    $('#notice .notice_content').css({margin:"3px","font-weight":"normal",border:"1px #B9C9EF solid","line-height":"20px","margin-bottom":"10px",padding:"10px",height:"135px"});         /* 绑定事件*/    $('#notice').hover(        function(){            $(this).stop(true,true).slideDown();            clearTimeout(time);        },        function(){            time = setTimeout('_notice()',delayTime);        }    );         //绑定关闭事件    $('.cbtn').bind('click',function(){        $('#notice').slideUp('fast');        clearTimeout(time);    });});$.extend({    lay:function(_width,_height){        $('#notice').css({width:_width,height:_height});    },    show:function(_title,_msg,_time){         delayTime = _time;         $('.notice_title').html(_title);         $('.notice_content').html(_msg);         $('#notice').slideDown(2000);         time = setTimeout('_notice()',delayTime);    }});function _notice(){    $('#notice').slideUp(2000);}  </script></html>

直接复制，修改下jquery.min.js的路径，就可以看到效果！！！

原文来自：http://www.oschina.net/code/snippet_587568_49870

0 0