img

先从头部信息开始吧:

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<meta content="telephone=no" name="format-detection">

第一行,优先使用 IE 最新版本和 Chrome。

第二行是让网页的宽度自适应手机屏幕的宽度,避免有滑动:其中width=device-width:表示宽度是设备屏幕的宽度;minimum-scale=1.0表示最小的缩小比例;maxximum-scale=1.0:表示最大的缩放比例;user-scalbale=no:表示用户是否可以调整缩放比例;还有initial-scale=1.0:表示初始的缩放比例。

width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边。这里所以不需写这个

第三行用于禁止数字识自动别为电话号码。

这个页面都是在一个页面里完成的。共分为8个视图。首页,尾页加上6道选择题。我们先来说一说效果怎么实现的。

刚开始,除了首页,其他的视图都有一个样式

	.strat_hide{
		transfrom: translate3d(0, 100%, 0);
	}

每一个视图就是都有一个item的class,当点击首页的开始测试的时候,给当前页添加一个缩小的样式:

	.hide_small{
		transform: scale(0.8);
	}

这样当前页会缩小,再让下一个视图的translate3d(0, 100%, 0);的Y轴距离变为0,下一个视图就能升上来了。

	.show{
	    -webkit-transform: translate3d(0,0,0);
	    transform: translate3d(0,0,0);
	}

加上事件:

    //跳转到下一页
    if (swich<8) {
        $(boxs[swich+1]).addClass('hide_small');
        $(boxs[swich+2]).addClass('show');
        $('.comment-div').eq(itemIndex).addClass('slideDown');
        swich++;
        if(swich==6 ){
            $('.origin_div').hide();
        }
    }

给每一个视图设置一个自己的属性index=’number’,number是在视图中的位置,用于标明是第几个视图,当点击题目的某个选项以后,添加以上样式,并取到它的index属性,根据这个index属性,确定滑动时右边指示灯第几个视图显示第几个灯亮。

	$('.origin_div').children().eq(itemIndex).addClass('origin_light').siblings().removeClass('origin_light');

初始时设置一个数组,用于存放正确答案在选项中的位置

    var result = [1, 0, 2, 1, 0, 2];

点击选项,判断如果这个选项的编号属性和数组的一样,则给原始分数加上一个正确分数,否则加上错误的分数,最后把这个分数累加起来,就是得到的总数。

在微信配置里定义好分享时的话语,图片,链接,分享成功时,将遮罩hide掉。

关于更多的HTML标签,可以看一丝的常用的 HTML 头部标签