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

github项目地址:https://github.com/66Web/ljq_meizuPro7_team,欢迎Star。


首页 概述 画屏
一、首页index

网页加载后才出现的效果是给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

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:;
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:;
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:;
height: 100%;
width: 100%;
top: 19%;
left: 6%;
opacity:;
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

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:;
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;
}

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

最新文章

  1. 原: 安装VMtools过程流水帐
  2. JAVA安装过程中出现的“javac不是内部或外部指令”的解决方法
  3. Atitit 设计模式的本质思考】
  4. NPOI导出Excel(含有超过65335的处理情况)
  5. 4 Handler相关类——Live555源码阅读(一)基本组件类
  6. Music Review
  7. JS 計算文本域還能輸入多少個字符
  8. Fibonacci Again
  9. ThinkPHP讲解(五)——数据库配置及Model数据模型层、查询
  10. ckeditor中“浏览服务器”的后台操作
  11. 【Java】SHA加密
  12. JS的第一节课
  13. POJ 2762 Going from u to v or from v to u?(强联通 + TopSort)
  14. asp.net权限认证篇外:集成域账号登录
  15. 借助 frp 随时随地访问自己的树莓派
  16. python dataframe数据条件筛选
  17. 切换npm源地址
  18. cobbler批量安装操作
  19. Perl包相关
  20. golang sort包使用

热门文章

  1. win10 UWP 九幽数据分析
  2. 原生JS实现淘宝无缝轮播
  3. eval函数的用法
  4. MySQL数据库主从复制实践
  5. 在windows下,将mysql离线数据文件导入本地mysql数据库
  6. 机器学习之二:K-近邻(KNN)算法
  7. 刘强1109 JavaScript基础二(分支与循环结构)
  8. 0_Simple__cppOverload
  9. 解决打开MATLAB时出现“Waring:could not read file classpath.txt”,等问题
  10. 蓝桥杯-算法训练--ALGO-6 安慰奶牛