关于Html5的一些基础知识

H5C3

《购物车宣传》案例:

综合运用h5c3知识且进行一定扩展

能使用jquery完成网页常见交互行为

实际工作开发当中能应对活动宣传页

FullPage插件:

插件功能介绍:

基于jQuery的插件，它能够帮你很方便、很轻松的制作出全屏网站。

支持鼠标滚动，支持前进后退和键盘控制，多个回调函数，支持手机、平板触摸事件，支持CSS3动画，支持窗口缩放，窗口缩放时自动调整，可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等。

参考文档: jQuery全屏滚动插件fullPage.js演示_dowebok

原理: window.onmousewheel = function0{ console.log(ok') };

购物车宣传页-fullpage的基本使用（1）

●使用步骤

引用文件

<link rel="stylesheet" href=“css/jquery . fullPage.css">

<script src="js/jquery.min.js" ></script>

<script src="js/jquery . fullPage.js "></script>

购物车宣传页-页面架子

html结构:

<div id="fullpage">

<div class="section">第一 屏</div>

<div class="section">第二 屏</div>

<div class="section">

<div class="slide">第三 屏的第一屏</div>

<div class-"slide">第三 屏的第二屏</div>

<div class="slide" >第三屏的第三屏</div>

<div class="slide">第三 屏的第四屏</div>

</div>

<div class=" section">第四屏</div>

</div>

js初始化:

$(function(){

$(' #fullpage'). fullpage();

});

购物车宣传页-公用元素

<a href="#" class=" go"><img src=" images/00-go. png" alt=""></a>

<a href="#”class=”more”><img src= “images/ 00-more . png”

alt=""></a>

购物车宣传页-第一屏布局

<div class="container">

<!-- 每一个切换的屏幕 -->

<div class="section screen01">

 <!-- 如果是大屏基 是基于top定位 脱离显示区城 固定在一个域内 用一个固定太小的容器来装内容 -->

 <div class="content">

<!-- 商品列表，沙发，横幅 -->

 <div class="goods"><img src=" images/01-goods.png" alt=""></div>

 <div class="sofa"><img src= "images/01-sofa.png" alt=""></div>

 <div class="fly"><img src="images/01-fly.png" alt=""></div>

 </div>

 </div>

购物车宣传页-动画实现选的技术

note.md

#购物车宜传(宜传页，活动页, h5宜传页)

#全屏切换效果

通过鼠标的滚轮切换全屏页面

1. 使用fullpage来完成
2. 使用动画 (js实现动画，css3显示的动画)

一个是帧动画 一个是补间动画

什么是帧动画:使用定时器每隔一段时间更改当前元素的状态

什么是补间动画:过渡(加过渡只要状态发生改变产出动画)动画(多个节点来控制动面) 性能会更好

在支持H5C3的的浏览器尽可能使用css3动画(移动端开发)

transition animat ion

 transition 组合写法 (transition:all 1s linear 1s)

的拆分写法transition-property  transition duration  transition-timing-function

购物车宣传页-第一屏动画实现

/*第一屏动画”/

/*1.定义动画序列/

@keyframes flye1 {

from{

transform: translateY(-50px);

}

/*50%{

transform: translateY(50px);

}*/

to{

transform: translateY(50px);

}

购物车宣传页-动画思路实现

第二屏 动画特点:完全进入当前屏的时候执行动画

1.什么时候完全进入

2.怎么做动画: 给大容器追加一个类 在这个类下面可以给需要做动画的元素添加动画属性

购物车宣传页-第二屏页面内容

/*第二屏*/

/*使用动画需要使用块级元素*/

.screen02{

background: url("../images/02-bg.png") no-repeat center bottom;}

购物车宣传页-第二屏动画

/*第二屏动画*/

. screene2.now .text .texte1{

position: absolute;

opacity: 0;

.screene2.now .text .texte2{

position: static;

opacity: 1;

transition: opacity 1s;

}

/*1. 搜索框在右边动画的出来 */

/*2.在显示器中间停留显示关键字*/

/*3.商品列表动画显示 搜索框动画位移到右上角*/

购物车宣传页-点击更多切换

最好在组件初始完毕或者插件内容渲染完毕

/*jquery插件初始的时候封装这个方法*/

/*1.回想jquery插件的封装$.fn. fullpage”function(){} */

/*2. jquery本身没有的方法通过$. fn的方式追加方法 认为是插件方法*/

/*3.例如: $.fn.src . function(){ return this.attr('src') } this */

$. fn. fullpage. moveSectionDown();

购物车宣传页-沙发的第二屏到第三屏动画

购物车宣传页-第三屏布局和动画

active 默认显示的页面

/*沙发做动画 当离开第二屏 和页面的滚动同步动画时间保持- -致*/

. screen02.leaved . sofa{

animation: sofa02 1s linear;

}

@keyframes sofa02 {

from{

opacity: 1;

}

to{

opacity: 1;

/*沙发下移*/

transform: translate(-80px , 700px);

}

}

购物车宣传页-第四屏基本结构

<!--白云-->

<div class= "cloud"><img src=" images/04-cloud. png" alt=""></div>

}

购物车宣传页-第四屏动画

. screen03.1eaved . sofa{

 /*1.组合写法 多个转换属性之间空格 transform:rotate() translatex() skew() scale()*/

/*2.如果你先旋转那么 坐标轴也会旋转/

/*3.最好先位移再旋转*/

/*1. 掐时间 做延时 完成动画的街接*/

/*2. jquery的动画$( 'dom ').animate(property, duration, speed,callback)*/

/*speed (swing linear) ”/

/*3.能不能监听到动画或者过度的结束"/

/*4.css3当中过渡transitionend动画animationend*/

2D变换方法：translate rotate scale skew matrix

缩放 scale

位移 translate

旋转 rotate

倾斜 skew

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

skew() 方法

transform:skew(<angle> [,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skewX(<angle>);表示只在X轴(水平方向)倾斜。

skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

以上四种转换方式是比较特殊，其实他们都是martix 矩阵

ease先快后慢 最后非常慢

linear  匀速

ease-in 速度越来越快

ease-out 速度越来越慢

ease-in-out 速度先快后慢

以上五种动画速度是比较特殊，其实他们都是由 贝塞尔曲线来的

3d转换 translate3d  rotate3d

2d 转换和3d转换区别：除了多了一个参数表示3d

在移动端使用3d转换可以优化性能（如果设备有3d加速引擎GPU 可以提高性能，是2dz转换是无法调用GPU ）

/*离开某一个页面的时候触发*/

onLeave :function (index , nextIndex,direction) {

var currentSection = $( " .section " ).eq(index-1);if(index =- 2 &8 nextIndex == -3{

/*当前是从第二页到第三页*/

currentsection.addclass( 'leaved ' );}else if(index=- 3 && nextIndex == 4){

/*当前是从第三页到第四页*/

currentsection.addclass( 'leaved' );}else if(index =- 5 && nextIndex == 6){

/*当前是从第五页到第六页*入

currentsection.removeclass( ' now ' ).addclass( " leaved " );

}

}

.box {

width: 1000px;height: 500px;

border: 1px solid #ccc;

background: ur1(" ../cart/images/e6-bg.png") no-repeat 25% bottom / 800px 3oopx;}

1.背景图的百分比不是按照容器的大小去换算的

2.百分比的背景定位;基于容器的宽度-背景的宽度

3.计算公式―背景的x的定位=(容器的宽度-背景的宽度)

QQTIM页面架子代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset= "UTF-8">

<title>QQTIM</title>

<link rel=" stylesheet" href="css/index.css">

 </head>

<body>

<!--导航-->

<nav class="qq. nav"></nav>

<!--展示-->

<section class="qq_ banner" ></section>

<!--语音-->

<section class="qq_ sound"></section>

<!--文件-->

<section class="qq. _file"></section>

<!--兴趣-->

<section class="qq_ interest" ></section>

<!--底部-->

<footer class="qq_ footer"></footer>

<scrint srr="is/index. is"></scrint>

标签种类<header>：定义页眉

<nav>：定义导航

<section>：定义文档中的区段

<time>：定义日期和时间

<article>：定义文章

<aside>：定义文章的侧边栏

<figure>：定义一组媒体对象以及文字

<figcaption>：定义figure的标题

<footer>：定义页脚

标签作用：

header与footer标签用于表示页面、应用或某个模块的头部和尾部；

nav用于表示导航

article标签表示文章；

aside签和article标签用法类似，只是表示内容会出现在侧边栏；

figure标签表示一段自包含的内容——独立的流内容（图像、图标、照片、代码等）

jquery操作类的方法:

addclass()  removeclass()  toggleclass()  hasclass()

获取自定义属性的值data

<div id="tree" data-leaves="47" data-plant-height="2.4m"></div>
<script>
var tree = document.getElementById("tree");
//getAttribute()取值属性
console.log(tree.getAttribute("data-leaves"));
console.log(tree.getAttribute("data-plant-height"));
//setAttribute()赋值属性
tree.setAttribute("data-leaves","48");

//data-前缀属性可以在JS中通过dataset取值，更加方便
console.log(tree.dataset.leaves);
console.log(tree.dataset.plantHeight);
//赋值
tree.dataset.plantHeight = "3m";
tree.dataset.leaves--;
//新增data属性
tree.dataset.age = "100";
//删除，设置成null，或者delete
tree.dataset.leaves = null;
delete tree.dataset.age;
//jQuery的data方法
var $tree = $('#tree');

轮播图:

常见的轮播图通常是整张图切换，在每个li中放入想要的image，如下代码：

 <ul class="imgBox">

    <li><img src="images/1.jpg" alt=""></li>

    <li><img src="images/2.jpg" alt=""></li>

    <li><img src="images/3.jpg" alt=""></li>

    <li><img src="images/4.jpg" alt=""></li>

</ul>

1. 课程反馈
2. 课程内容
3. 理解视差效果原理

QQTIM使用staller插件：

Stellar插件

视差滚动（Parallax Scrolling）指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术主要核心就是前景和背景以不同的速度移动，从而创造出3D效果。 这种效果可以给网站一个很好的补充

特性；

视差滚动效果酷炫，适合于个性展示的场合。

视差滚动徐徐展开，适合于娓娓道来，讲故事的场合。

视差滚动容易迷航，需要具备较强的导航功能。

原理：

传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的，而视差滚动则是在滚动的时候，内容和多层次的背景实现或不同速度，或不同方向的运动。有的时候也可以加上一透明度、大小的动画来优化显示。利用background-attachment属性实现。

使用步骤：

引入插件库

在结构中添加data-stellar-background-ratio=0.5 在样式中添加 background-attachment: fixed;

●原理

传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的，而视差滚动则是在滚动的时候，内容和多层次的背景实现或不同速度,或不同方向的运动。有的时候也可以加 上一些透明度、 大小的动画来优化显示。利用background-attachment属性实现。

●使用步骤

引用文件

<script src-"jquery/jquery .min.js"></script><script src="jquery. stellar.min.js"></script>

html结构

<div class="content" id=" content1"><p>TEXT HERE</p>

</div>

<div class="content" id=”content2" >p>TEXT HERE</p>
〈/div〉