点击有提示两秒就消失jquery特效

 

代码：

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>jQuery弹出div提示 并2秒自动消失</title>

    <style type="text/css">
        .overlay{
                background:transparent url(images/overlay.png) repeat top left;
                position:fixed;
                top:0px;
                bottom:0px;
                left:0px;
                right:0px;
                z-index:100;
                }

            .box{
                position:fixed;
            top:-500px;
                left:30%;
                right:30%;
                background-color:#fff;
                color:#7F7F7F;
                padding:20px;
                border:2px solid #ccc;
                -moz-border-radius: 20px;
                -webkit-border-radius:20px;
                -khtml-border-radius:20px;
                -moz-box-shadow: 0 1px 5px #333;
                -webkit-box-shadow: 0 1px 5px #333;
                z-index:101;
                }
                span.boxclose{
                    float:right;
                    width:26px;
                    height:26px;
                    background:transparent url(images/cancel.png) repeat top left;
                    margin-top:-30px;
                    margin-right:-30px;
                    cursor:pointer;
                }
                .img{float:right;}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">

function tishi(mess){
 $('#overlay').fadeIn('fast', function () {
                        $('#box').animate({ 'top': '150px' }, 500);
$("#mess").html(mess); 
setTimeout("tishiclose()",2000);//2秒消失，可以改动

                    });
}

function tishiclose(){
 $('#box').animate({ 'top': '-500px' }, 500, function () {
                        $('#overlay').fadeOut('fast');
                    });
}


      
    </script>
</head>
<body>
     <a id="activator" href="#" class="demobutton lightblue" onclick="tishi('我是jQuery弹出div提示 并2秒自动消失');">点击查看效果</a>
                <div class="overlay" id="overlay" style="display:none;"></div>
                <div class="box" id="box">
<span class="boxclose" id="boxclose" onclick="tishiclose();"></span>
<span href="http://www.ablanxue.com" id="mess"></span>
</div>

</body>
</html>

代码地址：http://pan.baidu.com/s/1i5bP35F

 

posted @ 2016-10-18 10:56  王传明  阅读(279)  评论(0)    收藏  举报