超精美页面布局（页面布局与动画原理）

文献种类：项目研发技术文献；

《华为官网——“客户端页面”模块》项目研发阶段性总结

作者：陈荣基 (图片均属借鉴只有代码原创)
本次任务完成时间：2019年1月16日～2019年1月17日
开发工具与关键技术：DW html+css3+JavaScript
完成模块功能：页面静态与动态布局

静态效果图

一、静态布局 html与css3

1.html源代码截图

2.css3代码截图

二、动态布局 JavaScript

1.JS代码截图

2. 动态布局实现的效果有自动隐现和点击移动式图片切换

1. 自动隐现图片切换的原理：通过JavaScript的代码来控制样式透明度（opcity）的值在0和1之间转换来实现隐现效果 通过改变外层盒子的定位来实现切换图片的效果
再通过动画样式（transition）来控制opcity转换完成的时间来实现隐现的效果
如下封装的函数代码（ss是将opcity的值转换为1；yy是将opcity的值转换为0）：
function ss(){
var screen=document.getElementsByClassName(“screen”);
for(var i=0; i<screen.length;i++){
screen[i].style.opacity=“1”;
screen[i].style.transition=“opacity 2s ease-in-out”;
}
}
function yy(){
if(aa){
return;
}
var screen=document.getElementsByClassName(“screen”);
for(var i=0; i<screen.length;i++){
screen[i].style.opacity=“0”;
screen[i].style.transition=“opacity 2s ease-in-out”;
}
}
注意：想要实现这个效果必须先调用yy函数再调用ss函数意思就是要先把透明度变为0使图片隐藏再把透明度变为1再简单点就是只有隐藏了显示效果才有作用
自动效果必须要用到间隔性计时器（setInterval）写法：【setIterval（需要执行的函数，间隔时间）】
列如：cc=setInterval(yy,2000);cc是给计时器命的名 方便单独清除计时器 clearInterval（cc）
还有if（aa）{return；}这串代码的作用是用来修复一些运算代码出现的bug也就是让代码进行逻辑判断true or false if是false就返回（return） 使用这代码前必须先声明变量 var aa=false；

2. 点击移动式切换图片原理：通过JavaScript的代码改变外层盒子定位来实现的，同时要想有移动式的切换效果就必须一点一点地改变定的位置
如下封装的函数代码：
function lunbo(offset){
aa=true;
var time=300;
var interval=10;
var newleft=parseInt(tpbox.style.left)+offset;
var speed=newleft/(time/interval);
function go(){
if(speed<0&&newleft<parseInt(tpbox.style.left)||speed>0&&newleft>parseInt(tpbox.style.left)){
tpbox.style.left=parseInt(tpbox.style.left)+speed+“px”;
setTimeout(go,interval);
}
else{
tpbox.style.left=newleft+“px”;
if(newleft<-width5){
tpbox.style.left=-width+“px”;
}
if(newleft>-width){
tpbox.style.left=-width5+“px”;
}
aa=false;
}
}
go();
}
注意：由于每个浏览器的宽度不同要想每个浏览器都按整个浏览器的宽度来实现图片切换就要用到可视宽度。可视宽度是你在浏览器可以看到的宽度，将可视宽度设为定位的偏移量这样就可以按整个浏览器的宽度来实现图片切换了同时将图片的宽度设置为可视宽度整体看上去实现的动画效果就完美了不然将图片设置为像素单位的话在不同的浏览器当中就不能完美的切换图片 （你可以去试一下效果）
width=window.innerWidth;（声明可视宽度）
图片可视宽度设置的JavaScript代码如下封装函数：
function screen(){
width=window.innerWidth;
var screen=document.getElementsByClassName(“screen”);
for(var i=0; i<screen.length;i++){
screen[i].style.width=width+“px”;
}
}
最后注意：每个封装函数都要给它添加事件才能触发。

静态样式布局常见问题

1.样式效果不显示列如display border等（出现这种情况可能是没设置宽高）
2.在设置定位（position）之后多余隐藏（overflow）没有效果（原因是用了定位的元素已经脱离了原来的外层盒子所以给原来的外层盒子设overflow没效果）
这种情况多出现于设置图片轮播切换
解决的方法有：1.在相对定位的盒子设overflow
2.把原来的外层盒子设置成相对定位的盒子再设overflow
3.设置页面文本对齐（相信大家在布局时都面对过让文本对齐的情况也有多种解决方法我也给大家介绍一种吧）
实现的原理：由于块级元素是各占一行的可以通过块级元素的嵌套实现
如下代码：
<标签 style=“width:100px;height:100px; text-align: left;”> text-align: left;(文本左对齐)
<标签>中山大学</标签> text-align: center;（文本居中对齐）
<标签>北京大学</标签> text-align:right;（文本右对齐）
<标签>华南理工大学</标签>
</标签>
记住标签用的是块级标签
最后有什么问题欢迎大家随时询问（本人qq号：2952174903）**