h5购物网站案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物网站</title>
<!-- 引入的 初识化css fullpage css -->
<link rel="stylesheet" href="css/base.css" />
<!-- 引入自己的css -->
<link rel="stylesheet" href="css/mypage.css" />
<link rel="stylesheet" href="css/jquery.fullPage.css" />
<!-- y这是一个jquery插件，所以先引入jquery -->
<script src="js/jquery.min.js"></script>
<!-- 如果想要 easing 缓动动画 那就引入 easing js -->
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<!-- 360度汽车旋转 -->
<script src="js/circlr.min.js"></script>
<!-- 引入自己的js -->
<script src="js/myPage.js"></script>
</head>
<body>
<!-- 直接进入 -->
<a href="#" class="go">
<img src="images/t1ldiffkjfxxxzhxzd-101-101.png" alt="">
</a>
<!-- next 下一屏幕 -->
<a href="javascript:;">
<img src="images/next.png" class="next next_undown" alt="">
</a>
<div id="fullpage">
<!-- 第一屏幕制作 -->
<div class="section section1">
<img src="images/t1wsqsfgnaxxxmjxp6-470-50.png" class="fly updown" alt="">
<img src="images/t1xccqfflgxxxild.png" class="shirt01 shirt-updown" alt="">
<img src="images/t1iakufbxxxxctz4tl-824-274.png" class="goods" alt="">
</div>
<!-- 第二屏幕制作 -->
<div class="section section2">
<div class="computer">
<div class="search move">
<img src="images/search-words.png" class="search-wrods" alt="">
</div>
<img src="images/search-02-1.png" class="search-02-1" alt="">
<img src="images/goods-441-218.png" class="goods-02" alt="">
<!-- 沙发 -->
<img src="images/shirt-02-207-166.png" class="shirt-02" alt="">
<!-- 白色底盒子用来遮挡沙发的 -->
<div class="cover move"></div>
</div>
<img src="images/words-01-361-25.png" class="words-01" alt="">
<img src="images/words-02.png" class="words-02" alt="">
</div>
<!-- 第三屏幕制作 -->
<div class="section section3">
<div class="main">
<div class="select">
<img src="images/img-01.gif" class="img" alt="">
<img src="images/img-01-a.gif" class="img img-01-a" alt="">
<img src="images/btn-01.gif" class="btn" alt="">
<img src="images/btn-01-a.gif" class="btn btn-01-a" alt="">
</div>
沙发
<img src="images/shirt-02-207-166.png" class="shirt-03" alt="">
<img src="images/t1f.png" class="t1f" alt="">
</div>
</div>
<!-- 第四屏幕制作 -->
<div class="section section4">
<img src="images/cloud.png" class="cloud cloud-back1">
<img src="images/words-04.png" class="word">
<img src="images/words-04-a.png" class="word words-04-a">
<div class="car move"> <!-- 购物车 -->
<img src="images/t1f.png" class="car-img" alt="">
<img src="images/car.png" alt="">
</div>
<div class="note move">
<img src="images/t1sqosfx8bxxa9wx_i-173-47.png" class="note-img" alt="">
<img src="images/t1.png" alt="">
</div>
</div>
<!-- 第五屏幕制作 -->
<div class="section section5">
<img src="images/words-05.png" class="words-05">
<img src="images/card-05.png" class="card-05">
<img src="images/order-05.png" class="order-05">
<img src="images/t1f.png" class="t1f-05">
<div class="overFlow">
<img src="images/mouse-05.png" class="mouse">
<img src="images/mouse-05-a.png" class="mouse mouse-05-a">
<img src="images/hand-05.png" class="hand-05">
</div>
</div>
<!-- 第6屏幕制作 -->
<div class="section section6">
<img src="images/box.png" alt="" class="box-06" />
<img src="images/car-06.png" alt="" class="car-06" />
<img src="images/cloud-06.png" alt="" class="cloud-06" />
<img src="images/88.png" alt="" class="pop-06" />
<img src="images/man.png" alt="" class="boy">
<img src="images/women.png" alt="" class="girl">
<img src="images/door.png" alt="" class="door">
<img src="images/t1kzyqffnexxbcrepj-139-173.png" alt="" class="pop-07">
<img src="images/words-06-a.png" alt="" class="words-06-a">
</div>
<!-- 第7屏幕制作 -->
<div class="section section7">
<div class="star move">
</div>
<img src="images/good-07.png" alt="" class="good-07">
</div>
<!-- 第8屏幕制作 -->
<div class="section section8">
<div class="container">
<div id="circlr">
<div id="loader"></div>
</div>
<script>
// 需要准备 74个图片
for(var i = 1; i<=74; i++) {
// 创建图片 别忘更换属性
var img = $("<img data-src='picture/"+i+".png'/>");
// 追加到 circlr里面
$("#circlr").append(img);// prepend 内部的前面添加 append 内部的后面添加
}
</script>
</div>
<script type="text/javascript">
$(function() { // 加一个入口函数 ，意思是等上面的 74张图片加载完毕之后，才执行
var crl = circlr('circlr', {
scroll : true, // 滚动滚轮也能旋转
loader : 'loader'
})
})
</script>
</div>
<!-- 第9屏幕制作 -->
<div class="section section9">
<a href="#" class="beginShoping">
<img src="images/btn-08.png" alt="">
<img src="images/btn-08-a.gif" alt="" class="btn-08-a">
</a>
<img src="images/again.png" class="again" alt="">
<img src="images/hand-08.png" class="hand-08">
</div>
</div>
</body>
</html>
<script>
$(function(){
var k = $(window).height(); // 当前屏幕的高度
// 点击next 往下播放一屏幕
$(".next").click(function(event) {
$.fn.fullpage.moveSectionDown();
});
$('#fullpage').fullpage({ // fullpage 方法里面接受json对象形式
// 是否显示项目导航
navigation: true,
// navigationPosition: "left",
// loopBottom: true,
// 滚动速度，单位为毫秒
scrollingSpeed: 1200,
// 回调函数滚动到第二屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算
afterLoad: function(anchorLink, index) {
// 往第2屏幕滚动的时候，next 先消失 等所有动画都完毕了 next 才淡出
if(index == 2) {
$(".next").fadeOut();
// 缓动动画要加到时间的后面，回调函数的前面
$(".search").show().animate({"right": 370}, 1500, "easeOutBack", function() {
// 方块走进来，沙发2个字显示
$(".search-wrods").animate({"opacity": 1},500, function() {
$(".search").hide();
// 图片 往右上角， 缩小
$(".search-02-1").show().animate({"height": 30, "right": 250, "bottom": 452}, 1000);
// 同时 沙发图片 变大
$(".goods-02").show().animate({"height": 218}, 1000, "easeInOutQuart");
// 同时 白色文字渐渐的显示出来
$(".words-02").animate({"opacity": 1},500, function() {
$(".next").fadeIn();
})
});
});
}
},
// 刚开始滚动屏幕就触发的回调函数 onLeave
// 滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；nextIndex 是滚动到的“页面”的序号，从1开始计算；direction 判断往上滚动还是往下滚动，值是 up 或 down。
onLeave: function(index, nextIndex, direction) {
$(".next").fadeOut();
if(index == 2 && nextIndex == 3) {
// 当第二屏幕往第三屏幕滚动的时候， 沙发显示并且往第三屏幕跑 白色盒子显示
// 沙发要往第三屏幕走， 走的距离 就是 当前哦屏幕的高度 - main 到底部的高度 - 沙发到main的距离 (当前屏幕的高度 - 250 )
$(".shirt-02").show().animate({"bottom": -(k - 250), "width": 207 , "left": 260}, 2000, function() {
$(".img-01-a").animate({"opacity": 1}, 500, function() {
$(".btn-01-a").animate({"opacity": 1}, 500, function() {
$(".next").fadeIn();
});
})
});
$(".cover").show();
}
// 第3屏幕到第4屏幕过渡
if(index == 3 && nextIndex == 4 ) {
$(".shirt-02").hide();
// 沙发的距离 当前屏幕的高度 - 250 + 第三屏幕的 50距离
$(".t1f").show().animate({"bottom" : -((k - 250) + 50), "left": 260}, 2000, function() {
$(this).hide(); // 动画完毕之后，自动隐藏
$(".car-img").show();
// 这购物车就开始往右走
$(".car").animate({"left": "150%"}, 3000, "easeInElastic",function() {
$(".note").show();
$(".note-img, .words-04-a").animate({"opacity": 1}, 1000, function() {
$(".next").fadeIn();
});
});
})
}
// 第4屏幕到第5屏幕过渡
if(index == 4 && nextIndex == 5 ) {
// 小手上来
$(".hand-05").animate({"bottom": 0}, 2000, function() {
// 鼠标显示
$(".mouse-05-a").animate({"opacity": 1});
// 沙发从 800 到 70
$(".t1f-05").show().animate({"bottom": 70}, 1000, function() {
// 单子上走 走完之后， 我们的文字翻转
$(".order-05").animate({"bottom": 390}, function() {
$(".words-05").addClass("words-05-a");
$(".next").fadeIn();
});
})
});
}
// 第5屏幕到第6屏幕过渡
if(index == 5 && nextIndex == 6 ) {
// 沙发的距离 当前屏幕的高度 减去 box 的 bottom 500
$(".t1f-05").animate({"bottom": -(k - 500), "left": "40%", "width": 65}, 1500, function() {
$(".t1f-05").hide();
});
$(".box-06").animate({"left": "38%"}, 1500, function() {
$(this).animate({"bottom": 40}, 500, function() {
$(this).hide();
// 行走的过程就是 背景移动的过程
// 背景jqury 里面改变比较麻烦 backgroundPositionX x坐标
//
$(".section6").animate({"backgroundPositionX": "100%"}, 4000, function() {
// 当背景动画执行完毕 boy 大小复原
$(".boy").animate({"height": 305, "bottom": 116}, 1000, function() {
$(this).animate({ "right": 500}, 500, function() {
// 门显示出来 模拟打开门的效果
$(".door").animate({"opacity": 1},200, function() {
// 之后girl 显示出来
$(".girl").show().animate({"right": 350, "height": 306 },500, function() {
$(".pop-07").show();
$(".next").fadeIn();
})
});
});
});
});
// 光的速度
$(".words-06-a").show().animate({"left": "30%"},2000, "easeOutElastic");
//
$(".pop-06").show();
});
});
}
// 第6屏幕到第7屏幕过渡
if(index == 6 && nextIndex == 7 ) {
setTimeout(function() {
$(".star").animate({"width": 120}, 500, function() {
$(".good-07").show();
$(".next").fadeIn();
});
}, 2000);
}
// 这是第8屏幕动画
// $(".beginShoping").mouseenter(function(event) {
// $(".btn-08-a").show();
// }).mouseleave(function(event) {
// $(".btn-08-a").hide();
// });
// hover 来替代更简洁 以后一个盒子鼠标经过显示离开隐藏 我们就可以用hover和toggle混搭想必也是极好的
$(".beginShoping").hover(function() {
$(".btn-08-a").toggle(); // toggle 显示和隐藏的切换
});
// 大手跟随鼠标移动
$(document).mousemove(function(event) {
var x = event.pageX - $(".hand-08").width() / 2; // 获得鼠标在页面中的x坐标
var y = event.pageY + 10; // 获得鼠标在页面中的y坐标
// 手的top 值不能小于 这个大小minY 当前屏幕的高度 K 减去手的高度 449
var minY = k - 449;
// 把 鼠标在页面中的坐标 给 hand 大手 left top
if(y < minY ) {
y = minY;
}
$(".hand-08").css({"left": x, "top": y});
});
// 当我们点击 再来一次的 时候， 分两步进行
$(".again").click(function(event) {
// 1. 返回第1屏幕
$.fn.fullpage.moveTo(1);
// 2. 所有的动画都复原 就是原来没有看过的样子
// 核心原理就是 让我们的图片（做动画的元素 清除 行内样式就可以）
// 所有带有动画的div 盒子 添加 move 类名
$("img, .move").attr("style", "");
});
},
});
});
</script>
