【魅族Pro7】——BootStrap/JQuery/Canvas/PHP/MySQL/Ajax爬坑之项目总结(一)

–>

前言:这个项目是我们小组团体合作完成的学习项目,项目使用魅族GUI设计和图片素材,响应式重构Pro7官网的首页、子页、商城及购物车,并加入一些创新。我主要负责的是【画屏子页】的项目,这里作为温故知新,把整个项目的重难点特色做一个整理。


一、首页index

 

 

【魅族Pro7】——BootStrap/JQuery/Canvas/PHP/MySQL/Ajax爬坑之项目总结(一)

 

网页加载后才出现的效果是给window绑定onscroll事件,根据滚动条到页面顶部不同的角度设置透明度,以及其他属性,慢慢过渡。

$( ()=>{
    $(window).scroll(()=>{
            var scrollTop=document.body.scrollTop;
            var offsettop1=$(".five").offset().top;
     if(innerHeight/2+scrollTop>=offsettop1){
          $("#five-1").css({float:"left",width:"26%",left:"10%",top:"10%",transform:"rotate(0deg)"});
     }
    });
});

 

二、概述Summary

 

 

【魅族Pro7】——BootStrap/JQuery/Canvas/PHP/MySQL/Ajax爬坑之项目总结(一)

 

1、给二十多张图片设置过渡效果。

  • 刚开始时透明度为0,后变为1,而图片是相继出现是因为为图片设置了延迟时间
  • 最后出现的手机图片是通过过渡缩小图片的宽度,定位在顶部和左边的位置,以及旋转的角度。
 <!--section-->
    <section>
        <div id="mw-1">
            <img src=" img/fAC875G3xtpLmNkPhdSTcVbXrYaW64e1.jpg" alt=""class="mw-f0" />
            <!--第一个过度-->
            <img src="img/mw1.jpg" class="mw-f11" alt="" />
            <img src="img/mw2.jpg" class="mw-f12" alt="" />
            <img src="img/mw3.jpg" class="mw-f13" alt="" />
            <img src="img/mw4.jpg" class="mw-f14" alt="" />
            <img src="img/f98D7F6H5J3L2NzwQRSTUsrpoZanmdkB.jpg" alt="" class="mw-f1"/>
            <!--第二个过度-->
            <img src="img/mw5.jpg" class="mw-f21" alt="" />
            <img src="img/mw6.jpg" class="mw-f22" alt="" />
            <img src="img/mw7.jpg" class="mw-f23" alt="" />
            <img src="img/mw8.jpg" class="mw-f24" alt="" />
            <img src="img/fACDEF6H4J21MN0PzxwtUVWXqonlckig.jpg" alt="" class="mw-f2"/>
            <!--第三个过度-->
            <img src="img/mw9.jpg" class="mw-f31" alt="" />
            <img src="img/mw10.jpg" class="mw-f32" alt="" />
            <img src="img/mw11.jpg" class="mw-f33" alt="" />
            <img src="img/mw12.jpg" class="mw-f34" alt="" />
            <img src="img/mw13.jpg" class="mw-f35" alt="" />
            <img src="img/mw14.jpg" class="mw-f36" alt="" />
            <img src="img/mw15.jpg" class="mw-f37" alt="" />
            <img src="img/mw16.jpg" class="mw-f38" alt="" />
            <img src="img/mw17.jpg" class="mw-f39" alt="" />
            <img src="img/fAC76FG4I10LMzyxvRtpoVnmlkibScEH.jpg" alt="" class="mw-f3"/>
            <!--第四个过度-->
            <img src="img/section-bg-1_e7c904e-1.jpg" alt="" class="mw-n0"/>
            <img src="img/phone-2_5e09475.png" alt="" class="mw-n1"/>
            <img src="img/phone-1_d6080e5.png" alt="" class="mw-n2"/>
            <div class="mw-n3">
                <h1>PRO <span>7</span></h1>
                <h1>双瞳如小窗</h1>
                <h1>佳景观历历</h1>
            </div>
        </div>
        <!--手机上浮-->
        <div id="mw-2">
            <img src="img/phone-3_6e3efd0.png" alt=""/>
        </div>

 

2、会飞的鸟

  • 给div设置背景图,刚开始定位在第一只鸟的位置;
  • 后先更改x的值,使背景从左到右切换
  • 到最右后,更改y的值,跳到第二行
  • 直到最后,将x,y切到第一个图位置
  • 绑定的定时器是80ms
/*bird*/
var a=138;
var b=308;
var task=function(){
    if(a<=2622) {
        a+=138;
    }
    else if(a>2622&&b<=2156){
        a=138;
        b+=308;
    }
    else {
        a=138;
        b=308;
    }
    $("#mw-bird").css({
        'background':`url(img/bird-animate_cd8495f.jpg)  ${a}px ${b}px`
    });
};
var timer=setInterval(task,80);

 

3、设置渐变色动画

  • 1%时为透明,10%时换#0b0b0b色,100%也换#0b0b0b色
  • 鼠标移入时,颜色切换,同时放大1倍
section #mw-7 .mw-img2 .s1_cover {
  position: absolute;
  width: 129%;
  height: 200%;
  top: -48%;
  left: -15%;
  background: radial-gradient(transparent 1%, #060606 10%, #060606 100%);
  transform: scale(1);
}
section #mw-7 .mw-img2 .s_cover {
  animation: s1_cover 3s linear 1.5s forwards;
}
@keyframes s1_cover {
  0% {
    background: radial-gradient(transparent 1%, #060606 10%, #060606 100%);
    transform: scale(1);
  }
  25% {
    background: radial-gradient(transparent 2%, #060606 10%, #060606 100%);
    transform: scale(2);
  }
  50% {
    background: radial-gradient(transparent 3%, #060606 10%, #060606 100%);
    transform: scale(3);
  }
  75% {
    background: radial-gradient(transparent 4%, #060606 10%, #060606 100%);
    transform: scale(4);
  }
  100% {
    background: radial-gradient(transparent 5%, #060606 10%, #060606 100%);
    transform: scale(5);
  }
}

 

4、温度对比图–三张图叠加,透明度横向过渡渐显模拟展开效果

  • 第一张图,过渡效果,宽度从0→100%
  • 第二张图,同理,只不过等第一张图加载完再开始加载
  • 第三张图,是渐变色,开始透明度为0,后过渡为1

 

 <!--PRO 7 Plus 快充温度对比图-->
        <div id="mw-9">
            <div>
                <h4>PRO 7 Plus 快充温度对比图</h4>
            </div>
            <div class="mw-pro">
                <div class="mw-p1"></div>
                <div class="mw-p2"></div>
                <div class="mw-p3"></div>
            </div>
</div>
section #mw-9 .mw-pro .mw-p1 {
  position: absolute;
  height: 100%;
  top: 21%;
  left: 6%;
  width: 0;
  transition: width 2s linear;
  background: url("../img/pro6plus-line_adf47d9.png") no-repeat;
}
section #mw-9 .mw-pro .mw-p2 {
  position: absolute;
  height: 100%;
  top: 28%;
  left: 6%;
  width: 0;
  transition: width 2s linear 2s;
  background: url("../img/pro7-line_5028809.png") no-repeat;
}
section #mw-9 .mw-pro .mw-p3 {
  position: absolute;
  z-index: 1000;
  height: 100%;
  width: 100%;
  top: 19%;
  left: 6%;
  opacity: 0;
  transition: opacity 2s linear 4s;
  background: url("../img/mCharge_9c82c4c.png") no-repeat;
}

 

5、了解-模态框

  • 开始给div加一个a的子元素,设置背景图、定位、宽高、透明度为0
  • 当鼠标移入onmouseenter时,背景图的透明度为0.1,top定位上移,图片的高度也变大,再设置了整个页面的模态框
/*了解模态框*/
(function(){
    var mw11=document.getElementById("mw-11");
    var backDrop=document.getElementById("shadow");
    mw11.onmouseenter=function(){
        backDrop.className="modalShadow";
    };
    mw11.onmouseleave=function(){
        backDrop.className="";
    };
})();

 

三、画屏huaping

 

 

 

【魅族Pro7】——BootStrap/JQuery/Canvas/PHP/MySQL/Ajax爬坑之项目总结(一)

 

1、漂动的水母

  • @keyframe声明动画,在0%时,图片定在背景图的第一帧位置处(-15px,0),在100%时定在最后一帧的位置处(-12282px,0)
  • 使用steps(87)函数实现关键帧动画,87代表背景图一共有87个帧,没一次动画移动87帧(步),设置8s,一次动画时长8s,无限制的移动
@keyframes playshuimu{
    0%{
        background-position: -15px 0px;
    }
    100%{
        background-position:-12282px 0px ;
    }
}
.hp_body .hp_bz .hp_img .hp_shuimu{
    background: url(../images/hp_shuimu.jpg) no-repeat;
    transform: scale(0.9);
    width:10%;
    height:48%;
    overflow: hidden;
    left:34%;
    margin-top: 27%;
    z-index: 999;
    position: absolute;
    animation:playshuimu 8s steps(87) infinite;
}

 

2、点击翻牌效果

  • transform-style: preserve-3d将转换设置为3D类型
  • 叠加两层图片,上层img1是点击之前的,下层img2是点击之后的,设置backface-visibility: hidden使转换到后面的图片显示属性为隐藏
  • transform: rotateY(180deg) scale(1.26)   将img2沿y轴旋转180度,转到前面来,显示同时放大,img1同理旋转-180度,转到后面,同时隐藏
.hp_body .hp_tz .hp_tz_list li .img2{
    position:absolute;
    top:-50%;
    z-index: -1;
    transform: rotateY(180deg) scale(1.26);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: all .4s ease-in-out;
}
.hp_body .hp_tz .hp_tz_list li .img1{
    position:relative;
    transform: rotateX(0deg) rotateY(0deg) scale(1);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: all .4s ease-in-out;
}
.hp_body .hp_tz .hp_tz_list li:hover .img1{
    transform: rotateY(-180deg);
}
.hp_body .hp_tz .hp_tz_list li:hover .img2{
    transform: rotateX(0deg) rotateY(0deg)
    position:absolute;
}

 


 版权声明:本文原创,非本人允许不得转载

原文链接:http://www.cnblogs.com/ljq66/p/7923518.html
本文来源 互联网收集,文章内容系作者个人观点,不代表 本站 对观点赞同或支持。如需转载,请注明文章来源,如您发现有涉嫌抄袭侵权的内容,请联系本站核实处理。

© 版权声明

相关文章