果木山
果木山

第十二周第一天笔记之fullpage全屏页面滚动实例

fullPage运动的实例

  • 第一屏的制作
    • 思路：
      • 要实现动画效果，就必须给需要运动的元素添加定位布局；
      • 在添加定位布局时，设置top值，要注意页面在最开始就设置了paddingTop为100px，所以需要加上paddingTop的值，还可以将paddingTop修改为marginTop，但是效果就会不好，背景图不会填充margin，会填充padding；
      • 通过分别设置每个运动元素的透明度为0，和transform中的translate值，来进行运动初始值的设置；
      • 怎样才能触发运动，需要给每个运动元素设置一个current的class名，给每个current名下面的每个元素设置一个运动终点值，即透明度为1，translate值为0,0；添加一个过渡transition；
       .current:nth-child(1) .title,.current:nth-child(1) .phone,.current:nth-child(1) .shandow{
     transition: all 1s;
     opacity: 1;
     transform: translate(0,0);
 }
      • 通过添加current的class名来触发过渡运动；
      • 在html中fullpage参数中的afterLoad函数中设置，afterLoad函数中的实参有三个，第二个参数为一个对象，对象中存在属性名index，属性值为每一个屏的索引值；从0开始；
      • 通过获取的索引值，来获取第一个div元素，给其添加class名为current；添加定时器，让运动延迟执行；
      • 当滑到第二屏后，再滑回第一屏时，原来的位置已经存在，所以需要在afterLoad函数一开始就删除所有section中的current的class名；
    • 三步曲：
      1. 先写好跟需求一样的静态页面效果；
      2. 通过opacity和transform把它改变到初始的运动位置；
      3. 当滚动到这屏时，给当前的section添加current的class名，其中current所做的事情，就是利用过渡(transition,animation)动态显示；
    • 代码：
      • css样式代码：
       /*第一屏*/
 .section:nth-child(1){
     background-color: lightslategrey;
     position: relative;
 }
 .section:nth-child(1) .title{
     font-size: 37px;
     margin-top: 50px;
     width: 100%;
     text-align: center;
     color: lightsalmon;
     opacity: 0;
     transform: translateY(50px);
 }
 .section:nth-child(1) .phone{
     background: url("../img/1.png");
     width: 586px;
     height: 212px;
     background-size: cover;
     position: absolute;
     left: 50%;
     margin-left: -293px;
     margin-top: 50px;
     opacity: 0;
     transform: translateY(-100%);
 }
 .section:nth-child(1) .shandow{
     width: 600px;
     height: 50px;
     background-color: lightcoral;
     position: absolute;
     text-align: center;
     line-height: 50px;
     left: 50%;
     bottom: 100px;
     margin-left: -300px;
     font-size: 37px;
     opacity: 0;
     transform: translateX(100px);
 }
 .current:nth-child(1) .title,.current:nth-child(1) .phone,.current:nth-child(1) .shandow{
     transition: all 1s;
     opacity: 1;
     transform: translate(0,0);
 }
 /*第一屏-end*/
      • html样式代码：
       afterLoad: function (anchorLink, sec) {
     //通过index值来设置某一屏
     $(".section").removeClass("current");
     setTimeout(function () {
         $(".section").eq(sec.index).addClass("current");
     },200)
 }
  • 第二屏的制作：
    • 思路：
      1. 静态页面的制作；
      2. 箭头处动效的制作：1）创建两个伪类元素before,after，定位在p元素上；2）对两个伪类元素添加animation运动，创建运动帧move，当0%，100%时，让其透明度为0，缩放为0；当50%时，让其透明度为0.6，缩放为1；当加载后，会实现一个闪烁的效果，为了使效果更加漂亮，让其中一个伪类延迟一段时间运动，此段时间为整个运动总时间的一半，这样两个伪类元素的收缩运动就不同时发生；
       .section:nth-child(2) .phone p::before,.section:nth-child(2) .phone p::after{
     position: absolute;
     width: 25px;
     height: 25px;
     content: "";
     border-radius: 50%;
     background-color: blue;
     top: 0;
     opacity: 0.1;
     animation: move 2s infinite;
 }
 .section:nth-child(2) .phone p::after{
     animation-delay: 1s;
 }
 @-webkit-keyframes move {
     0%,100%{
         transform: scale(0);
         opacity: 0;
     }
     50%{
         transform: scale(1);
         opacity: 0.6;
     }
 }
 .section:nth-child(2) .phone p.pointl::before,.section:nth-child(2) .phone p.pointl::after{
     right: 0;
 }
 .section:nth-child(2) .phone p.point2::before,.section:nth-child(2) .phone p.point3::before,.section:nth-child(2) .phone p.point2::after,.section:nth-child(2) .phone p.point3::after{
     left: 0;
 }
      1. 实现页面的动效运动：添加current的class名，与第一屏一样，在afterLoad函数中已经对每一屏进行添加current的class名，只需在current下操作就行；给每个需要运动的元素，添加运动的初始值，然后在current下添加运动的终点值，也就是静态页面的位置；为了使箭头跟图片不同时出现，则给其添加延迟；
       .current:nth-child(2) .title,.current:nth-child(2) .intro,.current:nth-child(2) .phone,.current:nth-child(2) .phone p.pointl,.current:nth-child(2) .phone p.point2,.current:nth-child(2) .phone p.point3{
     transition: all 2s;
     opacity: 1;
     transform: translate(0,0);
 }
 .current:nth-child(2) .phone p.pointl,.current:nth-child(2) .phone p.point2,.current:nth-child(2) .phone p.point3{
     transition-delay: 2s;
 }
    • 知识点：
      • 页面结构中，设置三个箭头时，通过将图设置为背景色，然后通过paddingLeft值来实现文字与图片位置分开，也可通过设置总宽度，然后通过设置文字的对齐方式，来将文字与背景图分离开；
        • 1）设置总宽度，然后将文字左对齐，背景图右对齐；2）设置宽度后，文字与背景图重合，然后通过padding来将它们分开；
      • 添加运动的思路，给每一个元素设置运动初始值，然后在current下设置运动终点值，即在html中设置当滚到这一屏时，就给其添加current的class名，进而触发运动；
      • 箭头处圆点的闪烁效果，通过animation运动来实现，通过设置伪类元素来进行操作，在通过设置move运动中的不同位置，来达到不同阶段的效果，最重要的是通过延迟时间来实现不同步发生；
      • animation与transition运动延迟时间的运动，通过延迟时间的设置，达到不同步执行的效果；
  • 头部导航栏中的滑动门的制作
    • 思路：
      1. 创建滑块：相对于ul定位
      2. 给li添加鼠标移入事件，移入后让滑块的left值相对应的进行设置；
      3. 给li添加鼠标移出事件，移出后让滑块回到，class名存在active的li的位置；通过each()来遍历$aLi，通过hasClass()来判断是否存在active的class名，然后利用each的第一个参数来获取li的索引值；
      4. 当添加鼠标事件时，要去除掉立即购买的li；
      5. 去掉右侧导航栏中最后一个li,利用JS不能设置，可以利用CSS进行覆盖设置样式；
      6. 点击导航栏中的每个li，跳转到指定的页面，然后让滑块滑动到li下面，文字变为红色，实现三联动的效果，所以需要在afterLoad中设置；
      7. 设置当重新刷新加载后，回到第一屏；通过锚点设置；
    • 知识点：
      • last-child与last-of-type的区别；
        • last-child表示其父元素的最后一个子元素，且这个元素是css指定的元素，才可以生效。
        • last-of-type表示其父元素下的最后一个指定类型的元素。
      • 在排除最后一个li时的代码：var $aLi=$("#myMenu").children("li:not(.lastLi)");
      • 在去掉右侧导航栏中的最后一个li时，利用JS设置，验证后无法获取元素，所以可以利用CSS进行样式覆盖，利用控制台，获取到最后一个li的位置，然后进行覆盖设置；
      • 锚点知识：window对象中存在location属性，属性中存在hash属性，属性值为锚点；所以通过window.location.hash="firstPage";来设置锚点；进而控制页面的跳转；
      /*右侧导航栏-start*/
#fp-nav ul li:last-child, .fp-slidesNav ul li:last-child{
    display: none;
}
#fp-nav ul li .fp-tooltip{
    color: blue;
}
#fp-nav ul li a span, .fp-slidesNav ul li a span{
    background: red;
}
/*右侧导航栏-end*/
    • 注意点：
      • 在添加事件时，要设置padding，不能设置margin，鼠标移入移出之间不针对与margin；会出错；
      • 添加运动，利用jQuery中的animate({},time)；
      • 在afterLoad函数中设置，三联动的时候，一定要排除掉最后一屏；

实例完整版代码

  • html代码： 
     
 
 
     
     fullpage实例
     
     
 
 
 
    
     
     
 
    
 
    
     
    
         
    小米手机 让你的生活更精彩
    
         
    
         
    来啊，飘起来
    
     
    
     
    
         
    全面屏 + 四曲面陶瓷
    手机中的艺术品
    
         
    自小米MIX 发布以来，不仅先后斩获多项国际大奖，更被多家世界级博物馆收藏。
    如此全方位、多领域的高度认可，小米MIX 系列堪称手机中的艺术品。
    
         
    
             
    高清摄像
    
             
    超薄机身
    
             
    大屏显示
    
         
    
     
    
     
    
         
    
             
    优美的设计，更令人着迷
    
             
    自小米MIX 发布以来，不仅先后斩获多项国际大奖，更被多家世界级博物馆收藏。
    如此全方位、多领域的高度认可，小米MIX 系列堪称手机中的艺术品。
    
             
    
                 
    
                     5.7
    英寸大屏
                 
    
                 
    
                     5.7
    英寸大屏
                 
    
                 
    
                     5.7
    英寸大屏
                 
    
                 
    
                     5.7
    英寸大屏
                 
    
             
    
         
    
     
    
     
    
         
    丰富手机型号
    
         
    找到适合你的手机
    
         
    
             
    
                 
                 
    小米手机
    
                 
    16G/32G/64G
    
             
    
             
    
                 
                 
    小米手机
    
                 
    16G/32G/64G
    
             
    
             
    
                 
                 
    小米手机
    
                 
    16G/32G/64G
    
             
    
             
    
                 
                 
    小米手机
    
                 
    16G/32G/64G
    
             
    
         
    
     
    
     
    
         
    美丽的女子
    
         
    找到适合你的好女人
    
         
    
     
    
     
    
         
    
             立即购买
  • css代码： 
     /*重置样式*/
 *{
     margin: 0;
     padding: 0;
     list-style: none;
 }
 body{
     font-size: 14px;
 }
 a{
     text-decoration: none;
     color: #333333;
 }
 /*重置样式end*/
 /*header*/
 header{
     width: 100%;
     height: 80px;
     line-height: 80px;
     position: fixed;
     left: 0;
     top: 0;
     z-index: 99;
     background-color: lavender;
 }
 header .logo{
     margin-left: 10px;
     float: left;
 }
 header .logo img{
     display: inline-block;
     width: 47px;
     height: 47px;
     background-color: orangered;
     vertical-align: middle;
     margin-right: 20px;
 }
 header>ul{
     margin-right: 10px;
     float: right;
     position: relative;
 }
 header>ul>li{
     float: left;
     padding: 0 18px;
 }
 header>ul>li.lastLi{
     padding: 0;
     margin-left: 18px;
 }
 header>ul>li.active a{
     color: red;
 }
 header>ul>li:last-of-type{
     width: 82px;
     height: 34px;
     text-align: center;
     line-height: 34px;
     margin-top: 23px;
     border-radius: 5px;
     background-color: black;
 }
 header>ul>li:last-of-type a{
     color: white;
 }
 header>ul>.huakuai{
     position: absolute;
     top: 66px;
     left: 18px;
     width: 28px;
     height: 6px;
     background-color: red;
 }
 /*header-end*/
 /*右侧导航栏-start*/
 #fp-nav ul li:last-child, .fp-slidesNav ul li:last-child{
     display: none;
 }
 #fp-nav ul li .fp-tooltip{
     color: blue;
 }
 #fp-nav ul li a span, .fp-slidesNav ul li a span{
     background: red;
 }
 /*右侧导航栏-end*/
 
 /*第一屏*/
 .section:nth-child(1){
     background-color: lightslategrey;
     position: relative;
 }
 .section:nth-child(1) .title{
     font-size: 37px;
     margin-top: 50px;
     width: 100%;
     text-align: center;
     color: lightsalmon;
     /*设置初始的运动位置*/
     opacity: 0;
     transform: translateY(50px);
 }
 .section:nth-child(1) .phone{
     background: url("../img/1.png");
     width: 586px;
     height: 212px;
     background-size: cover;
     position: absolute;
     left: 50%;
     margin-left: -293px;
     margin-top: 50px;
     /*设置初始的运动位置*/
     opacity: 0;
     transform: translateY(-100%);
 }
 .section:nth-child(1) .shandow{
     width: 600px;
     height: 50px;
     background-color: lightcoral;
     position: absolute;
     text-align: center;
     line-height: 50px;
     left: 50%;
     bottom: 100px;
     margin-left: -300px;
     font-size: 37px;
     /*设置初始的运动位置*/
     opacity: 0;
     transform: translateX(100px);
 }
 /*通过添加current的class名，来设置运动效果*/
 .current:nth-child(1) .title,.current:nth-child(1) .phone,.current:nth-child(1) .shandow{
     transition: all 1s;
     opacity: 1;
     transform: translate(0,0);
 }
 /*第一屏-end*/
 
 /*第二屏-start*/
 .section:nth-child(2){
     background-color: #f7f7f7;
     position: relative;
 }
 .section:nth-child(2) .title{
     width: 340px;
     height: 96px;
     line-height: 48px;
     font-size: 34px;
     font-weight: 600;
     position: absolute;
     top: 130px;
     left: 50%;
     margin-left: -170px;
     text-align: center;
     /*初始运动位置*/
     opacity: 0;
     transform: translate(0,100%);
 }
 .section:nth-child(2) .intro{
     width: 580px;
     height: 46px;
     line-height: 26px;
     font-size: 16px;
     position: absolute;
     top: 280px;
     left: 50%;
     margin-left: -290px;
     text-align: center;
     opacity: 0;
     /*此时的100%为自身的高度*/
     transform: translate(0,-100%);
 }
 .section:nth-child(2) .phone{
     width:600px;
     height: 372px;
     background: url("../img/infor-2.jpg") no-repeat;
     background-position: center -190px;
     background-size: 200%;
     position: absolute;
     top: 380px;
     left: 50%;
     margin-left: -300px;
     /*设置图片的初始位置*/
     opacity: 0;
     transform: translate(0,100%);
 }
 .section:nth-child(2) .phone p{
     position: absolute;
     width: 110px;
     height: 24px;
     font-size: 18px;
     line-height: 24px;
 }
 /*添加伪类元素*/
 .section:nth-child(2) .phone p::before,.section:nth-child(2) .phone p::after{
     position: absolute;
     width: 25px;
     height: 25px;
     content: "";
     border-radius: 50%;
     background-color: blue;
     top: 0;
     opacity: 0.1;
     animation: move 2s infinite;
 }
 .section:nth-child(2) .phone p::after{
     animation-delay: 1s;
 }
 @-webkit-keyframes move {
     0%,100%{
         transform: scale(0);
         opacity: 0;
     }
     50%{
         transform: scale(1);
         opacity: 0.6;
     }
 }
 .section:nth-child(2) .phone p.pointl::before,.section:nth-child(2) .phone p.pointl::after{
     right: 0;
 }
 .section:nth-child(2) .phone p.point2::before,.section:nth-child(2) .phone p.point3::before,.section:nth-child(2) .phone p.point2::after,.section:nth-child(2) .phone p.point3::after{
     left: 0;
 }
 .section:nth-child(2) .phone p.pointl{
     background: url("../img/jianr.png") no-repeat right center;
     top: 68px;
     left: -48px;
     padding-right: 110px;
     opacity: 0;
     transform: translate(-150px,0);
 }
 .section:nth-child(2) .phone p.point2{
     background: url("../img/jianleft.png") no-repeat left center;
     top: 28px;
     left: 390px;
     padding-left: 150px;
     opacity: 0;
     transform: translate(150px,0);
 }
 .section:nth-child(2) .phone p.point3{
     background: url("../img/jianleft.png") no-repeat left center;
     top: 170px;
     left: 422px;
     padding-left: 150px;
     opacity: 0;
     transform: translate(150px,0);
 }
 /*设置运动效果，添加class名为current*/
 .current:nth-child(2) .title,.current:nth-child(2) .intro,.current:nth-child(2) .phone,.current:nth-child(2) .phone p.pointl,.current:nth-child(2) .phone p.point2,.current:nth-child(2) .phone p.point3{
     transition: all 2s;
     opacity: 1;
     transform: translate(0,0);
 }
 .current:nth-child(2) .phone p.pointl,.current:nth-child(2) .phone p.point2,.current:nth-child(2) .phone p.point3{
     transition-delay: 2s;
 }
 /*第二屏-end*/
 /*第三屏-start*/
 .section:nth-child(3){
     background-color: #c22220;
 }
 .section:nth-child(3) .cont{
     width: 50%;
     height: 200px;
     margin-left: 100px;
     position: relative;
     color: white;
 }
 .section:nth-child(3) .cont .title{
     width: 340px;
     height: 96px;
     line-height: 96px;
     font-size: 30px;
     position: absolute;
     top: 0;
     left: 0;
     text-align: left;
     /*初始运动位置*/
     opacity: 0;
     transform: translate(0,50px);
 }
 .section:nth-child(3) .cont .intro{
     width: 580px;
     height: 46px;
     line-height: 26px;
     font-size: 16px;
     position: absolute;
     top: 100px;
     left: 0;
     text-align: left;
     opacity: 0;
     /*此时的100%为自身的高度*/
     transform: translate(0,-20px);
 }
 .section:nth-child(3) .cont .cont-center{
     width: 240px;
     height: 240px;
     position: absolute;
     top: 240px;
     left: 0;
     opacity: 0;
     transform: scale(0.5);
 }
 .section:nth-child(3) .cont .cont-center > div{
     width: 112px;
     height: 112px;
     padding-top: 24px;
     line-height: 34px;
     border: 1px solid white;
     border-radius: 4px;
     box-sizing: border-box;
     color: white;
     text-align: center;
     float: left;
     margin-bottom: 16px;
     transition: all 1s;
 }
 .section:nth-child(3) .cont .cont-center > div:hover{
     transform: scale(1.1);
 }
 .section:nth-child(3) .cont .cont-center > div:nth-child(2n){
     margin-left: 16px;
 }
 .current:nth-child(3) .cont .title,.current:nth-child(3) .cont .intro,.current:nth-child(3) .cont .cont-center{
     transition: all 1.5s;
     opacity: 1;
     transform: translate(0,0) scale(1);
 }
 /*第三屏-end*/
 
 /*第四屏-start*/
 .section:nth-child(4){
     background-color: lavenderblush;
     position: relative;
 }
 .section:nth-child(4) .title{
     width: 340px;
     height: 96px;
     line-height: 48px;
     font-size: 34px;
     font-weight: 600;
     position: absolute;
     top: 130px;
     left: 50%;
     margin-left: -170px;
     text-align: center;
     /*初始运动位置*/
     opacity: 0;
     transform: translate(0,100%);
 }
 .section:nth-child(4) .intro{
     width: 580px;
     height: 46px;
     line-height: 26px;
     font-size: 16px;
     position: absolute;
     top: 240px;
     left: 50%;
     margin-left: -290px;
     text-align: center;
     opacity: 0;
     /*此时的100%为自身的高度*/
     transform: translate(0,-100%);
 }
 .section:nth-child(4) .stu{
     width: 1000px;
     height: 250px;
     margin: 200px auto 0;
 }
 .section:nth-child(4) .stu .tu1{
     width: 220px;
     height: 300px;
     text-align: center;
     float: left;
     margin-right: 30px;
     opacity: 0;
 }
 .section:nth-child(4) .stu .tu1 h3{
 
 }
 .section:nth-child(4) .stu .tu1 p{
     margin-top: 10px;
     color: blue;
 }
 .current:nth-child(4) .title,.current:nth-child(4) .intro,.current:nth-child(4) .stu .tu1{
     transition: all 1.5s;
     opacity: 1;
     transform: translate(0,0);
 }
 .current:nth-child(4) .stu .tu1:nth-child(2){
     transition-delay: 1s;
 }
 .current:nth-child(4) .stu .tu1:nth-child(3){
     transition-delay: 1.5s;
 }
 .current:nth-child(4) .stu .tu1:nth-child(4){
     transition-delay: 2.0s;
 }
 /*第四屏-end*/
 
 /*第五屏-start*/
 .section:nth-child(5){
     background-color: lightsalmon;
     position: relative;
 }
 .section:nth-child(5) .title{
     width: 340px;
     height: 96px;
     line-height: 48px;
     font-size: 34px;
     font-weight: 600;
     position: absolute;
     top: 130px;
     left: 50%;
     margin-left: -170px;
     text-align: center;
     /*初始运动位置*/
     opacity: 0;
     transform: translate(0,100%);
 }
 .section:nth-child(5) .intro{
     width: 580px;
     height: 46px;
     line-height: 26px;
     font-size: 16px;
     position: absolute;
     top: 240px;
     left: 50%;
     margin-left: -290px;
     text-align: center;
     opacity: 0;
     /*此时的100%为自身的高度*/
     transform: translate(0,-100%);
 }
 .section:nth-child(5) .phone{
     width: 1000px;
     height: 500px;
     background: url("../img/2.jpg");
     background-size: cover;
     position: absolute;
     left: 50%;
     top: 370px;
     margin-left: -500px;
     opacity: 0;
     transform: translate(0,100%);
 }
 .current:nth-child(5) .title,.current:nth-child(5) .intro,.current:nth-child(5) .phone{
     transition: all 1.5s;
     opacity: 1;
     transform: translate(0,0);
 }
 /*第五屏-end*/
 /*第六屏-start*/
 .section:nth-child(6){
 }
 .section:nth-child(6) footer{
     background-color: lightslategray;
     height: 150px;
     text-align: center;
     line-height: 150px;
     font-size: 40px;
     color: orange;
 }
 /*第六屏-end*/

fullPage插件实例复习版

  • 实例知识
    • 回调函数
      • afterLoad: 滚动到某一屏后的回调函数，接收两个参数；
      • onLeave: 在滚动到下一屏之前的回调函数，接收三个参数；
    • 导航栏滑动色块的知识点
      • 页面布局：色块添加绝对定位，导航栏ul为绝对定位，即色块要相对于ul进行定位移动；色块在html中可以放在ul下的第一个li中；
      • 滑块的移动位置获取，可以获取li元素的offsetLeft值；滑动效果，要在滑块中添加过渡transition；
      • 三大事件：mouseover,mouseleave,click
        • 通过事件委托绑定在ul父级元素上，利用冒泡原理，在事件中获取事件源，然后进行一系列的操作；
        • mouseover事件：
          • 事件源为li或a元素；
          • 获取li的offsetLeft值来作为滑块定位的left值；设置属性滑动；
          • 筛除立即购买的li,当滑到其身上时，滑块不设置；
          • 当滑块滑到立即购买的li上时，让滑块回到点亮的位置处，可遍历其的所有兄弟元素，然后哪个存在cur类名，然后设置位置到此处；
        • mouseleave事件：
          • 与mouseout事件的对比：优点在于将ul和其下的所有子元素看成一个整体，只有在移出ul时，才会触发mouseleave事件；
          • 事件触发后，让滑块回到点亮位置处；
          • 注意：当光标移动到立即购买的li时，也不算移出，所以不会触发事件，所以就必须与mouseover事件中的设置对应，当光标移入立即购买的li时，让光标回到点亮处；二者相互照应；
        • click事件：
          • 事件源必须为a元素，因为只有点击a链接时，屏幕才会跳转；
          • 事件触发后，让a元素的父级节点li设置cur类名，其他的li兄弟删除cur类名；
      • 滚动页面时对应的导航栏的滑块滑动和对应的导航点亮
        • 利用onLeave回调函数，获取到下一屏的index值，然后设置对应导航的操作；
    • 知识点：
      • 在排除最后一个li时的代码:var $aLi=$("#myMenu").children("li:not(.lastLi)");
      • 锚点知识：window对象中存在location属性，属性中存在hash属性，属性值为锚点；所以通过window.location.hash="firstPage";来设置锚点；进而控制页面的跳转
  • 代码：
    • html和js代码：
     
 
 
     
     复习fullpage插件实例
     
     
     
     
     
 
 
 
    
     
     
 
    
 
    
     
     
    
         
    小米手机 让你的生活更加精彩
    
         
    
         
    来啊，骚动起来
    
     
    
     
     
    
         
    全面屏+四曲面陶瓷
    手机中的艺术品
    
         
    自小米MIX 发布以来，不仅先后斩获多项国际大奖，更被多家世界级博物馆收藏。
    如此全方位、多领域的高度认可，小米MIX 系列堪称手机中的艺术品。
    
         
    
             高清摄像
             超薄机身
             大屏显示
         
    
     
    
     
     
    
         
    
             
    优美的设计 更加迷人
    
             
    让我们红尘作伴活的潇潇洒洒，策马奔腾共享人世繁华，啊啊啊。
    对酒当歌唱出心中喜悦，风风火火共享人世繁华
    
             
      
                 
    • 
                     
      5.7
      
                     
      英寸大屏
      
                 
      • 
                 
    • 
                     
      6.0 G
      
                     
      运行内存
      
                 
      • 
                 
    • 
                     
      128 G
      
                     
      储存内存
      
                 
      • 
                 
    • 
                     
      12000
      
                     
      拍照像素
      
                 
      • 
             
    
             
    mi9
    
         
    
         
    
             第三屏内的第二分屏
         
    
     
    
     
     
    第四屏
    
     
     
    
         
    果木山的女神
    
         
    唯一不变，清纯可爱
    
         
    ns1
    
     
    
     
     
    
         
    
             立即购买
    • myindex.css代码：
     /*初始化*/
 *{
     margin: 0;
     padding: 0;
     list-style: none;
 }
 /*header区域*/
 header{
     width: 100%;
     height: 80px;
     background-color: lavender;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 2;
     font-size: 14px;
 }
 header .logo{
     width: 160px;
     height: 80px;
     line-height: 80px;
     float: left;
 }
 header .logo a{
     display: inline-block;
     width: 48px;
     height: 48px;
     background: url("./fullimg/mi-logo.png") no-repeat orangered;
     background-size: cover;
     margin: 15px 22px 16px 10px;
     float: left;
 }
 header .logo span{
     display: inline-block;
     line-height: 80px;
     float: left;
 }
 header .myMenu{
     width: auto;
     height: 80px;
     line-height: 80px;
     float: right;
     position: relative;
 }
 header .myMenu li{
     float: left;
 }
 header .myMenu li+li{
     margin-left: 36px;
 }
 header .myMenu li a{
     text-decoration: none;
     color: black;
 }
 header .myMenu li.cur a{
     color: red;
 }
 header .myMenu li.gou{
     height: 32px;
     line-height: 28px;
     margin-right: 10px;
     margin-top: 24px;
     padding: 2px 12px;
     background-color: black;
     box-sizing: border-box;
     border-radius: 6px;
 }
 header .myMenu li.gou a{
     color: white;
 }
 /*滑动门start*/
 header .huamen{
     display: block;
     position: absolute;
     bottom: 8px;
     left: 0;
     width: 28px;
     height: 6px;
     background-color: red;
     transition: all 0.5s;
 }
 /*滑动门end*/
 
 /*屏幕区*/
 .fullpage .section{
 
 }
 /*第一屏*/
 .fullpage .section:nth-child(1){
     font-size: 36px;
     text-align: center;
     position: relative;
 }
 .fullpage .section:nth-child(1) p:nth-of-type(1){
     width:530px;
     height: 70px;
     line-height: 70px;
     color: coral;
     font-weight: 700;
     position: absolute;
     left: 50%;
     margin-left: -265px;
     top: 150px;
     opacity: 0;
     transform: translate(0,100px);
 }
 .fullpage .section:nth-child(1) div{
     width: 590px;
     height: auto;
     position: absolute;
     top: 270px;
     left: 50%;
     margin-left: -295px;
     opacity: 0;
     transform: translate(0,-100px);
 }
 .fullpage .section:nth-child(1) div img{
     display: inline-block;
     width: 100%;
     height: auto;
 }
 .fullpage .section:nth-child(1) p:nth-of-type(2){
     width: 600px;
     height: 50px;
     line-height: 50px;
     color: black;
     background-color: lightcoral;
     position: absolute;
     bottom: 70px;
     left: 50%;
     margin-left: -300px;
     opacity: 0;
     transform: translate(100px,0);
 }
 .fullpage .section:nth-child(1).current p:nth-of-type(1),.fullpage .section:nth-child(1).current p:nth-of-type(2),.fullpage .section:nth-child(1).current div{
     transition: all 1s .2s;
     opacity: 1;
     transform: translate(0,0);
 }
 /*第一屏end*/
 
 /*第二屏start*/
 .fullpage .section:nth-child(2){
     text-align: center;
     position: relative;
 }
 .fullpage .section:nth-child(2) p:nth-of-type(1){
     width: 318px;
     height: 100px;
     line-height: 50px;
     font-weight: 700;
     font-size: 36px;
     position: absolute;
     top: 140px;
     left: 50%;
     margin-left: -165px;
     opacity: 0;
     transform: translate(0,100px);
 }
 .fullpage .section:nth-child(2) p:nth-of-type(2){
     width: 580px;
     height: 52px;
     line-height: 26px;
     position: absolute;
     top: 280px;
     left: 50%;
     margin-left: -287px;
     opacity: 0;
     transform: translate(0,-100px);
 }
 .fullpage .section:nth-child(2) div{
     width: 600px;
     height: 1000px;
     position: absolute;
     top: 380px;
     left: 50%;
     margin-left: -300px;
     background: url("./fullimg/img1/infor-2.jpg") no-repeat;
     background-size: 1300px auto;
     background-position: center -200px;
     opacity: 0;
     transform: translate(0,260px);
 }
 .fullpage .section:nth-child(2) div span{
     width: 224px;
     height: 24px;
     line-height: 24px;
     position: absolute;
     font-size: 18px;
     opacity: 0;
 }
 .fullpage .section:nth-child(2) div span:nth-child(1){
     background: url("fullimg/img1/jianr.png") no-repeat;
     background-position: 116px center;
     text-align: left;
     top: 76px;
     left: -62px;
     transform: translate(-150px,0);
 }
 .fullpage .section:nth-child(2) div span:nth-child(2),.fullpage .section:nth-child(2) div span:nth-child(3){
     background: url("fullimg/img1/jianleft.png") no-repeat;
     background-position: 0 center;
     text-align: right;
     transform: translate(150px,0);
 }
 .fullpage .section:nth-child(2) div span:nth-child(2){
     top: 36px;
     right: -10px;
 }
 .fullpage .section:nth-child(2) div span:nth-child(3){
     top: 168px;
     right: -50px;
 }
 .fullpage .section:nth-child(2) div span::before,.fullpage .section:nth-child(2) div span::after{
     display: block;
     position: absolute;
     top: 0;
     content: "";
     width: 24px;
     height: 24px;
     border-radius: 50%;
     background-color: blue;
     opacity: 0;
     transform: scale(0);
 }
 .fullpage .section:nth-child(2) div span:nth-child(1)::before,.fullpage .section:nth-child(2) div span:nth-child(1)::after{
     right: 0;
 }
 .fullpage .section:nth-child(2) div span:nth-child(2)::before,.fullpage .section:nth-child(2) div span:nth-child(2)::after,.fullpage .section:nth-child(2) div span:nth-child(3)::before,.fullpage .section:nth-child(2) div span:nth-child(3)::after{
     left: 0;
 }
 /*运动帧*/
 @keyframes twinkle{
     0%,100%{
         opacity: 0;
         transform: scale(0);
     }
     50%{
         opacity: 0.6;
         transform: scale(1);
     }
 }
 /*添加current类名后的目标值*/
 .fullpage .section:nth-child(2).current p:nth-of-type(1),.fullpage .section:nth-child(2).current p:nth-of-type(2),.fullpage .section:nth-child(2).current div{
     transition: all 1s .2s;
     opacity: 1;
     transform: translate(0,0);
 }
 .fullpage .section:nth-child(2).current div span{
     transition: all 1s 1.2s;
     opacity: 1;
     transform: translate(0,0);
 }
 .fullpage .section:nth-child(2).current div span::before,.fullpage .section:nth-child(2).current div span::after{
     animation: twinkle 2s 2.2s infinite;
 }
 .fullpage .section:nth-child(2).current div span::after{
     animation-delay: 3.2s;
 }
 /*第二屏end*/
 
 /*第三屏start*/
 .fullpage .section:nth-child(3){
 
 }
 /*第三屏第一分屏*/
 .fullpage .section:nth-child(3) .slide:nth-child(1){
     color: white;
     position: relative;
 }
 .fullpage .section:nth-child(3) .slide:nth-child(1) > p:nth-of-type(1){
     width: 340px;
     height: 40px;
     line-height: 40px;
     font-size: 30px;
     text-align: left;
     position: absolute;
     top: 48px;
     left: 100px;
     opacity: 0;
     transform: translateY(50px);
 }
 .fullpage .section:nth-child(3) .slide:nth-child(1) > p:nth-of-type(2){
     width: 600px;
     height: 50px;
     line-height: 25px;
     text-align: left;
     position: absolute;
     top: 120px;
     left: 100px;
     opacity: 0;
     transform: translateY(-50px);
 }
 .fullpage .section:nth-child(3) .slide:nth-child(1) > ul{
     width: 240px;
     height: 240px;
     font-size: 14px;
     text-align: center;
     position: absolute;
     top: 260px;
     left: 100px;
     opacity: 0;
     transform-origin: center;
     transform: scale(0);
 }
 .fullpage .section:nth-child(3) .slide:nth-child(1) > ul > li{
     width: 112px;
     height: 112px;
     border: 1px solid white;
     box-sizing: border-box;
     float: left;
     border-radius: 4px;
     transition: all 1s;
 }
 .fullpage .section:nth-child(3) .slide:nth-child(1) > ul > li:nth-child(1),.fullpage .section:nth-child(3) .slide:nth-child(1) > ul > li:nth-child(2){
     margin-bottom: 16px;
 }
 .fullpage .section:nth-child(3) .slide:nth-child(1) > ul > li:nth-child(2n){
     margin-left: 16px;
 }
 .fullpage .section:nth-child(3) .slide:nth-child(1) > ul > li > p:nth-child(1){
     margin: 32px auto 14px auto;
 }
 .fullpage .section:nth-child(3) .slide:nth-child(1) > ul > li:hover{
     transform: scale(1.1);
 }
 .fullpage .section:nth-child(3) .slide:nth-child(1) div{
     width: 500px;
     height: 320px;
     position: absolute;
     top: 120px;
     left: 50%;
     opacity: 0;
     transform: translateX(700px);
 }
 .fullpage .section:nth-child(3) .slide:nth-child(1) div img{
     width: 100%;
     height: 100%;
 }
 /*添加类名curent后的终点位置*/
 .fullpage .section:nth-child(3).current .slide:nth-child(1) > p:nth-of-type(1),.fullpage .section:nth-child(3).current .slide:nth-child(1) > p:nth-of-type(2),.fullpage .section:nth-child(3).current .slide:nth-child(1) > ul,.fullpage .section:nth-child(3).current .slide:nth-child(1) > div{
     transition: all 2s;
     opacity: 1;
     transform: scale(1) translate(0,0);
 }
 /*设置左右按钮，覆盖原样式*/
 .fp-controlArrow.fp-prev{
     left: 20px;
     border-width: 40px 30px 40px 0;
     border-color: transparent lightseagreen transparent transparent;
 }
 .fp-controlArrow.fp-next{
     right: 50px;
     border-width: 40px 0 40px 30px;
     border-color: transparent transparent transparent lightseagreen;
 }
 /*第三屏第二分屏*/
 .fullpage .section:nth-child(3) .slide:nth-child(2){
     color: white;
     text-align: center;
     font-size: 30px;
     line-height: 540px;
 }
 /*第三屏end*/
 
 /*第四屏start*/
 .fullpage .section:nth-child(4){
     background: url("./fullimg/2.jpg") no-repeat;
     background-size: cover;
 }
 /*第四屏end*/
 
 /*第五屏start*/
 .fullpage .section:nth-child(5){
     color: black;
     text-align: center;
     position: relative;
     overflow: hidden;
 }
 .fullpage .section:nth-child(5) > p:nth-of-type(1){
     width: 100%;
     height: 34px;
     line-height: 34px;
     position: absolute;
     top: 134px;
     left: 0;
     font-size: 34px;
     font-weight: 700;
     opacity: 0;
     transform: translateY(100px);
 }
 .fullpage .section:nth-child(5) > p:nth-of-type(2){
     width: 100%;
     height: 20px;
     line-height: 20px;
     position: absolute;
     top: 240px;
     left: 0;
     opacity: 0;
     transform: translateY(-50px);
 }
 .fullpage .section:nth-child(5) > div{
     width: 1000px;
     height: 575px;
     position: absolute;
     top: 370px;
     left: 50%;
     margin-left: -500px;
     overflow: hidden;
     opacity: 0;
     transform: translateY(260px);
 }
 .fullpage .section:nth-child(5) > div > img{
     width: 100%;
     height: 100%;
     margin-top: -50px;
 }
 /*添加current类名*/
 .fullpage .section:nth-child(5).current > p:nth-of-type(1),.fullpage .section:nth-child(5).current > p:nth-of-type(2),.fullpage .section:nth-child(5).current > div{
     transition: all 1s;
     opacity: 1;
     transform: translate(0,0);
 }
 /*第五屏end*/
 /*底部区start*/
 .fullpage .fp-auto-height footer{
     width: 100%;
     height: 150px;
     line-height: 150px;
     text-align: center;
     font-size: 40px;
     color: orange;
     background-color: lightslategray;
 }
 /*底部区end*/
 
 /*右侧导航区start*/
 #fp-nav ul li:nth-child(6), .fp-slidesNav ul li:nth-child(6){
     display: none;
 }
 #fp-nav ul li .fp-tooltip{
     color: blue;
 }
 #fp-nav ul li a span, .fp-slidesNav ul li a span{
     background: red;
 }

你可能感兴趣的:(第十二周第一天笔记之fullpage全屏页面滚动实例)

  • 底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说 造命者说
    底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • 10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
    本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
  • 《投行人生》读书笔记 小蘑菇的树洞
    《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
  • 扫地机类清洁产品之直流无刷电机控制 悟空胆好小 清洁服务机器人单片机人工智能
    扫地机类清洁产品之直流无刷电机控制1.1前言扫地机产品有很多的电机控制，滚刷电机1个，边刷电机1-2个，清水泵电机，风机一个，部分中高端产品支持抹布功能，也就是存在抹布盘电机，还有追觅科沃斯石头等边刷抬升电机，滚刷抬升电机等的，这些电机有直流有刷电机，直接无刷电机，步进电机，电磁阀，挪动泵等不同类型。电机的原理，驱动控制方式也不行。接下来一段时间的几个文章会作个专题分析分享。直流有刷电机会自动持续
  • 30天风格练习-DAY2 黄希夷
    Day2（重义）在一个周日/一周的最后一天，我来到位于市中心/市区繁华地带的一家购物中心/商场，中心内人很多/熙熙攘攘。我注意到/看见一个独行/孤身一人的年轻女孩/，留着一头引人注目/长过腰际的头发，上身穿一件暗红色/比正红色更深的衣服/穿在身体上的东西。走下扶梯的时候，她摔倒了/跌向地面，在她正要站起来/让身体离开地面的时候，过长/超过一般人长度的头发被支撑身体/躯干的手掌压/按在下面，她赶紧用
  • 2018-07-23-催眠日作业-#不一样的31天#-66小鹿 小鹿_33
    预言日：人总是在逃避命运的路上，与之不期而遇。心理学上有个著名的名词，叫做自证预言；经济学上也有一个很著名的定律叫做，墨菲定律；在灵修派上，还有一个很著名的法则，叫做吸引力法则。这3个领域的词，虽然看起来不太一样，但是他们都在告诉人们一个现象：你越担心什么，就越有可能会发生什么。同样的道理，你越想得到什么，就应该要积极地去创造什么。无论是自证预言，墨菲定律还是吸引力法则，对人都有正反2个维度的影响
  • 《大清方方案》| 第二话 谁佐清欢
    和珅究竟说了些什么？竟能令堂堂九五之尊龙颜失色！此处暂且按下不表；单说这位乾隆皇帝，果真不愧是康熙从小带过的，一旦决定了要做的事，便杀伐决断毫不含糊。他当即亲自拟旨，着令和珅为钦差大臣，全权负责处理方方事件，并钦赐尚方宝剑，遇急则三品以下官员可先斩后奏。和珅身负皇上重托，岂敢有半点怠慢，当夜即率领相关人等，马不停蹄杀奔江汉。这一路上，和珅的几位幕僚一直在商讨方方事件的处置方案。有位年轻幕僚建议快刀
  • 【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数 广龙宇 一起学Rust#Rust设计模式rust设计模式开发语言
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
  • 《庄子.达生9》 钱江潮369
    【原文】孔子观于吕梁，县水三十仞，流沫四十里，鼋鼍鱼鳖之所不能游也。见一丈夫游之，以为有苦而欲死也，使弟子并流而拯之。数百步而出，被发行歌而游于塘下。孔子从而问焉，曰：“吾以子为鬼，察子则人也。请问，‘蹈水有道乎’”曰：“亡，吾无道。吾始乎故，长乎性，成乎命。与齐俱入，与汩偕出，从水之道而不为私焉。此吾所以蹈之也。”孔子曰：“何谓始乎故，长乎性，成乎命？”曰：“吾生于陵而安于陵，故也；长于水而安于
  • git常用命令笔记 咩酱-小羊 git笔记
    ###用习惯了idea总是不记得git的一些常见命令，需要用到的时候总是担心旁边站了人~~~记个笔记@_@，告诉自己看笔记不丢人初始化初始化一个新的Git仓库gitinit配置配置用户信息gitconfig--globaluser.name"YourName"gitconfig--globaluser.email"[email protected]"基本操作克隆远程仓库gitclone查看
  • 今天我破防了 sin信仰
    今天本来是大年初一，新年的第一天，应该是高高兴兴的一天，但是我怎么也高兴不起来。具体原因很简单，原本计划年后去县城找了一份会计的工作，被公公婆婆否定了，我心里立马就不舒服了，但是当时刚好肚子疼，我去了厕所，等我上完厕所，公公由于喝了酒还在那里和婆婆唠叨个没完。然后我就在心情极度压抑的情况下把午饭吃完的碗筷和锅给刷了。边刷碗筷和锅，边在那里难受，感觉自己在这个家里真的是过的憋屈死了，公婆不让我去上班
  • 下载github patch到本地 小米人er 我的博客gitpatch
    以下是几种从GitHub上下载以.patch结尾的补丁文件的方法：通过浏览器直接下载打开包含该.patch文件的GitHub仓库。在仓库的文件列表中找到对应的.patch文件。点击该文件，浏览器会显示文件的内容，在页面的右上角通常会有一个“Raw”按钮，点击它可以获取原始文件内容。然后在浏览器中使用快捷键（如Ctrl+S或者Command+S）将原始文件保存到本地，选择保存的文件名并确保后缀为.p
  • 509. 斐波那契数(每日一题) lzyprime
    lzyprime博客(github)创建时间：2021.01.04qq及邮箱：2383518170leetcode笔记题目描述斐波那契数，通常用F(n)表示，形成的序列称为斐波那契数列。该数列由0和1开始，后面的每一项数字都是前面两项数字的和。也就是：F(0)=0，F(1)=1F(n)=F(n-1)+F(n-2)，其中n>1给你n，请计算F(n)。示例1：输入：2输出：1解释：F(2)=F(1)+
  • 18-115 一切思考不能有效转化为行动，都TM是扯淡！ 成长时间线
    7月25号写了一篇关于为什么会断更如此严重的反思，然而，之后日更仅仅维持了一周，又出现了这次更严重的现象。从8月2号到昨天8月6号，5天！又是5天没有更文！虽然这次断更时间和上次一样，那为什么说这次更严重？因为上次之后就分析了问题的原因，以及应该如何解决，按理说应该会好转，然而，没过几天严重断更的现象再次出现，想想，经过反思，问题依然没有解决与改变，这让我有些担忧。到底是哪里出了问题，难道我就真的
  • 蘩漪：新女性？利己主义者 赮_红雨
    蘩漪是曹禺《雷雨》笔下的女性形象。对于她的喜爱，曹禺在之前的访谈中，就已经表达得很清楚了，蘩漪是他所倾心的女子的“代替者”。在这个女性身上有着曹禺最精心的描写，但同时她的身上又存在着一些时代的问题。图片发自App首先，繁漪是追求自由和幸福的新女性形象。她是精神悲剧的核心人物，她对周朴园的反抗，具有典型意义。她是位资产阶级家庭出身的小姐，受过五四新思潮的影响，她任性、傲慢，追求人格独立、个性自由和爱
  • 拥有断舍离的心态，过精简生活--《断舍离》读书笔记 爱吃丸子的小樱桃
    不知不觉间房间里的东西越来越多，虽然摆放整齐，但也时常会觉得空间逼仄，令人心生烦闷。抱着断舍离的态度，我开始阅读《断舍离》这本书，希望从书中能找到一些有效的方法，帮助我实现空间、物品上的断舍离。《断舍离》是日本作家山下英子通过自己的经历、思考和实践总结而成的，整体内涵也从刚开始的私人生活哲学的“断舍离”升华成了“人生实践哲学”，接着又成为每个人都能实行的“改变人生的断舍离”，从“哲学”逐渐升华成“
  • 读《人世间》有感 一0一
    这个寒假，就如同朋友圈中的一段话：一闭眼，一睁眼假期还有5天，在一闭眼一睁眼假期还有12天；再一闭眼一睁眼假期还有20天；不敢睡，不敢睡啊……受疫情影响，这个假期变得漫长又煎熬，我也无时无刻不关注着疫情的变化。当然这样的一个假期，我还真得要感谢周翔，因为他有个爱看书的习惯，所以家里有不少他看过的书，可以让我随意挑选，因此也让我的假期不至于那么无所事事。这次我选了一本梁晓声的《人世间》，作为一名语文
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • 运城寻访重逢石头纪实【严建设老照片395 集】 我简直能把你想透， 当我走进运城的时候。 我已急得热汗直流， 访问了十九个老头， 把晋南的小城转了三周。 虽然是悠久的思旧， 我仍然是牛样的执... 严建设
    运城寻访重逢石头纪实【严建设老照片395集】我简直能把你想透，当我走进运城的时候。我已急得热汗直流，访问了十九个老头，把晋南的小城转了三周。虽然是悠久的思旧，我仍然是牛样的执拗。说什么变换的世情，泛起了过去的逝流，你就是真正的故友。踏破铁鞋的淡愁，已化为不废功夫的范畴，是就像远在天涯近在咫尺，就像是梦乡的邂逅，我紧紧地攥着你的手。你已长成了高高的个头，俊逸的容颜却很清瘦，你那样顽皮的童音，已变到老
  • 高端密码学院笔记285 柚子_b4b4
    高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要
  • 2020-04-12每天三百字之连接与替代 冷眼看潮
    不知道是不是好为人师，有时候还真想和别人分享一下我对某些现象的看法或者解释。人类社会不断发展进步的过程，就是不断连接与替代的过程。人类发现了火并应用火以后，告别了茹毛饮血的野兽般的原始生活（火烧、烹饪替代了生食）人类用石器代替了完全手工，工具的使用使人类进步一大步。类似这样的替代还有很多，随着科技的发展，有更多的原始的事物被替代，代之以更高效、更先进的技术。在近现代，汽车替代了马车，高速公路和铁路
  • 东南林氏之九牧林候选父系 祖缘树TheYtree
    渊源介绍东晋初年晋安林始祖林禄公入闽，传十世隋右丞林茂，由晋安迁居莆田北螺村。又五世而至林万宠，唐开元间任高平太守，生三子：韬、披、昌。韬公之孙攒，唐德宗立双阙以旌表其孝，时号"阙下林家"。昌公字茂吉，乃万宠公第三子，官兵部司马，配宋氏，生一子名萍。萍于唐贞元间明经及第，官沣洲司马(后追赠中宪大夫)。唐太和年间归隐后，迁居仙游游洋，世称“游洋林”；其后裔居游洋后迁移漳州漳浦路下，由路下林第四房平和
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • Day17笔记-高阶函数 ~在杰难逃~ Python笔记python开发语言pycharm数据分析
    高阶函数【重点掌握】函数的本质：函数是一个变量，函数名是一个变量名，一个函数可以作为另一个函数的参数或返回值使用如果A函数作为B函数的参数，B函数调用完成之后，会得到一个结果，则B函数被称为高阶函数常用的高阶函数：map(),reduce(),filter(),sorted()1.map()map(func,iterable)，返回值是一个iterator【容器，迭代器】func:函数iterab
  • Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Pythonpython开发语言大数据数据分析数据挖掘
    大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
  • 大伟说成语之唉声叹气 求索大伟
    ＊大伟说成语＊【唉声叹气】叹气：因心里不痛快或不如意而吐出长气，发出声音。因为痛苦、憋闷或感伤而发出叹息的声音。【大伟说】情绪外露，非人类所特有，动物亦有情绪，悲哀和欢乐所表示的情绪亦是不一样的，会嗷嗷大叫也会低吟痛哭。不同的是，人类的情绪更复杂，更多样，更丰富。唉声叹气，可以说是最基础的情绪，因为无奈而举足无措，不知该如何如何化解，只有独自一人慢慢承受，长吁短叹不知如何是好，其实是无能无力的表现
  • libyuv之linux编译 jaronho Linuxlinux运维服务器
    文章目录一、下载源码二、编译源码三、注意事项1、银河麒麟系统（aarch64）（1）解决armv8-a+dotprod+i8mm指令集支持问题（2）解决armv9-a+sve2指令集支持问题一、下载源码到GitHub网站下载https://github.com/lemenkov/libyuv源码，或者用直接用git克隆到本地，如：gitclonehttps://github.com/lemenko
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • Nginx负载均衡 510888780 nginx应用服务器
    Nginx负载均衡一些基础知识: nginx 的 upstream目前支持 4 种方式的分配 1)、轮询（默认）       每个请求按时间顺序逐一分配到不同的后端服务器，如果后端服务器down掉，能自动剔除。 2)、weight       指定轮询几率，weight和访问比率成正比
  • RedHat 6.4 安装 rabbitmq bylijinnan erlangrabbitmqredhat
    在 linux 下安装软件就是折腾，首先是测试机不能上外网要找运维开通，开通后发现测试机的 yum 不能使用于是又要配置 yum 源，最后安装 rabbitmq 时也尝试了两种方法最后才安装成功 机器版本： [root@redhat1 rabbitmq]# lsb_release LSB Version: :base-4.0-amd64:base-4.0-noarch:core
  • FilenameUtils工具类 eksliang FilenameUtilscommon-io
    转载请出自出处：http://eksliang.iteye.com/blog/2217081 一、概述 这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。
  • xml文件解析SAX 不懂事的小屁孩 xml
    xml文件解析:xml文件解析有四种方式， 1.DOM生成和解析XML文档(SAX是基于事件流的解析) 2.SAX生成和解析XML文档(基于XML文档树结构的解析) 3.DOM4J生成和解析XML文档 4.JDOM生成和解析XML 本文章用第一种方法进行解析，使用android常用的DefaultHandler import org.xml.sax.Attributes;
  • 通过定时任务执行mysql的定期删除和新建分区，此处是按日分区 酷的飞上天空 mysql
    使用python脚本作为命令脚本，linux的定时任务来每天定时执行 #!/usr/bin/python # -*- coding: utf8 -*- import pymysql import datetime import calendar #要分区的表 table_name = 'my_table' #连接数据库的信息 host,user,passwd,db =
  • 如何搭建数据湖架构？听听专家的意见 蓝儿唯美 架构
    Edo Interactive在几年前遇到一个大问题：公司使用交易数据来帮助零售商和餐馆进行个性化促销，但其数据仓库没有足够时间去处理所有的信用卡和借记卡交易数据  “我们要花费27小时来处理每日的数据量，”Edo主管基础设施和信息系统的高级副总裁Tim Garnto说道：“所以在2013年，我们放弃了现有的基于PostgreSQL的关系型数据库系统，使用了Hadoop集群作为公司的数
  • spring学习——控制反转与依赖注入 a-john spring
           控制反转（Inversion of Control，英文缩写为IoC）是一个重要的面向对象编程的法则来削减计算机程序的耦合问题，也是轻量级的Spring框架的核心。 控制反转一般分为两种类型，依赖注入（Dependency Injection，简称DI）和依赖查找（Dependency Lookup）。依赖注入应用比较广泛。  
  • 用spool+unixshell生成文本文件的方法 aijuans xshell
    例如我们把scott.dept表生成文本文件的语句写成dept.sql,内容如下: 　　set pages 50000; 　　set lines 200; 　　set trims on; 　　set heading off; 　　spool /oracle_backup/log/test/dept.lst; 　　select deptno||','||dname||','||loc
  • 1、基础--名词解析(OOA/OOD/OOP) asia007 学习基础知识
    OOA:Object-Oriented Analysis（面向对象分析方法） 是在一个系统的开发过程中进行了系统业务调查以后，按照面向对象的思想来分析问题。OOA与结构化分析有较大的区别。OOA所强调的是在系统调查资料的基础上，针对OO方法所需要的素材进行的归类分析和整理，而不是对管理业务现状和方法的分析。 　　OOA（面向对象的分析）模型由5个层次（主题层、对象类层、结构层、属性层和服务层）
  • 浅谈java转成json编码格式技术 百合不是茶 json编码java转成json编码
    json编码;是一个轻量级的数据存储和传输的语言       在java中需要引入json相关的包,引包方式在工程的lib下就可以了   JSON与JAVA数据的转换（JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非   常适合于服务器与 JavaScript 之间的数据的交
  • web.xml之Spring配置(基于Spring+Struts+Ibatis) bijian1013 javaweb.xmlSSIspring配置
    指定Spring配置文件位置 <context-param> <param-name>contextConfigLocation</param-name> <param-value> /WEB-INF/spring-dao-bean.xml,/WEB-INF/spring-resources.xml, /WEB-INF/
  • Installing SonarQube（Fail to download libraries from server） sunjing InstallSonar
    1.  Download and unzip the SonarQube distribution 2.  Starting the Web Server The default port is "9000" and the context path is "/". These values can be changed in &l
  • 【MongoDB学习笔记十一】Mongo副本集基本的增删查 bit1129 mongodb
    一、创建复本集   假设mongod,mongo已经配置在系统路径变量上，启动三个命令行窗口，分别执行如下命令：   mongod --port 27017 --dbpath data1 --replSet rs0 mongod --port 27018 --dbpath data2 --replSet rs0 mongod --port 27019 -
  • Anychart图表系列二之执行Flash和HTML5渲染 白糖_ Flash
    今天介绍Anychart的Flash和HTML5渲染功能   HTML5 Anychart从6.0第一个版本起，已经逐渐开始支持各种图的HTML5渲染效果了，也就是说即使你没有安装Flash插件，只要浏览器支持HTML5，也能看到Anychart的图形（不过这些是需要做一些配置的）。 这里要提醒下大家，Anychart6.0版本对HTML5的支持还不算很成熟，目前还处于
  • Laravel版本更新异常4.2.8-> 4.2.9 Declaration of ... CompilerEngine ... should be compa bozch laravel
    昨天在为了把laravel升级到最新的版本，突然之间就出现了如下错误： ErrorException thrown with message "Declaration of Illuminate\View\Engines\CompilerEngine::handleViewException() should be compatible with Illuminate\View\Eng
  • 编程之美-NIM游戏分析-石头总数为奇数时如何保证先动手者必胜 bylijinnan 编程之美
    import java.util.Arrays; import java.util.Random; public class Nim { /**编程之美 NIM游戏分析 问题： 有N块石头和两个玩家A和B，玩家A先将石头随机分成若干堆，然后按照BABA...的顺序不断轮流取石头， 能将剩下的石头一次取光的玩家获胜，每次取石头时，每个玩家只能从若干堆石头中任选一堆，
  • lunce创建索引及简单查询 chengxuyuancsdn 查询创建索引lunce
    import java.io.File; import java.io.IOException; import org.apache.lucene.analysis.Analyzer; import org.apache.lucene.analysis.standard.StandardAnalyzer; import org.apache.lucene.document.Docume
  • [IT与投资]坚持独立自主的研究核心技术 comsci it
           和别人合作开发某项产品....如果互相之间的技术水平不同,那么这种合作很难进行,一般都会成为强者控制弱者的方法和手段.....        所以弱者,在遇到技术难题的时候,最好不要一开始就去寻求强者的帮助,因为在我们这颗星球上,生物都有一种控制其
  • flashback transaction闪回事务查询 daizj oraclesql闪回事务
       闪回事务查询有别于闪回查询的特点有以下3个： （1）其正常工作不但需要利用撤销数据，还需要事先启用最小补充日志。 （2）返回的结果不是以前的“旧”数据，而是能够将当前数据修改为以前的样子的撤销SQL（Undo SQL）语句。 （3）集中地在名为flashback_transaction_query表上查询，而不是在各个表上通过“as of”或“vers
  • Java I/O之FilenameFilter类列举出指定路径下某个扩展名的文件 游其是你 FilenameFilter
    这是一个FilenameFilter类用法的例子，实现的列举出“c:\\folder“路径下所有以“.jpg”扩展名的文件。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
  • C语言学习五函数，函数的前置声明以及如何在软件开发中合理的设计函数来解决实际问题 dcj3sjt126com c
    # include <stdio.h> int f(void) //括号中的void表示该函数不能接受数据，int表示返回的类型为int类型 { return 10; //向主调函数返回10 } void g(void) //函数名前面的void表示该函数没有返回值 { //return 10; //error 与第8行行首的void相矛盾 } in
  • 今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Pl dcj3sjt126com centos
    今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again   处理很简单，修改文件“/etc/yum.repos.d/epel.repo”， 将baseurl的注释取消， mirrorlist注释掉。即可。 &n
  • 单例模式 shuizhaosi888 单例模式
    单例模式      懒汉式 public class RunMain { /** * 私有构造 */ private RunMain() { } /** * 内部类，用于占位，只有 */ private static class SingletonRunMain { priv
  • Spring Security（09）——Filter 234390216 Spring Security
    Filter 目录 1.1     Filter顺序 1.2     添加Filter到FilterChain 1.3     DelegatingFilterProxy 1.4     FilterChainProxy 1.5
  • 公司项目NODEJS实践0.1 逐行分析JS源代码 mongodbnginxubuntunodejs
      一、前言         前端如何独立用nodeJs实现一个简单的注册、登录功能，是不是只用nodejs+sql就可以了？其实是可以实现，但离实际应用还有距离，那要怎么做才是实际可用的。         网上有很多nod
  • java.lang.Math liuhaibo_ljf javaMathlang
    System.out.println(Math.PI); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1)); System.out.println(Math.abs(111111111)); System.out.println(Mat
  • linux下时间同步 nonobaba ntp
    今天在linux下做hbase集群的时候，发现hmaster启动成功了，但是用hbase命令进入shell的时候报了一个错误  PleaseHoldException: Master is initializing，查看了日志，大致意思是说master和slave时间不同步，没办法，只好找一种手动同步一下，后来发现一共部署了10来台机器，手动同步偏差又比较大，所以还是从网上找现成的解决方
  • ZooKeeper3.4.6的集群部署 roadrunners zookeeper集群部署
    ZooKeeper是Apache的一个开源项目，在分布式服务中应用比较广泛。它主要用来解决分布式应用中经常遇到的一些数据管理问题，如：统一命名服务、状态同步、集群管理、配置文件管理、同步锁、队列等。这里主要讲集群中ZooKeeper的部署。   1、准备工作 我们准备3台机器做ZooKeeper集群，分别在3台机器上创建ZooKeeper需要的目录。   数据存储目录
  • Java高效读取大文件 tomcat_oracle java
    　　读取文件行的标准方式是在内存中读取，Guava 和Apache Commons IO都提供了如下所示快速读取文件行的方法： 　　Files.readLines(new File(path), Charsets.UTF_8); 　　FileUtils.readLines(new File(path)); 　　这种方法带来的问题是文件的所有行都被存放在内存中，当文件足够大时很快就会导致
  • 微信支付api返回的xml转换为Map的方法 xu3508620 xmlmap微信api
    举例如下： <xml>    <return_code><![CDATA[SUCCESS]]></return_code>    <return_msg><![CDATA[OK]]></return_msg>    <appid><
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他