Home > Article > Web Front-end > Jquery实现顶部弹出框特效_jquery

Jquery实现顶部弹出框特效_jquery

WBOYOriginal: 2016-05-16 15:46:121154browse

Jq制作的页面顶部动态弹出的提示框，可以用于提示信息的显示以及通知信息的显示。

Html代码


 
 Jq顶部弹出框X

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")});
  }
}

再给大家分享一例特效，效果也非常不错

CSS

HTML



jquery float浮动层弹出层页面加载特效




 
 
  jquery顶部动画弹出层

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jquery实现鼠标滑过后动态图片提示效果实例_jqueryNext article：jQuery模拟原生态App上拉刷新下拉加载更多页面及原理_jquery

See more

Jquery实现顶部弹出框特效_jquery

jquery顶部动画弹出层

Related articles