HTML5购物商城案例

用到的技术：fullpage.js—全屏滚动插件
引用的文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script><!-- jquery.easings.min.js 是必须的，用于 easing 参数，也可以使用完整的 jQuery UI 代替 -->
<script src="js/jquery.easings.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>

入口函数

$(function(){$('#fullpage').fullpage();
});

详细参数
注意点：
1、$(’#fullpage’).fullpage({
navigation: true,
回调函数
})
注意传入的是json对象格式，要用逗号隔开
navigation 是字符串格式。注意格式！！
scrollingSpeed：700，值越大，越慢，可以理解为：滚动一个屏幕所需要的时间。
z-index越大，越在上面
2、有关CSS
（1）修改css样式
根据所要修改的样式，例如：#fp-nav，设置css新样式，在样式最后加上！important
设置背景图的规范：先设置颜色，再设置背景图片
（2）水平居中对齐
left：50%
transform：translateX（-50%）—好处：不用计算margin-left的具体值
（3）对于背景半透明
background：rgba（0，0，0，0.3）最后一个值越小，越透明
（4）对于背景图水平居中
background： url（） no-repeat center center；
（5）放两张图片的技巧
设置一个div，div的背景设置为一张图片。
在div中，设置一个img标签，用相对路径定位另一张图。
（6）隐藏的技巧
opacity：0；—因为后面要做淡入淡出的效果，不要用display
（7）背景固定：滚动时，背景不移动
background-attachment:fixed
//详解：
scroll:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。
fixed：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body上。
local：背景图相对于元素内容固定，
inhert:继承，没什么说的。
3、对于@keyframes 动画名字｛
0%｛ top：25% ｝
50%｛｝
100%｛｝
｝
在css中调用： animation ：动画名字 3s 曲线（linear） infinite；
4、回调函数
afterLoad: function(anchorLink, index)
index：当前的页面索引
onLeave: function(index, nextIndex, direction)
index：当前页面；nextIndex 是滚动到的“页面”的序号
实现效果主要是用回调函数
5、有关jQuery
（1）show函数：某个元素出现，display：block
（2）animate函数
.animate（｛“right”：370｝，1500，function（）｛…｝）
.animate（｛“属性”：值｝，时间（毫秒），回调函数）
（3）获取当前屏幕的高度
var k = $(window).height();
第二屏中沙发的效果：
“大沙发字”移动到“电视”里，然后马上隐藏。
8个沙发显示。
小沙发字显示，向右上角移动。

第三屏中的沙发：
沙发从第二屏掉落后，原来的沙发没了的原理：用一张白色图片盖住
当第二屏幕往第三屏幕滚动的时候，沙发显示并且往第三屏幕跑白色盒子显示
走的距离就是当前哦屏幕的高度 - main 到底部的高度 - 沙发到main的距离

var flag=true的作用：控制动画，节流阀的作用。
这样写，动画完成时为true，可以减少服务器不必要的负载。

第四屏：

HTML5购物商城案例相关推荐

前端实现模拟购物商城案例实现
学习HTML,css和js前端的小伙伴们,这次来分享购物商城案例的实现! 准备阶段: 准备一些需要放到页面上的图片,小图和其对应的大图,博主这边举例为小图(40 x 40),大图(321 x 430) ...
前端与移动开发----购物商城案例（品优购PC项目上）
品优购项目-上目标能够遵循品优购代码规范能够在品优购首页中引入 favicon 图标能够说出三大标签 SEO 优化能够在品优购首页中使用字体图标能够说出 LOGO 需要哪些 SEO 优化 ...
HTML5期末大作业：仿唯品会购物网站设计——仿唯品会购物商城(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品商城网站设计
HTML5期末大作业:仿唯品会购物网站设计--仿唯品会购物商城(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品商城网站设计常见网页设计作业题材有个人. 美食. 公司. ...
HTML5期末大作业：时尚服装购物网站设计——时尚服装购物商城(16页) 关于时尚购物HTML网页设计-----服装
HTML5期末大作业:时尚服装购物网站设计--时尚服装购物商城(16页) 关于时尚购物HTML网页设计-----服装常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电 ...
javaweb JAVA JSP汽车配件销售系统jsp配件销售网站（jsp电子商务系统，购物商城）在线购物案例
JSP汽车配件销售系统jsp配件销售网站 (jsp电子商务系统,购物商城)在线购物案例大家好,很高兴和大家分享Java项目和经验.不管同学们是出于什么需求.都希望各位计算机专业的同学有一个提高. 本 ...
HTML5期末大作业：服装购物网站设计——粉色服装购物商城(4页) 服装购物商城网页设计作品大学生购物专题网页设计作业模板商店静态HTML网页模板下载
HTML5期末大作业:服装购物网站设计--粉色服装购物商城(4页) 服装购物商城网页设计作品大学生购物专题网页设计作业模板商店静态HTML网页模板下载常见网页设计作业题材有个人. 美食. 公司 ...
HTML5期末大作业：生活类购物商城网站设计——生活类购物商城模板(2页)学生商店网页作品
HTML5期末大作业:生活类购物商城网站设计--生活类购物商城模板(2页) 大学生购物网页制作教程表格布局网页模板学生HTML商城网页设计作业成品简单网页制作代码学生商店网页作品常见网页设计 ...
HTML5期末大作业：购物商城网站设计——尤洪购物商城-功能齐全(30页) HTML+CSS+JavaScript 学生DW网页设计作业成品实训大作业
HTML5期末大作业:购物商城网站设计--尤洪购物商城-功能齐全(30页) HTML+CSS+JavaScript 学生DW网页设计作业成品实训大作业常见网页设计作业题材有个人. 美食. 公司. ...
HTML5期末大作业：生活类购物商城网站设计——生活类购物商城模板(2页)
HTML5期末大作业:生活类购物商城网站设计--生活类购物商城模板(2页) 大学生购物网页制作教程表格布局网页模板学生HTML商城网页设计作业成品简单网页制作代码学生商店网页作品常见网页设计 ...

HTML5购物商城案例

HTML5购物商城案例相关推荐

最新文章

热门文章