苏宁易购项目
2018-11-26 本文已影响11人
一书文集
rem布局
- 认识rem
/*1.rem是相对单位*/
/*2.em大小是基于父元素的字体大小*/
/*3.rem的大小是基于？？？*/
/*4.浏览器默认的字体大小是16px*/
/*5. r 意思 root 根元素，html标签 */
/*6. rem的大小是基于html元素的字体大小*/
- rem适配
1.伸缩布局 flex
2.流式布局 百分比
3.响应布局 媒体查询 （超小屏设备的时候：流式布局）
共同点：元素只能做宽度的适配（排除图片
适配方案rem：宽度和高度都能做到适配（等比缩放））
4.rem布局
<!--通过控制html上的字体大小去控制页面上所有已rem为单位的基准值控制尺寸-->
<!--4.1 把页面上px单位转换成rem单位-->
<!--4.2 页面制作的时候 psd 上的量取的px转成rem使用-->
<!--4.3 怎么换算？？？预设一个基准值 方便计算 100px -->
<!--4.4 适配的时候设置基准值 320px 50px 怎么算：（640px 100px ===320px 50px）-->
<!--4.5 换算公式：当前rem基准值 = 预设的基准值 / 设计稿宽度 * 当前设备的宽度 -->
<!--4.6 怎么去改变 （js换算，媒体查询推荐）-->
- less 适配方案
.adapterMixin(@len);
@charset "UTF-8";
//变量
//rem适配方案不好维护 设备会更新 设计稿尺寸 预设基准值
//适配主流设备十几种
@adapterDeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;
//设计稿尺寸
@psdWidth:750px;
//预设基准值
@baseFontSize:100px;
//设备的种类
@len:length(@adapterDeviceList);
//主体颜色
@snColor:#fabc09;
//遍历使用的是for循环
//less没有循环语法
//使用函数的迭代 死循环
//根据数组的长度去停止当前循环
//给函数的执行附加条件
//需要序号来判断 通过序号遍历 @index 1 开始
//遍历成功
.adapterMixin(@index) when ( @index > 0){
@media (min-width: extract(@adapterDeviceList,@index)){
html{
font-size: @baseFontSize / @psdWidth * extract(@adapterDeviceList,@index);
}
}
.adapterMixin( @index - 1);
}
苏宁
找出设计稿原型，将设备调为750px, 750px为psd设计稿原型，再用rem设计。
zepto 插件
- 实现轮播图
$(function () {
/*手势切换轮播图*/
/*1.自动轮播 无缝*/
/*2.点随着变化*/
/*3.完成手势切换*/
var $banner = $('.sn_banner');
var width = $banner.width();
var $imageBox = $banner.find('ul:first');
var $pointBox = $banner.find('ul:last');
var $points = $pointBox.find('li');
var animationFuc = function () {
/*动画*/
$imageBox.animate({transform:'translateX('+(-index*width)+'px)'},200,function () {
/*动画执行完成的回调*/
if(index >= 9){
index = 1;
/*瞬间*/
$imageBox.css({transform:'translateX('+(-index*width)+'px)'});
}else if(index <= 0 ){
index = 8;
/*瞬间*/
$imageBox.css({transform:'translateX('+(-index*width)+'px)'});
}
/*index 1-8*/
/*2.点随着变化*/
$points.removeClass('now').eq(index-1).addClass('now');
});
}
/*1.自动轮播 无缝*/
var index = 1;
var timer = setInterval(function () {
index ++;
animationFuc();
},5000);
/*3.完成手势切换 android 4.0 兼容 */
/*左滑的手势 下一张*/
$banner.on('swipeLeft',function () {
index ++;
animationFuc();
});
/*右滑的手势 上一张*/
$banner.on('swipeRight',function () {
index --;
animationFuc();
});
});
swiper 插件
- 实现轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="lib/swiper/css/swiper.min.css">
<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/less" href="less/index-swiper.less">
<script src="lib/less/less.min.js"></script>
</head>
<body>
<!--版心-->
<div class="sn_container">
<!--顶部通栏-->
<header class="sn_topBar">
<a href="#" class="icon_category"></a>
<form action="#">
<span class="icon_search"></span>
<input type="search" placeholder="60寸电视免费拿">
</form>
<a href="#" class="icon_cart"></a>
</header>
<!--轮播图-->
<style>
.swiper-container img{
width: 100%;
display: block;
}
</style>
<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide"><a href="#"><img src="images/banner01.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="images/banner02.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="images/banner03.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="images/banner04.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="images/banner05.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="images/banner06.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="images/banner07.jpg" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="images/banner08.jpg" alt=""></a></li>
</ul>
<ul class="swiper-pagination">
</ul>
</div>
<!--分类-->
<nav class="sn_nav">
<ul class="clearFix">
<li><a href="#"><img src="images/nav01.png" alt=""><p>分类</p></a></li>
<li><a href="#"><img src="images/nav02.png" alt=""><p>分类</p></a></li>
<li><a href="#"><img src="images/nav03.png" alt=""><p>分类</p></a></li>
<li><a href="#"><img src="images/nav04.png" alt=""><p>分类</p></a></li>
<li><a href="#"><img src="images/nav05.png" alt=""><p>分类</p></a></li>
<li><a href="#"><img src="images/nav01.png" alt=""><p>分类</p></a></li>
<li><a href="#"><img src="images/nav02.png" alt=""><p>分类</p></a></li>
<li><a href="#"><img src="images/nav03.png" alt=""><p>分类</p></a></li>
<li><a href="#"><img src="images/nav04.png" alt=""><p>分类</p></a></li>
<li><a href="#"><img src="images/nav05.png" alt=""><p>分类</p></a></li>
</ul>
</nav>
<!--页签-->
<footer class="sn_tabs">
<ul>
<li><a href="#"><span class="fa fa-home"></span><p>首页</p></a></li>
<li><a href="#"><span class="fa fa-reorder"></span><p>分类</p></a></li>
<li><a href="#"><span class="fa fa-file-text-o"></span><p>必抢清单</p></a></li>
<li><a href="#"><span class="fa fa-user"></span><p>我的易购</p></a></li>
<li><a href="#"><span class="fa fa-suitcase"></span><p>新手大礼包</p></a></li>
</ul>
</footer>
</div>
<script src="lib/zepto/zepto.min.js"></script>
<script src="lib/swiper/js/swiper.jquery.min.js"></script>
<script>
$(function () {
/*
* 1.自动轮播
* 2.无缝循环
* 3.指示功能
* */
new Swiper('.swiper-container',{
autoplay:1000,
loop:true,
pagination:'.swiper-pagination',
autoplayDisableOnInteraction:false
});
})
</script>
</body>
</html>
