js学习总结----webapp之使用less构建响应式布局
本章主要是对移动端的一些知识点的运用，模仿腾讯看比赛的移动端做的。具体代码如下
index.html
<!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>Document</title> <link rel="stylesheet" href="reset.min.css"> <!--less--> <link rel="stylesheet/less" href="index.less"> <script src='js/less-2.5.3.min.js'></script> </head> <body> <section class='main'> <!--HEADER--> <header class='header'> <div class='con'> <h1 class='logo'>腾讯体育</h1> <span class='type'>NBA</span> <span class='menu'></span> <span class='login'>登录</span> </div> <nav class='nav'> <a href="#">NBA</a> <a href="#">CBA</a> <a href="#">英超</a> <a href="#">欧冠</a> <a href="#">亚冠</a> <a href="#">西甲</a> <a href="#">意甲</a> <a href="#">德甲</a> <a href="#">法甲</a> <a href="#">中超</a> <a href="#">NFL</a> <a href="#">综合</a> <a href="#">欧洲</a> <a href="#">社区</a> <a href="#">下载</a> </nav> </header> <!--video 只有preload='none'的时候 poster才起作用 --> <section class="videoArea"> <video src="1.mp4" controls preload="none" poster="img/poster.jpg"></video> </section> <!--match info --> <section class="matchInfo"> <!--<div class="top">--> <!--<div class="home">--> <!--<img src="1.png" alt="">--> <!--<span>96</span>--> <!--</div>--> <!--<div class="time">06月09日 09:00</div>--> <!--<div class="away">--> <!--<span>96</span>--> <!--<img src="1.png" alt="">--> <!--</div>--> <!--</div>--> <!--<div class="middle">--> <!--<span></span>--> <!--</div>--> <!--<div class="bottom">--> <!--<span class="home">123434312</span>--> <!--<span class="type">NBA季后赛</span>--> <!--<span class="away">123412423</span>--> <!--</div>--> </section> <!--match list--> <section class='matchList'> <ul class='clear'> <li class='bg'> <div> <img src="xxx.jpg" alt=""> <span>02:03</span> </div> <p>sadsadsadsdsa</p> </li> </ul> </section> </section> <script charset='utf-8' src='js/zepto.min.js'></script> <script charset='utf-8' src='js/iscroll-5.1.3.min.js'></script> <script charset='utf-8' src='js/ejs.min.js'></script> <script charset="utf-8" type="text/template" id="matchInfoTemplate"> <div class="top"> <div class="home"> <img src="<%=matchInfo.leftBadge%>" alt=""> <span><%=matchInfo.leftGoal%></span> </div> <div class="time"><%=matchInfo.startTime.formatTime('{1}月{2}日{3}:{4}')%></div> <div class="away"> <span><%=matchInfo.rightGoal%></span> <img src="<%=matchInfo.rightBadge%>" alt=""> </div> </div> <div class="middle"> <span></span> </div> <div class="bottom"> <span class="home" type="1"><%=matchInfo.leftSupport%></span> <span class="type"><%=matchInfo.matchDesc%></span> <span class="away" type="2"><%=matchInfo.rightSupport%></span> </div> </script> <script charset='utf-8' type='text/template' id='matchListTemplate'> <%$.each(matchList,function(index,item){%> <li class='bg'> <div> <img src="<%=item.pic%>" alt=""> <span><%=item.duration.substring(item.duration.indexOf(':')+1)%></span> </div> <p>sadsadsadsdsa</p> </li> <%})%> </script> <script charset='utf-8' src='js/index.js'></script> </body> </html>
public.less
@cL:#555,#999,#ebf0f5,#fff,#1c90f2,#f82d2d; @url:'../img'; .transition(@property:all,@duration:1s,@time-function:linear,@delay:0s){ -webkit-transition:@arguments; transition:@arguments; }
index.less
@import (reference) 'public'; html{ font-size:100px } html,body{ width:100%; color:extract(@cL,1); background:extract(@cL,3); overflow-x:hidden; } a,a:active,a:visited,a:hover,a:target{ display:block; color:extract(@cL,1); } .main{ margin:0 auto; max-width:6.4rem; } /*HEADER*/ .header{ /*con*/ .con{ height:.88rem; line-height:.88rem; font-size:.32rem; color:extract(@cL,4); background:extract(@cL,5); .logo,.type{ float:left } .login,.menu{ float:right } .logo{ padding-left:.7rem; width:1.44rem; border-right:.02rem solid #066DC4; font-size:.32rem; font-weight:normal; background:url('@{url}/icon-logo.png') no-repeat .1rem center; background-size:.48rem; } .type{ padding:0 .2rem; } .login{ padding:0 .3rem; } .menu{ width:.88rem; height:.88rem; background:url('@{url}/btn-nav-fold.png') no-repeat center center; background-size:.48rem; } } .nav{ padding:0 0;/*.1rem 0*/ height:0;/*2.22rem*/ background:#fff; font-size:.32rem; overflow:hidden; .transition(@duration:.3ms,@property:height); a{ float:left; width:16%; height:.74rem; line-height:.74rem; text-align:center; &:nth-child(6n+1){ margin-left:2%; } } } /*video*/ .videoArea{ height:3.6rem; background:rgba(0,0,0,1); video{ width:100%; height:100%; } } /*match info*/ .matchInfo{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: extract(@cL,4); padding:.3rem; height:2.04rem; overflow:hidden; .top{ height:.6rem; line-height:.6rem; .home,.away{ float:left; width:34%; img{ display:inline-block; width:.64rem; height:.6rem; } span{ display:inline-block; font-size:.4rem; vertical-align:top; } } .home{ span{ margin-left:.24rem; } } .time{ float:left; width:32%; font-size:.24rem; color:extract(@cL,2); text-align:center; } .away{ text-align:right; span{ margin-right:.24rem; } } } .middle{ position: relative; margin:.2rem auto; height:.04rem; background:extract(@cL,5); span{ position:absolute; top:0; left:0; width:0; height:.04rem; background:extract(@cL,6); .transition(@duration:.5s); } } .bottom{ height:.4rem; line-height:.4rem; text-align: center; span{ float:left; width:34%; font-size:.24rem; color:extract(@cL,2); } .type{ width:32%; } .home{ background:url('@{url}/support-left.png') no-repeat left center; background-size:.24rem; &.bg{ color:extract(@cL,6); background:url('@{url}/support-red.png') no-repeat left center; background-size:.24rem; } } .away{ background:url('@{url}/support-right.png') no-repeat right center; background-size:.24rem; &.bg{ color:extract(@cL,5); background:url('@{url}/support-blue.png') no-repeat left center; background-size:.24rem; } } } } /*match list*/ .matchList{ box-sizing:border-box; width:100%; padding:.2rem .3rem; background:extract(@cL,4); overflow:hidden; li{ float:left; margin-right:.2rem; width:2.2rem; div{ position:relative; width:100%; height:1.24rem; img{ width:100%; height:100%; } span{ position:absolute; right:0; bottom:0; padding:.08rem; height:.31rem; color:extract(@cL,4); background:rgba(0,0,0,0.2); } } &.bg{ color:extract(@cL,6) } p{ font-size:.24rem; line-height:.3rem; } } } }
index.js
//REM ~function(){ var desW = 640, winW = document.documentElement.clientWidth || document.body.clientWidth; if(winW>desW){ $('.main').css('width',desW); return; } document.documentElement.style.fontSize = winW / desW*100+'px'; }() //HEADER ~function(){ var $header = $('.header'), $menu = $header.find('.menu'), $nav = $header.children('.nav'); $menu.tap(function(){ if($(this).attr('isBlock')==='true'){ $nav.css({ height:'0' }) var timer = window.setTimeout(function(){ $nav.css({ padding:'0' }) window.clearTimeout(timer); },300) $(this).attr('isBlock',false); return; } $nav.css({ padding:'.1rem 0', height:'2.22rem' }) $(this).attr('isBlock',true); }) }() //match info var matchRender = (function(){ var $matchInfo = $('.matchInfo'), $matchInfoTemplate = $('#matchInfoTemplate'); function bindEvent(){ //获取本地存储的信息，判断是否有支持 var support = localStorage.getItem('support'); if(support){ support = JSON.parse(support); if(support.isTap){ $bottom.attr('isTap',true); support.type==1?$bottomLeft.addClass('bg'):$bottomRight.addClass('bg'); } } $matchInfo.tap(function(ev){ var tar = ev.target, tarTag = tar.tagName, tarP = tar.parentNode, $tar = $(tar), $tarP = $tar.parent(), tarInn = $tar.html(); if(tarTag==='SPAN' && tarP.className==='bottom'){ var $bottom = $matchInfo.children('.bottom'), $bottomLeft = $bottom.children('.home'), $bottomRight = $bottom.children('.away'); if(tar.className==='type') return; if($bottom.attr('isTap')==='true') return; $tar.html(parseFloat(tarInn)+1).addClass('bg'); //重新计算计算进度条 $matchInfo.children('.middle').children('span').css('width',(parseFloat($bottomLeft.html())/(parseFloat($bottomLeft.html())+parseFloat($bottomRight.html())))*100+'%'); //告诉浏览器支持的是谁 $.ajax({ url:'xxx.html&type='+$tar.attr('type'), dataType:'jsonp' }) //只能点击一次 $bottom.attr('isTap',true); localStorage.setItem('support',JSON.stringify({ "isTap":true, "type":$tar.attr('type') })) } }) } function bindHTML(matchInfo){ $matchInfo.html(ejs.render($matchInfoTemplate.html(),{matchInfo:matchInfo})); //控制进度条:定时器是给HTML页面一定的渲染时间 window.setTimeout(function(){ var leftNum = parseFloat(matchInfo.leftSupport), rightNum = parseFloat(matchInfo.rightSupport); $matchInfo.children('.middle').children('span').css('width',(leftNum/(leftNum+rightNum))*100+'%'); },500) bindEvent(); } return { init:function(){ //GET PATH $.ajax({ url:'xxx.url', dataType:'jsonp', success:function(result){ if(result && result[0]==0){ result=result[1]; var matchInfo = result['matchInfo']; matchInfo['leftSupport'] = result['leftSupport']; matchInfo['rightSupport'] = result['rightSupport']; //bind html bindHTML(); } } }) } } })() matchRender.init(); //match list var matchListRender = (function(){ var $matchList = $('.matchList'), $matchListUL = $matchList.children('ul'), $matchListTemplate = $('#matchListTemplate'); function BindHTML(matchList){ $matchListUL.html(ejs.render($matchListTemplate.html(),{matchList:matchList})).css('width',parseFloat(document.documentElement.style.fontSize)*2.4*matchList.length+'px'); //实现局部滚动 new IScroll('.matchList',{ scrollX:true, scrollY:false, click:true }) } return{ init:function(){ $.ajax({ url:'xxx.url', dataType:'jsonp', success:function(result){ if(result && result[0]==0){ result = result[1]['stats']; var matchList = null; $.each(result,function(index.item){ if(item['type']==9){ matchList = item['list']; return false; } }) //Bind html BindHTML(matchList); } } }) } } })() matchListRender.init();
