H5购物网站简单基础案例（笔记）

目录：

一，fullPag简介

二，fullpage的使用

1.引入文件

2.写出需要的滑屏数

3.调用fullpage

三·如何修改fullpage插件中默认的样式属性

1，在浏览器中找到设置该属性的css

2.在自己定义的css中重叠该属性

3.修改后效果图

四.一些技巧

1.滑屏固定进入购物中心

2.css3中的动画移动（使用）：

3.easing动画的使用：

4.鼠标经过固定区域变手指

5.鼠标经过固定区域(xxx)，图片（pic）切换显示/隐藏

6.图片跟鼠标移动：

7.fullpage 返回第一屏，并复原所以动画

8.bug修复：

9.使用固定定位（fixed），在每一屏中添加“继续下一屏”

 

 

一，fullPag简介：

如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面，QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的，显得更上档次，你可以试试 fullPage.js。

fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有：

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

fullpage：https://github.com/alvarotrigo/fullPage.js   官方

中文演示地址：https://www.dowebok.com/demo/2014/77/

中文文档查询地址：https://www.jianshu.com/p/85e6dfaa0f73

• 二，fullpage的使用

1.引入文件

2.写出需要的滑屏数

3.调用fullpage

*

 

 

此时页面效果：

三·如何修改fullpage插件中默认的样式属性

1，在浏览器中找到设置该属性的css

2.在自己定义的css中重叠该属性

3.修改后效果图

四.一些技巧

1.滑屏固定进入购物中心

效果图：

代码部分：

html：

 

css：

 

2.css3中的动画移动（使用）：

在css中：

@keyframes fly{//类似定义方法

}

 

 

在html中：

实际效果（两个动图）：

 

3.easing动画的使用：

*导包

*写入 

4.鼠标经过固定区域变手指

cursor：pointer；

5.鼠标经过固定区域(xxx)，图片（pic）切换显示/隐藏

$(".xxx").hover(function(){

$(".pic").toggle();//toggle(显示和隐藏的切换（show和hode）)

});

6.图片跟鼠标移动：

$(document).mousemove(function(event){

var x = event.pageX - $(".pic").width()/2 ; //获得鼠标在页面中的x中间的图标

var y = event.pageY //获得鼠标在页面中y坐标

$(".pic").css({"left":x ,"top":y});

});

7.fullpage 返回第一屏，并复原所以动画

$(".again").click(functiom(event)){

$.fn.fullpage.moveTo(1);

$("img .move").attr("style","");//除了图片，还有别的style需要清空，比如盒子，可以给盒子添加类名“.move”

}

8.bug修复：

*:防止缩放过于变形  ----- 设置最小的宽高

html，body， .section{

min-height:600px;

min-width:1000px;

}

9.使用固定定位（fixed），在每一屏中添加“继续下一屏”

fullpage点击进入下一屏:$.fn.fullpage.moveSectionDown();

fadeOut,fadeIn(Jquery中的淡入淡出)