欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jquery+css3实现的经典弹出层效果示例

程序员文章站 2022-07-06 17:53:24
本文实例讲述了jquery+css3实现的弹出层效果。分享给大家供大家参考，具体如下：可能出现的情况1）一列都有，按顺序弹出对应的弹出层2）只有单个一个弹出层3）不按顺序不按规律随机弹出层jquery...

本文实例讲述了jquery+css3实现的弹出层效果。分享给大家供大家参考，具体如下：

可能出现的情况

1）一列都有，按顺序弹出对应的弹出层

2）只有单个一个弹出层

3）不按顺序不按规律随机弹出层

jquery 弹出层 解决 第一种情况

参考资料

移动端之“css3多动画弹框”

引入jquery

js代码 这里关闭用的css3效果实现

<script type="text/javascript">
  var w,h,classname;
  function getsrceenwh(){
    w = $(window).width();
    h = $(window).height();
    $('#dialogbg').width(w).height(h);
  }
 
  window.onresize = function(){
    getsrceenwh();
  }
  $(window).resize();
 
  $(function(){
    getsrceenwh();
 
    //显示弹框
    $('.solution_class a').click(function(){
      classname = $(this).attr('class');
      $('#dialogbg').fadein(300);
      $('#dialog').removeattr('class').addclass('animated '+classname+'').fadein();
    });
 
    //关闭弹窗
    $('.clasedialogbtn,#dialogbg').click(function(){
      $('#dialogbg').fadeout(300,function(){
        $('#dialog').addclass('bounceoutup').fadeout();
      });
    });
  });
</script>

html

<div id="dialogbg"></div>
  <div id="dialog" class="animated">
 
    <div class="dialogtop">
      <a href="javascript:;" rel="external nofollow" class="clasedialogbtn">关闭</a>
    </div>
  </div>

css

/*遮罩层*/
 
.animated{
  -webkit-animation-duration:1.4s;
  animation-duration:1.4s;
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both
}
 
@-webkit-keyframes bouncein{
  0%{
    opacity:0;
    -webkit-transform:scale(.3);
    transform:scale(.3)
  }
  50%{
    opacity:1;
    -webkit-transform:scale(1.05);
    transform:scale(1.05)
  }
  70%{
    -webkit-transform:scale(.9);
    transform:scale(.9)
  }
  100%{
    opacity:1;
    -webkit-transform:scale(1);
    transform:scale(1)
  }
 
}
@keyframes bouncein{
  0%{
    opacity:0;
    -webkit-transform:scale(.3);
    -ms-transform:scale(.3);
    transform:scale(.3)
  }
  50%{
    opacity:1;
    -webkit-transform:scale(1.05);
    -ms-transform:scale(1.05);
    transform:scale(1.05)
  }
  70%{
    -webkit-transform:scale(.9);
    -ms-transform:scale(.9);
    transform:scale(.9)
  }
  100%{
    opacity:1;
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1)
  }
 
}
.bouncein{
  -webkit-animation-name:bouncein;
  animation-name:bouncein
}
 
@-webkit-keyframes bounceindown {
  0% {
    opacity: 0;
    -webkit-transform: translatey(-2000px);
    transform: translatey(-2000px);
  }
 
  60% {
    opacity: 1;
    -webkit-transform: translatey(30px);
    transform: translatey(30px);
  }
 
  80% {
    -webkit-transform: translatey(-10px);
    transform: translatey(-10px);
  }
 
  100% {
    -webkit-transform: translatey(0);
    transform: translatey(0);
  }
}
 
@keyframes bounceindown {
  0% {
    opacity: 0;
    -webkit-transform: translatey(-2000px);
    -ms-transform: translatey(-2000px);
    transform: translatey(-2000px);
  }
 
  60% {
    opacity: 1;
    -webkit-transform: translatey(30px);
    -ms-transform: translatey(30px);
    transform: translatey(30px);
  }
 
  80% {
    -webkit-transform: translatey(-10px);
    -ms-transform: translatey(-10px);
    transform: translatey(-10px);
  }
 
  100% {
    -webkit-transform: translatey(0);
    -ms-transform: translatey(0);
    transform: translatey(0);
  }
}
 
.bounceindown {
  -webkit-animation-name: bounceindown;
  animation-name: bounceindown;
}
 
@-webkit-keyframes bounceoutup {
  0% {
    -webkit-transform: translatey(0);
    transform: translatey(0);
  }
 
  20% {
    opacity: 1;
    -webkit-transform: translatey(20px);
    transform: translatey(20px);
  }
 
  100% {
    opacity: 0;
    -webkit-transform: translatey(-2000px);
    transform: translatey(-2000px);
  }
}
 
@keyframes bounceoutup {
  0% {
    -webkit-transform: translatey(0);
    -ms-transform: translatey(0);
    transform: translatey(0);
  }
 
  20% {
    opacity: 1;
    -webkit-transform: translatey(20px);
    -ms-transform: translatey(20px);
    transform: translatey(20px);
  }
 
  100% {
    opacity: 0;
    -webkit-transform: translatey(-2000px);
    -ms-transform: translatey(-2000px);
    transform: translatey(-2000px);
  }
}
 
.bounceoutup {
  -webkit-animation-name: bounceoutup;
  animation-name: bounceoutup;
}
 
@-webkit-keyframes rollin {
  0% {
    opacity: 0;
    -webkit-transform: translatex(-100%) rotate(-120deg);
    transform: translatex(-100%) rotate(-120deg);
  }
 
  100% {
    opacity: 1;
    -webkit-transform: translatex(0px) rotate(0deg);
    transform: translatex(0px) rotate(0deg);
  }
}
 
@keyframes rollin {
  0% {
    opacity: 0;
    -webkit-transform: translatex(-100%) rotate(-120deg);
    -ms-transform: translatex(-100%) rotate(-120deg);
    transform: translatex(-100%) rotate(-120deg);
  }
 
  100% {
    opacity: 1;
    -webkit-transform: translatex(0px) rotate(0deg);
    -ms-transform: translatex(0px) rotate(0deg);
    transform: translatex(0px) rotate(0deg);
  }
}
 
.rollin {
  -webkit-animation-name: rollin;
  animation-name: rollin;
}
 
 
@-webkit-keyframes flipinx {
  0% {
    -webkit-transform: perspective(400px) rotatex(90deg);
    transform: perspective(400px) rotatex(90deg);
    opacity: 0;
  }
 
  40% {
    -webkit-transform: perspective(400px) rotatex(-10deg);
    transform: perspective(400px) rotatex(-10deg);
  }
 
  70% {
    -webkit-transform: perspective(400px) rotatex(10deg);
    transform: perspective(400px) rotatex(10deg);
  }
 
  100% {
    -webkit-transform: perspective(400px) rotatex(0deg);
    transform: perspective(400px) rotatex(0deg);
    opacity: 1;
  }
}
 
@keyframes flipinx {
  0% {
    -webkit-transform: perspective(400px) rotatex(90deg);
    -ms-transform: perspective(400px) rotatex(90deg);
    transform: perspective(400px) rotatex(90deg);
    opacity: 0;
  }
 
  40% {
    -webkit-transform: perspective(400px) rotatex(-10deg);
    -ms-transform: perspective(400px) rotatex(-10deg);
    transform: perspective(400px) rotatex(-10deg);
  }
 
  70% {
    -webkit-transform: perspective(400px) rotatex(10deg);
    -ms-transform: perspective(400px) rotatex(10deg);
    transform: perspective(400px) rotatex(10deg);
  }
 
  100% {
    -webkit-transform: perspective(400px) rotatex(0deg);
    -ms-transform: perspective(400px) rotatex(0deg);
    transform: perspective(400px) rotatex(0deg);
    opacity: 1;
  }
}
 
.flipinx {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipinx;
  animation-name: flipinx;
}
 
/*------------------- 华丽分割线 -----------------------*/
 
/*------------------- 华丽分割线 -----------------------*/
 
#dialogbg {
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: .8;
  filter: alpha(opacity=60);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: none;
}
 
#dialog {
  width: 800px;
  height: 600px;
  margin: 0 auto;
  display: none;
  background-color: #ffffff;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -300px 0 0 -400px;
  z-index: 10000;
  border: 1px solid #ccc;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  box-shadow: 3px 2px 4px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 3px 2px 4px rgba(0, 0, 0, 0.2);
}
 
.dialogtop {
  width: 90%;
  margin: 0 auto;
  border-bottom: 1px dotted #ccc;
  letter-spacing: 1px;
  padding: 10px 0;
  text-align: right;
}
 
.dialogico {
  width: 50px;
  height: 50px;
  position: absolute;
  top: -25px;
  left: 50%;
  margin-left: -25px;
}
 
.editinfos {
  padding: 15px 0;
}
 
.editinfos li {
  width: 90%;
  margin: 8px auto auto;
  text-align: center;
}
 
.ipt {
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  box-shadow: 0 0 3px #ccc inset;
  -webkit-box-shadow: 0 0 3px #ccc inset;
  margin-left: 5px;
}
 
.ipt:focus {
  outline: none;
  border-color: #66afe9;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
}
 
.submitbtn{width:90px;height:30px;line-height:30px;font-family:"微软雅黑","microsoft yahei";cursor:pointer;margin-top:10px;display:inline-block;border-radius:5px;-webkit-border-radius:5px;text-align:center;background-color:#428bca;color:#fff;box-shadow: 0 -3px 0 #2a6496 inset;-webkit-box-shadow: 0 -3px 0 #2a6496 inset;}

上一篇： centos6使用docker部署redis主从数据库操作示例

下一篇： javascript 易错知识点实例小结

推荐阅读