• 导航随内容 滚动定位


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CPMS  云屋</title>
    
        <meta name="apple-mobile-web-app-capable" content="yes">   
        <meta content="yes" name="apple-touch-fullscreen">
        <meta content="telephone=no,email=no" name="format-detection"> 
    
        <!--
            动态改写<meta>标签
        给<html>元素添加data-dpr属性,并且动态改写data-dpr的值
        给<html>元素添加font-size属性,并且动态改写font-size的值 
        -->
    
        <link rel="stylesheet" type="text/css" href="css/style.css">
    
    
    </head>
    <body>
       
       <body >
            <div class="nav">
                <div style="75%; margin:0 auto;height: 60px;" id="fgMenu">
                    <span class="logo"><img src="images/logo.png" ></span>
                    <ul>
                        <li class="bg"><a href="javascript:;" >首页</a></li>
                        <li><a href="javascript:;" class="">产品</a></li>
                        <li><a href="javascript:;" class="">解决方案</a></li>
                        <li><a href="javascript:;" class="">合作伙伴</a></li>
                        <li><a href="javascript:;" class="">加入我们</a></li>
                    </ul> 
                </div>                   
            </div>
            <div id="main" >
                <div class="header " id="homeNav">            
                    <div class="banner">
                        <img src="images/banner-back.jpg" >
                    </div>
                    <div id="introduce">
                        <div class="w_1200">
                            <div class="title">
                                <p>BUSINESS INTRODUCTION</p>
                                <p>我们可能无所不能</p>
                            </div>
                            <p class="content">云创科技,以“互联网约·安心未来”为目标的创新公司。致力于智慧、安全住宿,云端智能监控分析,打 造一站式智慧住宿综合管理平台。同时我们也不断探索总结行业标准化流程,希望利用科技的力量打破现有的管 理模式重新规划新的蓝海。
                            </p>
                            <p class="content">
                                团队成立至今,投入大量资源研发服务平台,同时在不断的市场反馈中,不断升级改进。同时为了更好、更 全面、更安全的适应市场需求,在平台研发的过程中,配套的硬件设备也在生产制造。并全面投放覆盖市场。我 们相信技术的革新将会不断优化传统的行业标准流程。智能时代正在到来……
                            </p>
                        </div>                  
                    </div>                
                </div>
               
                <div class="product " id="productNav" >
                    <img src="images/product.png" alt="" class="backImg" />              
                    <div class="w_1200">
                        <div class="content productContent">
                            <p class="top"><span><img src="images/logo2.png" alt=""></span><span>安心宿 智能住行</span></p>
                            <p class="center">用户移动端人脸识别认证成功后,上传公安系统 自动获取开门,权限入住流程简单便捷。</p>
                            <ul class="bottom">
                                <li>
                                    <span><img src="images/product-01.png" alt=""></span>
                                    <p>便捷高效</p>
                                    <p> 一键开门无需前台登记开门,手机一键操作开门在指尖</p>
                                </li>
                                <li>
                                    <span><img src="images/product-02.png" alt=""></span>
                                    <p>便捷高效</p>
                                        <p> 一键开门无需前台登记开门,手机一键操作开门在指尖</p>
                                </li>
                                <li>
                                    <span><img src="images/product-03.png" alt=""></span>
                                    <p>便捷高效</p>
                                    <p> 一键开门无需前台登记开门,手机一键操作开门在指尖</p>
                                </li>
                            </ul>
                        </div>
                    </div>       
                </div>
                <div class="scheme " id="shemeNav" >                            
                    <div style="1200px; margin:0 auto">
                        <div style="display: flex;
        align-items: center;
        justify-content: center;">
                            <span style="flex: 1;"><img src="images/scheme.png" alt="" class="backImg" /> </span>
                            <div class="content">
                                <p class="top">安心宿智能管理系统</p>
                                <p class="center">高效的智能经营管理系统,统筹人员信息 随时随地接受订单,操作简单方便。</p>
                                <ul class="bottom">
                                    <li>
                                        <span><img src="images/scheme-01.png" alt=""></span>
                                        <p>用户移动端人脸识别</p>
                                        <p>USER MOBILE FACE RECOGNITION</p>
                                    </li>
                                    <li>
                                        <span><img src="images/scheme-02.png" alt=""></span>
                                        <p>认证成功后上传公安系统</p>
                                            <p> UPLOAD THE PUBLIC SECURITY SYSTEM AFTER THE AUTHENTICATION IS SUCCESSFU</p>
                                    </li>
                                    <li>
                                        <span><img src="images/scheme-03.png" alt=""></span>
                                        <p>自动获取开门权限</p>
                                        <p> AUTOMATIC ACCESS TO OPEN THE DOOR</p>
                                    </li>
                                    <li>
                                            <span><img src="images/scheme-04.png" alt=""></span>
                                            <p>入住流程简单便捷</p>
                                            <p>CHECK-IN PROCESS IS SIMPLE AND CONVENIENT</p>
                                        </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="doorLock " id="partnerNav" > 
                    <img src="images/door-back.jpg" alt="" class="backImg" />  
                    <div class="w_1200">        
                        <div class="content">
                            <p class="top">智能终端门锁</p>
                            <p class="center">贴心的智能管家系统,全面安全守护 , 高效的人像抓拍技术,让入住更安全。</p>
                            <ul class="bottom">
                                <li>
                                    <span><img src="images/doorLock-01.png" alt=""></span>
                                    <p>身份证开门/人脸识别开门</p>
                                    <p>ID OPENS/FACE RECOGNITION OPENS</p>
                                </li>
                                <li>
                                    <span><img src="images/doorLock-02.png" alt=""></span>
                                    <p>门锁摄像头人脸对比</p>
                                    <p> DOOR LOCK CAMERA FACE COMPARISON</p>
                                </li>
                                <li>
                                    <span><img src="images/doorLock-03.png" alt=""></span>
                                    <p>门锁摄像头智能抓拍</p>
                                    <p>DOOR LOCK CAMERA SMART SNAP</p>
                                </li>
                                <li>
                                    <span><img src="images/doorLock-04.png" alt=""></span>
                                    <p>实人实住 防止一人多住</p>
                                    <p>PREVENT ONE PERSON FROM LIVING MORE THAN ONE</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="flow " id="joinUs">
                    <div class="w_1200">  
                        <p>软硬融合<span></span> 多重认证 <span></span>云端监管</p>
                        <p>
                                打造网约房安全监管最强护盾。实现了房源备案+“实名认证”+“实人入住”+“实时上传”+“在线监管” 的全方位治安监管需求,提高了流动人口管控和网约房治安管理效果。相较于传统监管 办法而言,新的管理模式可以实现自动采集住宿人信息并传输至公 安部门。是入住人员信息从被动录入转变成主动录入, 促进科技强警,有效解放警力。
                        </p>
                        <div class="flowImg">
                            <img src="images/flow.png" alt="">
                        </div>
                        <ul class="productBox">
                            <li><img src="images/company-01.png" ></li>
                            <li><img src="images/company-02.png" ></li>
                            <li><img src="images/company-03.png" ></li>
                            <li><img src="images/company-04.png" ></li>               
                        </ul>
                    
                    </div>
                </div> 
                
                <div class="footer">
                    <div class="w_1200" style="height: 290px;">
                        <p class="top">Contact us</p>
                        <p>合作热线:400-019-0611</p>
                        <p><span>公司地址:合肥市滨湖区万达银座B栋47层</span><span style="font-size: 18px; margin-left: 100px;">Copyright © 2017-2018 alilys.com 云创科技 版权所有 Power by DedeCms</span></p>
                    </div>
                </div>   
            
            </div>
       
    </body>
    
    </body>
     
         <script src="js/jquery-3.3.1.min.js"></script>
         <script src="js/flexible_css.js"></script>
        <script src="js/flexible.js"></script>
        <script type="text/javascript">
    
    $(function(){
        var backHeight=$(".product  .backImg").height();
        $(".product ").height(backHeight);
        $(".product  .w_1200").height(backHeight);
        var conHeight= $(".product .content").height();
        $(".product .content").css("padding-top",(backHeight-conHeight)/2);
    
         var backHeight02=$(".scheme .backImg").height();
        $(".scheme ").height(backHeight02);
        $(".scheme .w_1200").height(backHeight02);
        var conHeight02= $(".scheme .content").height();
        $(".scheme .content").css("padding-top",(backHeight02-conHeight02)/2);
    
          var backHeight03=$(".doorLock  .backImg").height();
        $(".doorLock  ").height(backHeight03);
        $(".doorLock  .w_1200").height(backHeight03);
          var conHeight03= $(".doorLock .content").height();
        $(".doorLock .content").css("padding-top",(backHeight03-conHeight03)/2);
    
    })
    
    
    
    window.scrollTo({top:0 })
    
        var nowpage=0;//显示第几块内容
        var juli =0;
       var div_tops = new Array();
       var a=true;
        $(function(){
            var main_div = $('#main >div').length-1;
            for(var i=0;i<main_div;i++){
               div_tops[i] =  $('#main >div').eq(i).offset().top;
            }
            //点击导航
            $('.nav ul li').click(function(event) {
    
    a=false;
                nowpage=$(this).index();           
                if(nowpage<=4){donghua();}
      setTimeout(function  () {
            // body...
            a=true;
          },1000);
    
            });
    
            //页面滚动监听 改变导航
            $(window).scroll(function() {
    if(a){
    
              var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
               div_tops.forEach(function (element, index) {
               if(scrollTop>=element){
                  nowpage = index;
               }
             
               });
                if(nowpage>4){nowpage=4}
                $('.nav ul li').eq(nowpage).addClass('bg').siblings().removeClass('bg');
    
    }
            })
    
        })
        //动画
      function donghua(){
            //获取元素距离顶部的距离
            var top = $('#main >div').eq(nowpage).offset().top;
            window.scrollTo({
              top:top,
              behavior:'smooth'
            })
    
        $('.nav ul li').eq(nowpage).addClass('bg').siblings().removeClass('bg');
        
      }
    
    </script>
    
    </html>
  • 相关阅读:
    spring aop实现过程之三Spring AOP中Aspect编织的实现
    spring aop实现过程之一代理对象的生成
    数据库常用面试题(SQL Server) (转载)
    回溯法解八后问题
    masmplus增加调试工具
    c++ new关键字 详解
    EMU8086 编译器使用简介
    汇编操作显存
    回溯法简介
    汇编链接时 错误:unresolved external symbol _WinMainCRTStartup
  • 原文地址:https://www.cnblogs.com/jinsuo/p/12105764.html
Copyright © 2020-2023  润新知