调试
浏览器模拟-chrome Emulation
路径:chrome->F12开发者工具->show drawer(右上角小按钮)->Emulation
开发者工具左上角手机图标,点击后进入模拟预览页面
可设置机型,自定义屏幕大小及Device pixel ratio。
还可以通过开发者工具Settings->Devices->Emulation devices隐藏机型或添加自定义机型。
总结:机型较丰富(手机/平板,苹果/三星/nexus/nokia/..),可模拟尺寸,touch,网络等,但是字体和实际真机有差距。适合用于快速预览不同屏幕布局。
真机调试-chrome
USB连接设备,设备:开发者选项->允许USB调试。
PC:chrome直接访问地址:chrome://inspect/#devices
Open tab with url
可输入网址,使设备打开链接。
页面列表中,可在设备中查看或聚焦页面。
项目端口号非80解决方案:
nodeJs开服务,指定端口号,
端口模拟:
Port forward…->输入端口号及IP(localhost)->勾选Enable->Done
设备名称后面,端口号图标为绿色为正常,红色为无法访问
总结:可在设备上操作网页,看网页实际效果,可在页面模拟操作,可审查元素。适用于实际调试、测试。
动画
声明动画
首尾:
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
多段
@keyframes myfirst
{
%0{}
%5{}
%100{}
}
选择器绑定
div {
animation: name 1s linear 500ms 1 alternate;
}
语法
animation: name duration timing-function delay iteration-count direction;
属性 | 描述 | 值 |
---|---|---|
animation-name | keyframe 名称 | 无 |
animation-duration | 完成动画时间 s/ms | 1s |
animation-timing-function | 速度曲线 | ease linear ease-in ease-out ease-in-out cubic-bezier(n,n,n,n) |
animation-delay | 开始延迟 | 0 1s |
animation-iteration-count | 播放次数 | 1 2 3 infinite |
animation-direction | 偶次数反向播放 | normal alternate |
animation-play-state | 动画状态 | running paused |
animation-fill-mode | 动画前后状态 | none forwards backwards both |
兼容
@keyframes name
@-moz-keyframes name/* Firefox */
@-webkit-keyframes name/* Safari 和 Chrome */
@-o-keyframes name/* Opera */
animation: name time;
-moz-animation: name time; /* Firefox */
-webkit-animation: name time; /* Safari 和 Chrome */
-o-animation: name time; /* Opera */
滑屏框架
控制父容器-slip
Demo
slip.min.js
github
总结:pc端也可以滑,不支持嵌套,不支持滑屏增加事件,不支持滑屏动画。js少,适合简单的滑屏。
控制子容器-fullPage
Simple Demo
嵌套Demo
fullPage.min.js
github
滑屏操作时,实际上是增加或删去class,所以需定义以下css
.page {
box-shadow: 1px 1px 4px 0 #000;
display: none;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.contain {
width: 100%;
height: 100%;
display: none;
position: relative;
z-index: 0;
padding-top: 70px;
}
.current .contain,.slide .contain {
display: block;
}
.current {
display: block;
z-index: 1;
}
.slide {
display: block;
z-index: 2;
}
.swipe {
display: block;
z-index: 3;
transition-duration: 0ms !important;
-webkit-transition-duration: 0ms !important;
}
html结构
<div id="pageContain">
<div class="page page1 current">
<div class="contain">
<!-- your own code here-->
</div>
</div>
<!-- ect.. -->
</div>
<!--alternative-->
<ul id="navBar">
<li>0</li>
<!-- ect.. -->
</ul>
<!--alternative-->
js
var runPage = new FullPage({
id : 'pageContain', // id of contain
slideTime : 800, // time of slide
continuous : false, // create an infinite feel with no endpoints
effect : { // slide effect
transform : {
translate : 'Y', // 'X'|'Y'|'XY'|'none'
scale : [.1, 1], // [scalefrom, scaleto]
rotate : [0, 0] // [rotatefrom, rotateto]
},
opacity : [0, 1] // [opacityfrom, opacityto]
},
mode : 'wheel,touch,nav:navBar', // mode of fullpage
easing : 'ease' // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1];
// ,onSwipeStart : function(index, thisPage) { // callback onTouchStart
// return 'stop';
// }
// ,beforeChange : function(index, thisPage) { // callback before pageChange
// return 'stop';
// }
// ,callback : function(index, thisPage) { // callback when pageChange
// alert(index);
// };
});
接口:
prev() 直接滑向上一页
next() 直接滑入下一页
thisPage() 返回当前的页码
go(num) 直接滑到第num页
总结:
可嵌套,可自动播放,可回调,可控制滑动动画。需提前定义的内容较多。适合复杂的滑屏。