]]>
msn的效果截?br />
全部是js实现的，效果q不错，可以IE7Qff3QChrome上正常运?q里是demo[查看]
其中使用了jquery1.3.2[下蝲]Qjquery.cycle.all.js[下蝲] 所有文件在q里[下蝲]
1 body {
2 font-family: Arial, Helvetica, sans-serif;
3 font-size: 12px;
4 font-style: normal;
5 line-height: normal;
6 font-weight: normal;
7 }
8 .clear{
9 clear:both;
10 height:0px;
11 }
12 .hot {
13 background-color: #F7F7F7;
14 height: 227px;
15 width: 302px;
16 border: 1px solid #DEDEDE;
17 padding-right:5px;
18 }
19
20 .hot_pic {
21 height: 190px;
22 width: 250px;
23 padding: 0;
24 margin: 0;
25 float:left;
26 clear:left;
27 }
28
29 .hot_pic img {
30 background-color: #eee;
31 width: 240px;
32 height: 180px;
33 top: 0;
34 left: 0 ;
35 padding: 5px;
36 }
37 .hot_thumb{
38 float:right;
39 clear:right;
40 height:190px;
41 width:52px;
42 }
43 .hot_thumb a { width: 52px; height:48px; display: block;padding-top:0px;margin-top:0px;}
44 .hot_thumb a.activeSlide {
45 background-image: url(activeSlide.png);
46 }
47 .hot_thumb a:focus { outline: none; }
48 .hot_thumb img { border: none; margin-top:4px;margin-right:4px;margin-bottom:4px;margin-left:8px;}
49
50 .hot_title p{margin:0 0;line-height:18px;padding-left:5px;}
51
2 font-family: Arial, Helvetica, sans-serif;
3 font-size: 12px;
4 font-style: normal;
5 line-height: normal;
6 font-weight: normal;
7 }
8 .clear{
9 clear:both;
10 height:0px;
11 }
12 .hot {
13 background-color: #F7F7F7;
14 height: 227px;
15 width: 302px;
16 border: 1px solid #DEDEDE;
17 padding-right:5px;
18 }
19
20 .hot_pic {
21 height: 190px;
22 width: 250px;
23 padding: 0;
24 margin: 0;
25 float:left;
26 clear:left;
27 }
28
29 .hot_pic img {
30 background-color: #eee;
31 width: 240px;
32 height: 180px;
33 top: 0;
34 left: 0 ;
35 padding: 5px;
36 }
37 .hot_thumb{
38 float:right;
39 clear:right;
40 height:190px;
41 width:52px;
42 }
43 .hot_thumb a { width: 52px; height:48px; display: block;padding-top:0px;margin-top:0px;}
44 .hot_thumb a.activeSlide {
45 background-image: url(activeSlide.png);
46 }
47 .hot_thumb a:focus { outline: none; }
48 .hot_thumb img { border: none; margin-top:4px;margin-right:4px;margin-bottom:4px;margin-left:8px;}
49
50 .hot_title p{margin:0 0;line-height:18px;padding-left:5px;}
51
1 <script type="text/javascript" >
2 $(document).ready(function(){
3
4 /*使用服务器端生成代码,id要与后面的class="hot_pic"内的囄对应*/
5 /*也可以可以JSON*/
6 var data = [];
7 data['img_4'] ={'news_title':'京地?L奛_工媲?#8220;I姐”','news_abs':'首末车时间确定，8月邀沿线居民试乘','news_url':'http://msn.china.ynet.com/view.jsp?oid=53769752'};
8 data['img_3'] ={'news_title':'周迅全智贤惊艛_黎时装周','news_abs':'两美奛_选黑色小C服Q周q红唇抢?,'news_url':'http://msn.ent.ynet.com/view.jsp?oid=53794257'};
9 data['img_1'] ={'news_title':' 黄志忠做客MSN星月对话(视频)','news_abs':' l典杨立仁，直播现场表演天|快板','news_url':'http://info.msn.com.cn/interview_subject/33718.shtml'};
10 data['img_2'] ={'news_title':' 令h惊叹的野生世?,'news_abs':' 五色鸟守着巢穴Q美zvLd','news_url':'http://msn.tech.ynet.com/pic.jsp?oid=53794462'};
11
12 /*使用jQuery Cycle Plugin*/
13 $('.hot_pic').cycle({
14 fx: 'fade',
15 pause: 1 ,
16 pager: '.hot_thumb',
17 pagerAnchorBuilder: function(idx, slide) {
18 return '<a href="#"><img src="' + slide.src + '" width="40px" height="40px" /></a>';
19 },
20 before:function onAfter() {
21 $('.hot_title').html('<p style="font-weight:bold;"><a href="' + data[this.id].news_url + '">' + data[this.id].news_title + '</a></string></p><p>' + data[this.id].news_abs + '[<a href="' + data[this.id].news_url+ '">详细</a>]</p>');
22 }
23 });
24
25 });
26 </script>
2 $(document).ready(function(){
3
4 /*使用服务器端生成代码,id要与后面的class="hot_pic"内的囄对应*/
5 /*也可以可以JSON*/
6 var data = [];
7 data['img_4'] ={'news_title':'京地?L奛_工媲?#8220;I姐”','news_abs':'首末车时间确定，8月邀沿线居民试乘','news_url':'http://msn.china.ynet.com/view.jsp?oid=53769752'};
8 data['img_3'] ={'news_title':'周迅全智贤惊艛_黎时装周','news_abs':'两美奛_选黑色小C服Q周q红唇抢?,'news_url':'http://msn.ent.ynet.com/view.jsp?oid=53794257'};
9 data['img_1'] ={'news_title':' 黄志忠做客MSN星月对话(视频)','news_abs':' l典杨立仁，直播现场表演天|快板','news_url':'http://info.msn.com.cn/interview_subject/33718.shtml'};
10 data['img_2'] ={'news_title':' 令h惊叹的野生世?,'news_abs':' 五色鸟守着巢穴Q美zvLd','news_url':'http://msn.tech.ynet.com/pic.jsp?oid=53794462'};
11
12 /*使用jQuery Cycle Plugin*/
13 $('.hot_pic').cycle({
14 fx: 'fade',
15 pause: 1 ,
16 pager: '.hot_thumb',
17 pagerAnchorBuilder: function(idx, slide) {
18 return '<a href="#"><img src="' + slide.src + '" width="40px" height="40px" /></a>';
19 },
20 before:function onAfter() {
21 $('.hot_title').html('<p style="font-weight:bold;"><a href="' + data[this.id].news_url + '">' + data[this.id].news_title + '</a></string></p><p>' + data[this.id].news_abs + '[<a href="' + data[this.id].news_url+ '">详细</a>]</p>');
22 }
23 });
24
25 });
26 </script>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>囄切换</title>
6 <link href="index.css" rel="stylesheet" type="text/css" />
7 <script type="text/javascript" language="JavaScript" src="jquery.js"></script>
8 <script type="text/javascript" language="JavaScript" src="jquery.cycle.all.js"></script>
9 <script type="text/javascript" >
10 $(document).ready(function(){
11
12 /*使用服务器端生成代码,id要与后面的class="hot_pic"内的囄对应*/
13 /*也可以可以JSON*/
14 var data = [];
15 data['img_4'] ={'news_title':'京地?L奛_工媲?#8220;I姐”','news_abs':'首末车时间确定，8月邀沿线居民试乘','news_url':'http://msn.china.ynet.com/view.jsp?oid=53769752'};
16 data['img_3'] ={'news_title':'周迅全智贤惊艛_黎时装周','news_abs':'两美奛_选黑色小C服Q周q红唇抢?,'news_url':'http://msn.ent.ynet.com/view.jsp?oid=53794257'};
17 data['img_1'] ={'news_title':' 黄志忠做客MSN星月对话(视频)','news_abs':' l典杨立仁，直播现场表演天|快板','news_url':'http://info.msn.com.cn/interview_subject/33718.shtml'};
18 data['img_2'] ={'news_title':' 令h惊叹的野生世?,'news_abs':' 五色鸟守着巢穴Q美zvLd','news_url':'http://msn.tech.ynet.com/pic.jsp?oid=53794462'};
19
20 /*使用jQuery Cycle Plugin*/
21 $('.hot_pic').cycle({
22 fx: 'fade',
23 pause: 1 ,
24 pager: '.hot_thumb',
25 pagerAnchorBuilder: function(idx, slide) {
26 return '<a href="#"><img src="' + slide.src + '" width="40px" height="40px" /></a>';
27 },
28 before:function onAfter() {
29 $('.hot_title').html('<p style="font-weight:bold;"><a href="' + data[this.id].news_url + '">' + data[this.id].news_title + '</a></string></p><p>' + data[this.id].news_abs + '[<a href="' + data[this.id].news_url+ '">详细</a>]</p>');
30 }
31 });
32
33 });
34 </script>
35 </head>
36
37 <body>
38 <div class="hot">
39 <div class="hot_pic">
40 <img id="img_1" src="1.jpg" width="240" height="180" />
41 <img id="img_2" src="2.jpg" width="240" height="180" />
42 <img id="img_3" src="3.jpg" width="240" height="180" />
43 <img id="img_4" src="4.jpg" width="240" height="180" />
44 </div>
45 <div class="hot_thumb"></div>
46 <div class="clear"></div>
47 <div class="hot_title">
48 </div>
49 </div>
50 </body>
51 </html>
52
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>囄切换</title>
6 <link href="index.css" rel="stylesheet" type="text/css" />
7 <script type="text/javascript" language="JavaScript" src="jquery.js"></script>
8 <script type="text/javascript" language="JavaScript" src="jquery.cycle.all.js"></script>
9 <script type="text/javascript" >
10 $(document).ready(function(){
11
12 /*使用服务器端生成代码,id要与后面的class="hot_pic"内的囄对应*/
13 /*也可以可以JSON*/
14 var data = [];
15 data['img_4'] ={'news_title':'京地?L奛_工媲?#8220;I姐”','news_abs':'首末车时间确定，8月邀沿线居民试乘','news_url':'http://msn.china.ynet.com/view.jsp?oid=53769752'};
16 data['img_3'] ={'news_title':'周迅全智贤惊艛_黎时装周','news_abs':'两美奛_选黑色小C服Q周q红唇抢?,'news_url':'http://msn.ent.ynet.com/view.jsp?oid=53794257'};
17 data['img_1'] ={'news_title':' 黄志忠做客MSN星月对话(视频)','news_abs':' l典杨立仁，直播现场表演天|快板','news_url':'http://info.msn.com.cn/interview_subject/33718.shtml'};
18 data['img_2'] ={'news_title':' 令h惊叹的野生世?,'news_abs':' 五色鸟守着巢穴Q美zvLd','news_url':'http://msn.tech.ynet.com/pic.jsp?oid=53794462'};
19
20 /*使用jQuery Cycle Plugin*/
21 $('.hot_pic').cycle({
22 fx: 'fade',
23 pause: 1 ,
24 pager: '.hot_thumb',
25 pagerAnchorBuilder: function(idx, slide) {
26 return '<a href="#"><img src="' + slide.src + '" width="40px" height="40px" /></a>';
27 },
28 before:function onAfter() {
29 $('.hot_title').html('<p style="font-weight:bold;"><a href="' + data[this.id].news_url + '">' + data[this.id].news_title + '</a></string></p><p>' + data[this.id].news_abs + '[<a href="' + data[this.id].news_url+ '">详细</a>]</p>');
30 }
31 });
32
33 });
34 </script>
35 </head>
36
37 <body>
38 <div class="hot">
39 <div class="hot_pic">
40 <img id="img_1" src="1.jpg" width="240" height="180" />
41 <img id="img_2" src="2.jpg" width="240" height="180" />
42 <img id="img_3" src="3.jpg" width="240" height="180" />
43 <img id="img_4" src="4.jpg" width="240" height="180" />
44 </div>
45 <div class="hot_thumb"></div>
46 <div class="clear"></div>
47 <div class="hot_title">
48 </div>
49 </div>
50 </body>
51 </html>
52
]]>
~写q篇博文有几个目的：
首先认识了两个单?br />
latitude
[lat·i·tude || 'lætɪtuːd /-tjuːd]
n. U度; 回旋余地, 自由; U度地区
longitude
[lon·gi·tude || 'lɑndʒɪtuːd /'lɒndʒɪtjuːd]
n. l度; l线
1.学习dom4j的简单用?br /> 2.做一个方便用的全国城市l纬度数据库
3.利用google天气api做一个全面的天气预报服务
4.学习用python~写webservice
内容Q?br /> 1.学习dom4j的简单用?br /> 攉了的l纬度都是按照城市分开的单独的htm文gQ我已经处理qؓW合html4.0标准的html文g了，x有的标识都是成对的，q里可以下蝲q些文g(点击下蝲l纬度html?
(1)如何使用dom4jdxml文档
使用dom4jdxml文档代码片段(2)如何遍历xml文档的所有结?br /> q样p入了q个xml文档Qƈ获得了这个xml文档对象的根l点Q由于xml文档是一个树形结构，q样很Ҏ遍历它所有的l点了?br /> q里Ҏ自己的需要，试使用了两U遍历方法，一U是Ҏ树的l构~写递归E序Q一U就是直接用@环，q有都dom4j自带的visitor模式讉K也很好用Q这里有参考文档，可以看看(查看)
使用递归遍历q里提供的xml文档层数?Q直接@环即?br />
直接循环遍历关于visitor模式的用，请参看上面给出的参考文?br />
(3)创徏新的xml文档
创徏xml文档整个合ƈ所有htmlؓ一个xml的代码如?br />
完整的代?/span>2.做一个方便用的全国城市l纬度数据库
l过上面的操作，一个完整的全国城市l纬度数据库做好了Q只不过它是xml格式的，看v来还不错Q?a title="下蝲q个数据? href="/Files/canvas/GI-China.zip">下蝲q个数据?/a>
生成的xml展示3.利用google天气api做一个全面的天气预报服务
google提供的天气api可以有两U方式访问，
一U是
http://www.google.com/ig/api?hl=zh-cn&weather=,,,30670000,104019996
30670000为纬度，104019996为经度，q个是把上面的xml中的l纬度乘以了10^6(10的六ơ方)Q这个方法有个好处，是可以Ҏl纬度获得天气预报，自然预报地区也可变得_?br /> 另一U是
http://www.google.com/ig/api?weather=Beijing
q个链接比较单，但是支持的城市比较少Q所以还是用第一U方式比较好Q于是才整理好了所有城市的l纬?br />
讉K上面的链接，googleq回的xml内容看v来是q样?br />
googleq回的xml对于q回的xml中的<icon data="/images/weather/cn_cloudy.gif"/>Q可以这h造链接获取google提供的图?br /> 取其中的cn_cloudy.gifQ然后放在http://www.google.cn/ig/images/weather/之后Q生成的链接?br /> http://www.google.cn/ig/images/weather/cn_cloudy.png
q样q个天气api基本构思好?br />
4.学习用python~写webservice(待箋……)
这个服务编写ؓ一个webserviceQ决定用pythondQ所以要学习一下python?br />
]]>
1
<script language="JavaScript">2
function nst_convert_all(tinput)3
{
4
if(tinput.value==""){
5
return;6
}7
var ms = tinput.value.replace(/[^\d\.]/g,"").replace(/(\.\d{2}).+$/,"$1").replace(/^0+([1-9])/,"$1").replace(/^0+$/,"0");8
tinput.value = ms;9
}10
</script>1 <input type=“text” style="width:120px" onkeyup="nst_convert_all(this)"/>
]]>
打造过E?
前天甌的BlogJava,感觉很不错，看看后台Q发现可以通过修改CSS改变自己博客的面貌?cnblog上有有比较好的costom的模板，可在BlogJava里我却没有找到这个模ѝ系l里已经自带了很多模板了Q都很漂亮，但是自己q是喜欢那种oracle数据库帮助文档那U样式的面Q在后台选了个最接近自己x的模板cogitation,然后开始这ơ改造工E?br /> 大侠们见谅，以下部分没有什么内涵，都是一些干完体力活后发的牢?br /> 如果你还想l往下看Q请保你已l成功安装了IE Developer览器插件?br /> 打开自己的BlogJava首页Q可以看到自己选的模板已经生效了，先用IE Developer查看一下自己首늚l构吧，很简单，一目了然。想起了后台可以自己用HTML定义面的头部和NQ这个太好了Q直接把原先的页面头和尾设ؓ不显C?css代码如下Q?br />
#footer{display:none;}#top {display:none;}<table width="100%" height="60" border="0" cellpadding="0" cellspacing="0" > <tr> <td valign="middle" id="canvasHeader"> <h3>Canvas</h3> <p>U极且具有忧患意识的?在每一ơ忧患中都会看到Z,q且在每个机会中也都会看到某U忧?<p> </td> <td><img src="/images/blogjava_net/canvas/logo.gif" alt="logo" width="130" height="45" align="right" /></td> </tr></table><div id="canvasNav"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="right"> <tr> <td><table height="20" border="0" cellpadding="0" cellspacing="0" > <tr> <td width="100" align="center"><a href="http://www.aygfsteel.com/canvas/">首页</a></td> <td width="100" align="center"><a href="http://www.aygfsteel.com/canvas/admin/EditPosts.aspx?opt=1" >新随W?/span></a></td> <td width="100" align="center"><a href="http://www.aygfsteel.com/canvas/rss" >聚合<img src="http://www.aygfsteel.com/images/xml.gif" style="border-width:0px;" /></a></td> <td width="100" align="center"><a href="http://www.aygfsteel.com/canvas/contact.aspx?id=1" >联系</a></td> <td width="100" align="center"><a href="http://www.aygfsteel.com/canvas/admin/EditPosts.aspx" >理</a></td> </tr></table></td> </tr> <tr > <td background="/images/blogjava_net/canvas/hr.gif" height="4"></td> </tr></table></div><div><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td background="/images/blogjava_net/canvas/hr.gif" height="4"></td> </tr> <tr> <td align="center" id="canvasfooter"> <img src="/images/blogjava_net/canvas/bottom.gif" alt="canvas" width="80" height="25" /><br /> <a href="http://elgnaw.cn/">Copyright © Canvas Wong</a> <a href="mailto:canvas.wong@gmail.com">Contact me</a> </td> </tr></table></div>接下来就是用IE develop导出面cssQ然后自׃Ҏ自己惌的样子，再放回『通过css定制面』中d可?br /> 看到留言框内有个googleq告Q通过后台可以Lq个q告Q但是会留下一个iframe框，不知道你那是不是也这栗仔l看了一下留a面代码Q用这Dcss代码把iframe讄Z昄:
iframe{display:none;}ȝ:右键->查看源代?原模板的东西都在Q只是没有显C出来，p弄一下看客的眼睛而已?/p>
找一个自己喜Ƣ的模板Q将它打造得面目全非吧?/p>