第185天：百度星座案例
一、百度星座案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style type="text/css"> 8 *{margin: 0 auto;padding: 0;list-style: none;border: 0; text-align: center;} 9 body{background: url(baidu/bg.jpg); -webkit-background-size: cover; 10 background-size: cover;} 11 .logo{margin-top: 30px; display: block;} 12 .links{width: 740px; margin: 0 auto;} 13 .links a{color: #fff; margin-right: 10px;} 14 .search{margin-bottom: 40px; margin-top: 10px;} 15 .search input{width: 537px; height: 40px;} 16 .search button{width: 104px; height: 40px;} 17 .container{width: 911px;} 18 .menu{width: 80px; height: 318px; float: left; background: rgba(0,0,0,0.4);} 19 .menu span{width: 80px; height: 35px; line-height: 35px; color: #fff; display: inline-block; font-weight: bold; font-size: 14px;} 20 .menu span.choose{background: rgba(255,255,255,0.6) url(baidu/menu.png);} 21 .card{width: 813px; height: 318px; float: right; background: rgba(255,255,255,0.6) url(baidu/xingzuo.png);} 22 23 .xingzuo{padding: 20px;} 24 .item{ 25 margin-right: 10px; 26 margin-bottom: 25px; 27 cursor: pointer; 28 width: 170px; 29 height: 52px; 30 float: left; 31 position: relative; 32 } 33 .no-mr{margin-right: 0;} 34 .image{ 35 float: left; 36 width: 52px; 37 height: 52px; 38 background: url('xingzuo/xingzuo.png') no-repeat 0 52px; 39 } 40 .description{ 41 width: 115px; 42 height: 43px; 43 border: 2px solid #f1f1f1; 44 border-left: none; 45 float: left; 46 padding-top: 6px; 47 } 48 .description p{ 49 padding-left: 8px; 50 width: 90px; 51 height: 18px; 52 line-height: 18px; 53 color: #222; 54 text-align: left; 55 } 56 .mark{ 57 display: none; 58 } 59 .selected .mark{ 60 position: absolute; 61 top: 0; 62 right: 0; 63 width: 30px; 64 height: 30px; 65 background: url('xingzuo/xingzuo.png') no-repeat 0 -624px; 66 display: block; 67 } 68 .is-hover .description{ 69 border-color: #389CFF; 70 border-width: 2px; 71 } 72 .num-0 .image{ 73 background-position: 0 0; 74 } 75 .num-1 .image{ 76 background-position: 0 -52px; 77 } 78 .num-2 .image{ 79 background-position: 0 -104px; 80 } 81 .num-3 .image{ 82 background-position: 0 -156px; 83 } 84 .num-4 .image{ 85 background-position: 0 -208px; 86 } 87 .num-5 .image{ 88 background-position: 0 -260px; 89 } 90 .num-6 .image{ 91 background-position: 0 -312px; 92 } 93 .num-7 .image{ 94 background-position: 0 -364px; 95 } 96 .num-8 .image{ 97 background-position: 0 -416px; 98 } 99 .num-9 .image{ 100 background-position: 0 -468px; 101 } 102 .num-10 .image{ 103 background-position: 0 -520px; 104 } 105 .num-11 .image{ 106 background-position: 0 -572px; 107 } 108 </style> 109 <script src="jquery-1.11.3.js"></script> 110 <script src="mine.js"></script> 111 <script src='template.js'></script> 112 <script type="text/javascript"> 113 // 使用对象描述数据 114 var data = [ 115 { 116 name:'白羊座', 117 time:'3.21-4.19' 118 } 119 ,{ 120 name:'金牛座', 121 time:'4.20-5.20' 122 } 123 ,{ 124 name:'双子座', 125 time:'5.21-6.21' 126 } 127 ,{ 128 name:'巨蟹座', 129 time:'6.22-7.22' 130 } 131 ,{ 132 name:'狮子座', 133 time:'7.23-8.22' 134 } 135 ,{ 136 name:'处女座', 137 time:'8.23-9.22' 138 } 139 ,{ 140 name:'天秤座', 141 time:'9.23-10.23' 142 } 143 ,{ 144 name:'天蝎座', 145 time:'10.24-11.22' 146 } 147 ,{ 148 name:'射手座', 149 time:'11.23-12.21' 150 } 151 ,{ 152 name:'摩羯座', 153 time:'12.22-1.19' 154 } 155 ,{ 156 name:'水瓶座', 157 time:'1.20-2.18' 158 } 159 ,{ 160 name:'双鱼座', 161 time:'2.19-3.20' 162 } 163 ]; 164 </script> 165 <script type="text/javascript"> 166 $(function(){ 167 //面向对象编程 封装单个星座的各种操作 168 var Xingzuo=function(data,num){ 169 //数据 170 this.data=data; 171 //单个星座的容器 动态生成div并添加样式 172 this.dom=$('<div></div>').addClass('item num-' +num); 173 //星座编号 174 this.num=num; 175 //定义一个变量保存对象当中的临时变量 176 this.config={ 177 jqueryContainer:$('.xingzuo') 178 }; 179 this.init(); 180 }; 181 Xingzuo.prototype={ 182 init:function(){ 183 this.bindDom(); 184 this.bindEvents(); 185 }, 186 bindDom:function(){ 187 var str='<div class="image"></div>'+ 188 '<div class="description">'+ 189 '<p class="name">{{name}}</p>'+ 190 '<p class="time">{{time}}</p>'+ 191 '<div class="mark"></div>'+ 192 '</div>'; 193 this.dom.html($$.artTemplate(str, this.data)).appendTo(this.config.jqueryContainer); 194 }, 195 bindEvents:function(){ 196 var that=this; 197 this.dom.on('mouseenter',function(){ 198 that.dom.addClass('is-hover'); 199 }); 200 this.dom.on('mouseleave',function(){ 201 that.dom.removeClass('is-hover'); 202 }); 203 this.dom.on('click',function(){ 204 that.dom.toggleClass('selected'); 205 }) 206 } 207 }; 208 209 //实例化12个星座 每次实例化都自动调用init函数 210 for(var i=0,len=data.length;i<len;i++){ 211 new Xingzuo(data[i],i); 212 } 213 }) 214 215 </script> 216 <body> 217 <img class="logo" width="270" src="baidu/logo_white.png" alt=""> 218 <p class="links"> 219 <a href="http://news.baidu.com" target="_blank">新闻</a> 220 <a href="http://www.baidu.com" target="_blank">网页</a> 221 <a href="http://tieba.baidu.com" target="_blank">贴吧</a> 222 <a href="http://zhidao.baidu.com" target="_blank">知道</a> 223 <a href="http://music.baidu.com" target="_blank">音乐</a> 224 <a href="http://image.baidu.com" target="_blank">图片</a> 225 <a href="http://v.baidu.com" target="_blank">视频</a> 226 <a href="http://map.baidu.com" target="_blank">地图</a> 227 <a href="http://baike.baidu.com" target="_blank">百科</a> 228 <a href="http://wenku.baidu.com" target="_blank">文库</a> 229 <a href="http://www.baidu.com/more/" target="_blank">更多>></a> 230 </p> 231 <div class="search"> 232 <input type="text"><button>百度一下</button> 233 </div> 234 <div class="container"> 235 <div class="menu"> 236 <span>导航</span> 237 <span>音乐</span> 238 <span>新闻</span> 239 <span class="choose">星座</span> 240 </div> 241 <div class="card"><div class="xingzuo"></div></div> 242 </div> 243 </body> 244 </html>
链式访问方式
1 <script type="text/javascript"> 2 3 $(function(){ 4 // 面向对象编程 -- 封装单个星座的各种操作 5 var Xingzuo = function(data, num){ 6 /*数据*/ 7 this.data = data; 8 /*单个星座的容器*/ 9 this.dom =$('<div></div>').addClass('item num-' + num); 10 /*星座编号*/ 11 this.num = num; 12 /*定义一个变量保存对象当中的临时变量*/ 13 this.config= { 14 jqueryContainer: $('.xingzuo') 15 } 16 this.init(); 17 }; 18 Xingzuo.prototype = { 19 init : function(){ 20 this.bindDOM(); 21 this.bindEvent(); 22 } 23 ,bindDOM : function(){ 24 var str = '<div class="image"></div>' + 25 '<div class="description">' + 26 '<p class="name">@(name)</p>' + 27 '<p class="time">@(time)</p>' + 28 '<div class="mark"></div>' + 29 '</div>'; 30 this.dom.html($$.formateString(str, this.data), true).appendTo(this.config.jqueryContainer); 31 } 32 ,bindEvent : function(){ 33 var that = this; 34 /*悬浮变色*/ 35 /*以前怎么做？？tab的排他思想：先将所有的设置为默认，然后再将当前设置为选中状态*/ 36 /*现在怎么做*/ 37 /*只考虑单个对象*/ 38 /*单个对象鼠标悬浮：单个对象鼠标离开*/ 39 that.dom.on('mouseenter', function(){ 40 that.dom.addClass('is-hover'); 41 }).on('mouseleave', function(){ 42 that.dom.removeClass('is-hover'); 43 }) 44 45 /*点击*/ 46 that.dom.on('click', function(){ 47 that.dom.toggleClass('selected'); 48 }) 49 } 50 }; 51 52 // 实例化12个星座 -- 每次实例化都自动调用init函数 53 for(var i = 0, len = data.length; i < len; i++){ 54 new Xingzuo(data[i], i); 55 } 56 }) 57 </script>
运行效果：
