• 我们为什么不接受师生恋?-光明时评 2019-04-06
  • 鹰潭摊贩卖野生蘑菇幸被执法人员当场销毁 2019-04-06
  • 新一批赴黎维和扫雷官兵全面展开“蓝线”扫雷 2019-04-02
  • 事实是应该找找中国的一些所谓的专家为什么越来越愚蠢的原因了?也应该找找转帖者“风水神”等为什么会与那些愚蠢的所谓专家扯在一起的原因了。哈哈哈哈! 2019-03-28
  • 2018年5月后期资助项目结项名单 2019-03-28
  • 市人大常委会召开党组会议传达学习全国两会精神张轩主持并讲话 2019-03-23
  • NBL今日召开推广会 优胜队伍晋级CBA之门或将重启 2019-03-23
  • [微笑]原因很简单:房产的升值是由关联资源的增加形成的,跟房屋的产权人没有任何关系,肯定就不能让其从中获利! 2019-03-21
  • l8854552

    今天湖北30选5开奖结果:jQuery弹出模态窗口导航菜单插件

    上传于 3年前| 菜单/导航|网页特效 |3245 |53
    jQuery弹出模态窗口导航菜单插件2999
     湖北省福彩30选5 www.jkyr.net 效果非常炫酷的jQuery弹性模态窗口导航菜单插件。当一个网站在制作导航菜单时,一般有两种选择:列表形式或模态窗口。该jQuery插件将两者非常完美的结合到了一起,创建了一种带弹性动画效果的模态窗口导航菜单。插件中使用了CSS3 animations 和一些jQuery来制作这种弹性效果的导航菜单。
    
    HTML结构
    
    该导航菜单的HTML结构非常简单:使用一个无序列表来制作导航菜单项,它内包裹在一个<nav>元素中,然后<nav>元素元素放置在一个div.cd-bouncy-nav-modal中。
    
    
    <div class="cd-bouncy-nav-modal">
      <nav>
        <ul class="cd-bouncy-nav">
          <li><a href="#0">Item 1</a></li>
          <!-- other list items here -->
        </ul>
      </nav>
      <a href="#0" class="cd-close">Close modal</a>
    </div>
    
    CSS样式 在该弹性导航菜单插件中使用了 CSS3 transition 和CSS3 animations。默认情况下,导航菜单是被隐藏在窗口下面的(使用translateY(100vh))。当用户点击了.cd-bouncy-nav-trigger按钮时,.cd-bouncy-nav元素被添加上class .fade-in,.cd-bouncy-nav元素的透明度和可见性都被改变(这里使用CSS3 transitions来制作平滑的过渡效果)。 然后使用cd-move-in来制作导航菜单列表项的动画。 插件中使用CSS animations是为了制作弹性效果,CSS animations可以定义关键帧,这样我们可以灵活的控制动画 效果。 为了增加动画效果,插件中使用animation-delay来为不同的导航菜单列表项添加动画延时。 注意:插件中设置animation-fill-mode: forwards是为了再弹性动画结束时,导航菜单列表项不会改变它们的位置(由于不同的animation-delay值,我们不能直接为列表项设置translateY(0))。
    .cd-bouncy-nav-modal {
      position: fixed;
      width: 100%;
      height: 100%;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s 0.6s, visibility 0s 0.9s;
    }
    .cd-bouncy-nav-modal.fade-in {
      visibility: visible;
      opacity: 1;
      transition: opacity 0.1s 0s, visibility 0s 0s;
    }
    .cd-bouncy-nav li {
      transform: translateY(100vh);
    }
    .fade-in .cd-bouncy-nav li {
      animation: cd-move-in 0.4s;
      animation-fill-mode: forwards;
    }
    @keyframes cd-move-in {
      0% {
        transform: translateY(100vh);
      }
      65% {
        transform: translateY(-1.5vh);
      }
      100% {
        transform: translateY(0vh);
      }
    }
    
    JAVASCRIPT 该导航菜单插件中使用jQuery来监听.cd-bouncy-nav-trigger元素(或.cd-close元素)的点击事件,为它添加相应的.fade-in/.fade-out class来打开关闭模态窗口。
    jQuery(document).ready(function($){
      var is_bouncy_nav_animating = false;
      //open bouncy navigation
      $('.cd-bouncy-nav-trigger').on('click', function(){
        triggerBouncyNav(true);
      });
      //close bouncy navigation
      $('.cd-bouncy-nav-modal .cd-close').on('click', function(){
        triggerBouncyNav(false);
      });
      $('.cd-bouncy-nav-modal').on('click', function(event){
        if($(event.target).is('.cd-bouncy-nav-modal')) {
          triggerBouncyNav(false);
        }
      });
     
      function triggerBouncyNav($bool) {
        //check if no nav animation is ongoing
        if( !is_bouncy_nav_animating) {
          is_bouncy_nav_animating = true;
           
          //toggle list items animation
          $('.cd-bouncy-nav-modal').toggleClass('fade-in', $bool).toggleClass('fade-out', !$bool).find('li:last-child').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
            $('.cd-bouncy-nav-modal').toggleClass('is-visible', $bool);
            if(!$bool) $('.cd-bouncy-nav-modal').removeClass('fade-out');
            is_bouncy_nav_animating = false;
          });
           
          //check if CSS animations are supported... 
          if($('.cd-bouncy-nav-trigger').parents('.no-csstransitions').length > 0 ) {
            $('.cd-bouncy-nav-modal').toggleClass('is-visible', $bool);
            is_bouncy_nav_animating = false;
          }
        }
      }
    });
    
        立即下载 ( 文件大?。?em>0.04 M)

      浏览器兼容性

      1. IE 9
      2. Mozilla Firefox
      3. Google Chrome
      4. Oper
      5. Safari

      技术讨论区

      1. xm,小美,xm1

        xm,小美,xm

        很不错啊 炫酷

        2017-04-28 13:48:32| 回复

      2. 请先登录

          发 布

      键盘快捷键: 上一个 下一个

    • 我们为什么不接受师生恋?-光明时评 2019-04-06
    • 鹰潭摊贩卖野生蘑菇幸被执法人员当场销毁 2019-04-06
    • 新一批赴黎维和扫雷官兵全面展开“蓝线”扫雷 2019-04-02
    • 事实是应该找找中国的一些所谓的专家为什么越来越愚蠢的原因了?也应该找找转帖者“风水神”等为什么会与那些愚蠢的所谓专家扯在一起的原因了。哈哈哈哈! 2019-03-28
    • 2018年5月后期资助项目结项名单 2019-03-28
    • 市人大常委会召开党组会议传达学习全国两会精神张轩主持并讲话 2019-03-23
    • NBL今日召开推广会 优胜队伍晋级CBA之门或将重启 2019-03-23
    • [微笑]原因很简单:房产的升值是由关联资源的增加形成的,跟房屋的产权人没有任何关系,肯定就不能让其从中获利! 2019-03-21