Jqueryは上部ポップアップボックスの特効を実現
5475 ワード
Jqが作成したページ上部に動的にポップアップされたヒントボックスは,ヒント情報の表示や通知情報の表示に利用できる.
Htmlコード
Jqコード
もう1つの特効を共有して、効果もとてもいいです.
CSS
JS
HTML
Htmlコード
Css代码
body {
margin: 0;
padding: 0;
}
.tooltiptop {
width: 100%;
height: 50px;
margin-top:-50px;
display:none;
}
.tooltiptop .bg {
width: 100%;
background-color: #333;
height: 50px;
opacity: .7;
position: absolute;
margin: 0;
}
.tooltiptop .main {
width: 100%;
position: absolute;
margin: 0;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
}
.tooltiptop .main span {
float: right;
color: #fff;
margin-right: 20px;
cursor: pointer;
}
Jqコード
var ToolTipTop={
Show:function(Msg){
$(".tooltiptop .main i").html(Msg);
$(".tooltiptop").css("display","block").animate({marginTop:"0px"},500);
},
Hide:function(){
$(".tooltiptop").animate({marginTop:"-50px"},500,function(){$(this).css("display","none")});
}
}
もう1つの特効を共有して、効果もとてもいいです.
CSS
JS
$(document).ready(function(){
var h = $(document).height();
$(".overlay").css({"height": h });
$(".action").click(function(){
$(".overlay").css({'display':'block'}).animate({'opacity':'0.8'});
$(".destroy").stop(true).animate({'margin-top':'40px','opacity':'1'},400);
});
$(".close").click(function(){
$(".destroy").stop(true).animate({'margin-top':'-292px','opacity':'0'},800);
$(".overlay").css({'display':'none'}).animate({'opacity':'0'});
});
});
HTML
jquery