第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>运行效果：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-03-06 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
容器服务
腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。
腾讯云开发者
