第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">更多&gt;&gt;</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>

运行效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏码农阿宇

JustMock .NET单元测试利器(三)用JustMock测试你的应用程序

用JustMock测试你的应用程序 本主题将指导您通过几个简单的步骤来使用Telerik®JustMock轻松测试您的应用程序。您将理解一个简单的原理,称为Ar...

3787
来自专栏Java成神之路

Java企业微信开发_07_JSSDK多图上传

 所有的JS接口只能在企业微信应用的可信域名下调用(包括子域名),可在企业微信的管理后台“我的应用”里设置应用可信域名。这个域名必须要通过ICP备案,不然jss...

1962
来自专栏Java编程技术

FutureTask 原理

如上代码主线程会在futureTask.get()出阻塞直到task任务执行完毕,并且会返回结果。

1021
来自专栏Android 开发学习

JsBridge 源码分析

1853
来自专栏腾讯数据库技术

时间精度引起MySQL主从不一致问题剖析

1. 主从数据不一致          近日接报某实例一个datetime字段主从数据不一致,其它数据暂未发现异常。第一反应可能是人为修改,如果用户有高权限帐...

3092
来自专栏xingoo, 一个梦想做发明家的程序员

【插件开发】—— 9 编辑器代码分块着色-高亮显示!

前文回顾: 1 插件学习篇 2 简单的建立插件工程以及模型文件分析 3 利用扩展点,开发透视图 4 SWT编程须知 5 SWT简单控件的使用与布局搭...

2906
来自专栏微信公众号:Java团长

Java高级特性——注解,这也许是最简单易懂的文章了

博主在初学注解的时候看到网上的介绍大部分都是直接介绍用法或者功能,没有实际的应用场景,篇幅又很长导致学习的时候难以理解其意图,而且学完就忘QAQ。本篇文章中我将...

963
来自专栏菩提树下的杨过

Silverlight:获取ContentTemplate中的命名控件

项目开发中遇到一个要求,需要将ComboBox右侧中的小三角箭头给去掉,通过Blend工具“编辑ComboBox的模板副本”得知,这是一个名为"BtnArrow...

2198
来自专栏编码小白

tomcat请求处理分析(六)servlet的处理过程

1.1.1.1  servlet的解析过程 servlet的解析分为两步实现,第一个是匹配到对应的Wrapper,第二个是加载对应的servlet并进行数据,这...

7217
来自专栏开发技术

flying-saucer + iText + Freemarker实现pdf的导出, 支持中文、css以及图片

      项目中有个需求,需要将合同内容导出成pdf。上网查阅到了 iText , iText 是一个生成PDF文档的开源Java库,能够动态的从XML或者数...

3951

扫码关注云+社区

领取腾讯云代金券