去面试啦 面试准备

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<height){
			opacity = scrollTop/height *0.85
		}else{
			opacity = 0.85
		}
		searchBox.style.background = 'rgba(201,21,35,'+opacity+')'
	}
}

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)<width/3){
			addTransition()
			setTranslateX(-index*width)
		}else{
			// 右滑动
				if(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);
}