面向对象实战案例成老师一

面向对战第一节模教学目实现首页基础架涉及知识无相关代CSSCSS-*{margin:0auto;padding:0;list-style:none;border:0;text-align:center;}body{background:url(baidu/bg.jpg);-webkit-background-size:cover;background-size:cover;}.logo{margin-top:30px; y:.links{width:740px;margin:0.linksa{color:#fff;margin-right:.search{margin-bottom:40px;margin-top:.searchinput{width:537px;height:.searchbutton{width:104px;height:.container{width: {width:80px;height:318px;float:left;background: span{width:80px;height:35px;line-height:35px;color:#fff;dis y:inline-block;font-weight:bold;font-size:14px;} span.choose{background:rgba(255,255,255,0.6) .card{width:813px;height:318px;float:right;background:rgba(255,255,255,0.6);.card.main{padding:HTML<imgclass="logo"width="270"src="baidu/logo_white.png"<p<a " <a<a<a<a<a<a<a<a<a<a<atarget="_blank">网页target="_blank">贴吧target="_blank">知道</a>"target="_blank">音乐</a>""target="_blank">地图"target="_blank">百科</a>target="_blank">文库</a>/more/"<div<input 一下<div<div <span>导航<spanclass="choose">音乐 <divid="card"class="card"><div效果教学步20时间点1总搭建基础页面为后面课程做准第二教学目以面向对象编程方式完成首页星座设置层效涉及知识createICDformateStringICDtrimICDtoggleClassICDaddClassICDremoveClassICDhasClassICD相关代CSSCSS-.xingzuo{padding:margin-right:30px;margin-bottom:25px;cursor:pointer;width:170px;height:52px;float:left;position:relative;}.no-mr{margin-right:float:left;width:52px;height:background:url('xingzuo/xingzuo.png')no-repeat0}width:115px;height:border:2pxsolid#f1f1f1;border-left:none;float:left;padding-top:6px;}.descriptionpadding-left:8px;width:90px;height:18px;line-height:18px;color:#222;text-align:} y:}.selectedposition:absolute;top:0;right:0;width:30px;height:background:url('xingzuo/xingzuo.png')no-repeat0-624px; y:block;}.is-hover.description{border-color:#389CFF;border-width:2px;}.num-0background-position:0}.num-1background-position:0-}.num-2background-position:0-}.num-3background-position:0-}.num-4background-position:0-}.num-5background-position:0-}.num-6background-position:0-}.num-7background-position:0-}.num-8background-position:0-}.num-9background-position:0-}.num-10background-position:0-}.num-11background-position:0-}HTML<divclass="card"><divJavascriptvardata={}}name:'双子座}}} }}}}}}}varXingzuo=function(data,num){this.data=data;varhasMargin=num%4==3?'no-mr':this.dom=$.create('div').addClass('itemnum-'+num+this.numthis.num=num;}Xtotype={init:function(){},create: class="name">@(name)</p><pclass="time">@(time)</p><divclass="mark"></div></div>';this.dom.html($.formateString(html,this.data),},bindEvent:function(){varthat=this;that.dom.on('click',function(e){}).on('mouseenter',function(e){}).on('mouseleave',function(e){}}for(vari=0,len=data.length;i<len;i++){newXingzuo(data[i],i);}效果教学步550510101010时间点2总实现星座卡片，积累框架方第三教学目涉及知识无相关代CSSCSS-body,html,font-family:arial,'HiraginoSansGB','Tahoma,Arial,Helvetica,STHeiti;}width:218px;height:294px;float:right;margin:30px00}.yinyuepadding-bottom:9px;font-size:18px;color:#222;height:line-height:24px;padding-left:24px;font-weight:normal;text-align:left;}.yinyuea,.yinyueaYahei'微软雅黑','宋体',\ y:block;width:90px;height:30px;}.yinyuefloat:margin-right:16px;cursor:pointer;-webkit-transition:color-o-transition:color-ms-transition:-moz-transition:}.yinyueabackground:url(yinyue/fm.png)no-repeat00;text-indent:25px;font-size:14px;line-height:30px;text-align:left;}.yinyuetext-decoration:none;color:#0079f5;}.yinyue.item-0background-position:-276px-}.yinyue.item-1background-position:-378px-}.yinyuea.parsebackground-position:-276px-}.yinyuea.choosebackground:url(yinyue/fm_go.gif)no-repeat9px}.yinyuea.choose{color:#fff;background:}vardata='私人频道'红心频道'随便听听'欧美'经典老歌'DJ舞曲'热歌'网络红歌'成名曲'火爆新歌'流行'快乐旋律'KTV金曲'伤感调频'80后'90后

JavascriptvarYinyue=function(container,data){this.container=container;this.data=data;}Ytotype={init:create:varstr'<h2>热门频道 for(vari=0,len=this.data.length;i<len;i++){str+=$.formateString(description,{num:title:}$(this.container).html('<divclass="yinyue">'+str+bindEvent:$(this.container+'a').on('click',$(this.container+'}}newYinyue('#card',效果教学步分钟绑定音乐卡片时间点1总第四节教学目以面向对象编程方式完成卡片制涉及知识getICDTargetICD框架方法，获取ICD包装后的switchcase相关代CSSCSS-width:250px;height:318px;float:right;}width:230px;height:130px;position:relative;overflow:margin:54px12px0}.looperwidth:230px;height:130px;overflow:hidden;}.looper.viewerimg{border:none;}.looperposition:absolute;width:16px;height:28px;top:45px;overflow:hidden;cursor:pointer;background:url(worldcup/sprite.png)no-repeat00; y:none;}.looper y:inline-left:5px;background-position:2px}.looperbackground-position:-33px}right:5px;background-position:-17px-}.looper.arrow.next:hover{background-position:-52px-2px;}.looper.mask,.looper.title{width:100%;height:27px;position:absolute;bottom:0;left:}.looperbackground:opacity:filter:}.looper.titlepadding-left:10px; y:block;font:14px/27px text-decoration:none;color:#e6e6e6;letter-spacing:1px;width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left;margin:0;}.looperposition:absolute;height:10px;width:55px;right:2px;bottom:7px;overflow:hidden;line-height:10px;cursor:pointer;}.looper.dotwidth:5px;height:5px;float:left;background:#fff;margin:02px;overflow:hidden;border:1pxsolid}.looper.dota:hover,.looper.dota.choose{background:none;}margin:8px12px00;width:230px;}.yunerbackground:url(worldcup/bg.png)repeat-x;height:90px;position:}.yuner.viewera{position:absolute;color:#fff;font-size:text-decoration:}.yunerborder-top:2pxsolid#459467;background:#377f56;height:24px;font-size:12px;line-height:24px;text-align:}.yuner.linkborder-left:2pxsolidrgba(72,152,106,.7);color:#e4f4eb;padding-left:4px;margin-right:}.yuner.linka.is-start{border-left:}HTML<divid="worldcup"<divid="looper"<divid="yuner"JavascriptvarlooperData={img:title:PK}img:title:4-0大胜葡萄牙}img:title: 热 榜}img:title:金妍儿力挺韩国队}img:title: 超级大富翁}yunerData={title:首个帽子戏法}title:不满裁判竖双指}title:德迷李宇春}title:'29秒最快进球}title:德国更衣室合影}title:佩佩挑衅}varLooper=function(data){this.data=data;this.num=0;this.length=data.length;}Ltotype={init:create:function(){varlooper='<divclass="viewer">','<ahidefocus>','<imgwidth="230"height="130"src="worldcup/@(img)">','<ahidefocusclass="arrow'<ahidefocusclass="arrowshownext"></a>','<divclass="mask"></div>','<p'<ahref="#"hidefocus>@(title)</a>','<div'<ahidefocusclass="choose"data-order="0"></a>','<ahidefocusdata-order="1"></a>','<ahidefocusdata-order="2"></a>','<ahidefocusdata-order="3"></a>','<ahidefocusdata-bindEvent:function(){varthat=this;$('#looper.dota').on('mouseover',function(e){that.num=$.getICDTarget(e).attr('data-order');$('#looper.pre').on('click',function(e){$('#looper.next').on('click',function(e){change:$('#looper.viewerimg').attr('src','worldcup/'+$('#looper.title$('#looper.dotvarchooseBtn=$('#looper.dotif(this.num>=this.length-1){$('#looper$('#looper}if(this.num<=$('#looper$('#looper}}}newvarYun=function(dom,dir,top,left){this.dom=dom;this.dirdir;true向下falsethis.top=top;this.left=left;this.fontSize=16;this.zIndex=this.opacity=1;}height:90,speed:init:$(this.dom).css('top',$(this.dom).css('left',this.left+'px');loop:function(){move:function(){this.top+=this.top-=}if(this.top<=0){this.dir=true;}if(this.top>72){this.dir=false;}vart=parseInt(this.top/5);casecasethis.fontSize=this.dir?11:10;this.zIndex=this.dir?1:0;this.opacity=this.dir?0.5:(t==13?0.3:0);casecasethis.fontSize=this.dir?12:10;this.zIndex=this.dir?2:0;this.opacity=this.dir?0.6:(t==12?0.3:0);casecasethis.fontSize=this.dir?13:10;this.zIndex=this.dir?3:0;this.opacity=this.dir?0.7:(t==11?0.3:case4:casethis.fontSize=this.dir?14:10;this.zIndex=this.dir?4:0;this.opacity=this.dir?0.8:(t==10?0.2:0.1);casecasethis.fontSize=this.dir?15:10;this.zIndex=this.dir?5:0;this.opacity=this.dir?0.9:(t==9?0.2:0.1);casecasecasethis.fontSize=this.dir?16:10;this.zIndex=this.dir?6:0;this.opacity=this.dir?1:0.2;casecasethis.fontSize=this.zIndex=this.opacity=this.dir?0.4:(t==14?0.3:}draw:fontSize:this.fontSize+'px',zIndex:this.zIndex,opacity:this.opacity,top:this.top+'px'}}varYuner=function(data){this.data=data;this.length=data.length;this.timeBar=null;this.doms=[];}Ytotype={init:function(){create:function(){vary