H5C3购物页面
编写这个页面主要是为了锻炼H5C3的基本功和页面布局
综合运用Jquery和fullpage插件完成页面
通过$(window).height获取屏幕高度实现跨屏动画效果
仿京东移动端页面
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
流式布局
原生JS实现轮播图功能
实现功能
1.页面滚动时，透明度变大
var search = function(){//页面滚动时，透明度变大 var searchBox = document.querySelector(".jd_search_box") var banner = document.querySelector(".jd_banner") var height = banner.offsetHeight window.onscroll = function(){ var scrollTop = document.documentElement.scrollTop var opacity = 0 if(scrollTop 2.JS实现轮播图，点随着变化
var addTransition = function () { imageBox.style.transition = 'all 0.2s'; imageBox.style.webkitTransition = 'all 0.2s'; } var removeTransition = function () { imageBox.style.transition = 'none'; imageBox.style.webkitTransition = 'none'; } var setTranslateX = function (translateX) { imageBox.style.transform = 'translateX(' + translateX + 'px)'; imageBox.style.webkitTransform = 'translateX(' + translateX + 'px)'; } var index = 1; var timer = setInterval(function(){ index ++ addTransition(); //移动 setTranslateX(-index*width) },3000) imageBox.addEventListener('transitionend',function(){ if(index>=9){ index=1; //清除过渡 removeTransition() //移动 setTranslateX(-index*width) } //滑动时候无缝 else if(index<=0){ index=8 //清除过渡 removeTransition() //移动 setTranslateX(-index*width) } //根据索引设置点 现在index取值范围已经是1-8 setpoint() })
3.完成手势切换
//绑定三个触摸时间 var startX = 0 var distanceX = 0 imageBox.addEventListener('touchstart',function(e){ /*清除定时器*/ clearInterval(timer); startX = e.touches[0].clientX }) imageBox.addEventListener('touchmove',function(e){ var moveX = e.touches[0].clientX distanceX = moveX - startX //元素将要定位=当前定位+手指移动距离 var translateX = -index * width +distanceX removeTransition() setTranslateX(translateX) }) imageBox.addEventListener('touchend',function(e){ if(Math.abs(distanceX) 0){ index --; } // 左滑动 else{ index ++; } addTransition() setTranslateX(-index*width) } /*最好做一次参数的重置*/ startX = 0; distanceX = 0; /*加上定时器*/ clearInterval(timer); timer = setInterval(function () { index++; /*加过渡*/ addTransition(); /*做位移*/ setTranslateX(-index * width); }, 3000); })
（与zepto作对比）
仿苏宁移动端页面
zepto实现轮播图的上功能
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(); });
swipe实现轮播图功能
//swiper用法$(function () { /* * 1.自动轮播 * 2.无缝循环 * 3.指示功能 * */ new Swiper('.swiper-container',{ autoplay:1000, loop:true, pagination:'.swiper-pagination', autoplayDisableOnInteraction:false }); })
使用了less实现了css模块化
rem为什么可以自适应：
font-size可以等比改变所有用了rem单位的元素
基准值=预设基准值/设计稿宽度*当前设备的宽度
font-size: @baseFontSize / @psdWidth * extract(@adapterDeviceList,@index);
媒体查询
//需要序号来判断 通过序号遍历 @index 1 开始//遍历成功.adapterMixin(@index) when ( @index > 0){ @media (min-width: extract(@adapterDeviceList,@index)){ html{ font-size: @baseFontSize / @psdWidth * extract(@adapterDeviceList,@index); } } .adapterMixin( @index - 1);}