zoukankan      html  css  js  c++  java
  • 代码分享h5-sessionStorage,提示app下载代码块

    1.html:

      <div class="down-app">
        <span id="dowm-close">x</span>
        <dl>
          <dt>logo</dt>
          <dd>
            <h3>某某公司</h3>
            <p>某某公司宗旨</p>
          </dd>
        </dl>
        <div class="down-app-main clearfix"><a href="#">某某公司</a></div>
      </div>
      <div class="down-app-bg"></div>







    2.css:  

    .down-app-bg{position:fixed!important;bottom:-1px!important;100%;max-640px;min-320px;height:80px;z-index:1;display:none}
    .down-app{position:fixed!important;bottom:0!important;100%;max-640px;min-320px;height:80px;z-index:2;direction:down;background:rgba(0,0,0,.71)}
    .down-app span{display:inline-block;height:100%;10%;padding-left:2%;float:left}
    .down-app dl{margin-top:.8%;height:100%;float:left}
    .down-app dl dt{margin-right:10px;50px;height:100%;float:left}
    .down-app dl dd{float:left}
    .down-app dl dd h3{margin-top:10%;line-height:30px;font-size:18px;color:#FFF}
    .down-app dl dd p{color:#fff;font-size:12px}
    .down-app-main{text-align:right;height:100%;float:left;35%;position:relative}
    .down-app-main a{position:absolute;right:0;90px;height:40px;text-align:center;line-height:40px;background:#f8b62b;display:inline-block;color:#fff;border-radius:5px;margin-top:15%}

    
    

    3.js:

    <script src="js/zepto.min.js"></script>
    <script>
      $(function(){
        var downapp=$(".down-app,.down-app-bg");
        downapp[sessionStorage.getItem('downloadAPP') || 'show']();
        $("#dowm-close").on("click",function(){
        downapp.remove();
        sessionStorage.setItem('downloadAPP', 'remove');
      });

      //获取input时,app下载代码块隐藏
      var zm_input=$('#zm-user-reg-form-c input');
      zm_input.on('focus',function(){
        if ( $('.down-app').length){
          downapp.hide();
        }
      }).on('blur',function(){
        if ( $('.down-app').length){
          downapp.show();
        }
      });
    })
    </script>

  • 相关阅读:
    非post请求时整个url作为参数传递出现bug
    UML类图及类与类之间的关系
    MyBatis中if,where,set标签
    MySQL主从复制配置遇到的部分问题
    SpringMVC的各种参数绑定方式
    对解释器模式的认识
    大型网站技术架构案例分析
    淘宝网质量属性描述
    阅读架构漫谈笔记
    阅读计划——《软件需求十步走》06
  • 原文地址:https://www.cnblogs.com/fcan/p/4819497.html
Copyright © 2011-2022 走看看