会员
周边
众包
新闻
博问
闪存
赞助商
Chat2DB
所有博客
当前博客
我的博客
我的园子
账号设置
会员中心
简洁模式
...
退出登录
注册
登录
博客园
首页
新随笔
联系
订阅
管理
随笔 - 338
文章 - 0
评论 - 1081
阅读 -
228万
微博置顶
要求：
微博置顶,点击链接移动到首条
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>微博置顶 - 豪情</title> <style type="text/css"> *{ margin:0; padding:0;} body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;} table{border-collapse:collapse;border-spacing:0;} li{list-style:none;} fieldset,img{border:0;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} q:before,q:after{content:'';} a:focus,input,textarea{outline-style:none;} input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;} textarea{resize:none} address,caption,cite,code,dfn,em,i,th,var{font-style:normal;font-weight:normal;} legend{color:#000;} abbr,acronym{border:0;font-variant:normal;} a{color:#0a8cd2;text-decoration:none;} a:hover{text-decoration:underline;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-block;} .clearfix{display:block;} .clear{clear:both;height:0;font:0/0 Arial;visibility:hidden;} .none{display:none} /* content */ .wb-wrap{ width:600px;margin:0 auto;min-height:800px;} .wb-list li{ margin:-1px 20px 0; padding:21px 0;border-bottom:1px solid #e6e6e6; clear:both; zoom:1;} .wb-face{ float:left; width:50px;} .wb-detail{ margin-left:65px;} .wb-title-oper{ float:right;} .wb-detail-title{ margin-bottom:10px;} .wb-detail-title h1{ font-size:12px;} .wb-detail-main{ line-height:18px; color:#333;} .wb-detail-bot{ padding-top:15px;} .wb-bot-handle{ float:right;} .wb-bot-handle i{ margin:0 6px 0 8px; color:#aeaeae;font-style:normal; font-weight:normal;} </style> </head> <body> <div class="wb-wrap"> <ul id="wbList" class="wb-list"> <li> <div class="wb-face"> <a href="#" title="HTML5中国"><img src="http://tp4.sinaimg.cn/2357270831/50/5637571285/1" alt="" /></a> </div> <!--/face--> <div class="wb-detail"> <div class="wb-detail-title "> <div class="wb-title-oper"><a class="set-stick" href="#">置顶↑</a></div> <h1><a href="javascript:void(0)">HTML5中国</a></h1> </div> <div class="wb-detail-main"> 【HTML5正重新定义移动OS】<a title="http://www.html5cn.org/article-4683-1.html" href="http://t.cn/zYO3hAV" target="_blank" mt="url" action-type="feed_list_url">http://t.cn/zYO3hAV</a> 除了Windows Phone、BlackBerry 10这些与iOS和Android表象略有不同，但实际架构都差不多的系统外，火狐在MWC上最新推出的Firefox OS，以及Ubuntu Touch都有着与前面的系统与众不同的特点——兼容HTML5 WebApps。 </div> <div class="wb-detail-bot"> <div class="wb-bot-handle"> <a href="#">转发</a><i>|</i> <a href="#">收藏</a><i>|</i> <a href="#">评论(2)</a> </div> <div class="wb-from"> <a class="wb-time" href="#">今天09:17</a> <i>来自</i> <a href="#">专业版微博</a> </div> </div> </div> <!--/detail--> </li> <li> <div class="wb-face"> <a href="#" title="火速传播"><img src="http://tp4.sinaimg.cn/3247317827/50/40013115449/0" alt="" /></a> </div> <!--/face--> <div class="wb-detail"> <div class="wb-detail-title "> <div class="wb-title-oper"><a class="set-stick" href="#">置顶↑</a></div> <h1><a href="javascript:void(0)">火速传播</a></h1> </div> <div class="wb-detail-main"> 揭秘：电影《暴走吧，女人》三天内引发120多万目标观影人群围观、互动的幕后超级推手~火速刨根 </div> <div class="wb-detail-bot"> <div class="wb-bot-handle"> <a href="#">转发</a><i>|</i> <a href="#">收藏</a><i>|</i> <a href="#">评论(2)</a> </div> <div class="wb-from"> <a class="wb-time" href="#">今天09:17</a> <i>来自</i> <a href="#">专业版微博</a> </div> </div> </div> <!--/detail--> </li> <li> <div class="wb-face"> <a href="#" title="寒冬winter"><img src="http://tp2.sinaimg.cn/1196343093/50/5645239610/1" alt="" /></a> </div> <!--/face--> <div class="wb-detail"> <div class="wb-detail-title "> <div class="wb-title-oper"><a class="set-stick" href="#">置顶↑</a></div> <h1><a href="javascript:void(0)">寒冬winter</a></h1> </div> <div class="wb-detail-main"> 神GG本是哈尔滨中央大街web前端活招牌,无奈失足上海滩十里洋场,得电商霸主大阿里相救才不至误入游戏歧途,携手etao比价网走上新商业文明大道!别看哥虎背熊腰眼睛小,哥就像那玻璃门上的中国结:又红又专又喜庆！ </div> <div class="wb-detail-bot"> <div class="wb-bot-handle"> <a href="#">转发</a><i>|</i> <a href="#">收藏</a><i>|</i> <a href="#">评论(2)</a> </div> <div class="wb-from"> <a class="wb-time" href="#">今天09:17</a> <i>来自</i> <a href="#">专业版微博</a> </div> </div> </div> <!--/detail--> </li> <li> <div class="wb-face"> <a href="#" title="JavaScriptDev"><img src="http://tp1.sinaimg.cn/2659103760/50/5624237149/1" alt="" /></a> </div> <!--/face--> <div class="wb-detail"> <div class="wb-detail-title "> <div class="wb-title-oper"><a class="set-stick" href="#">置顶↑</a></div> <h1><a href="javascript:void(0)">JavaScriptDev</a></h1> </div> <div class="wb-detail-main"> Adobe重磅HTML5动画制作工具：<a class="a_topic" href="http://huati.weibo.com/k/Edge+Animate+1.5?from=501">#Edge Animate 1.5#</a>发布！支持CSS Filter，Gradients,Web字体以及诸多全新工具。在Adobe Creative Cloud上免费注册后即可下载。注册地址：<a title="http://ccmchina.cloudapp.net/api/Go/80" href="http://t.cn/zYOBpkm" target="_blank" mt="url" action-type="feed_list_url">http://t.cn/zYOBpkm</a> , 登录：<a title="http://ccmchina.cloudapp.net/api/Go/79" href="http://t.cn/zYOBOKq" target="_blank" mt="url" action-type="feed_list_url">http://t.cn/zYOBOKq</a> </div> <div class="wb-detail-bot"> <div class="wb-bot-handle"> <a href="#">转发</a><i>|</i> <a href="#">收藏</a><i>|</i> <a href="#">评论(2)</a> </div> <div class="wb-from"> <a class="wb-time" href="#">今天09:17</a> <i>来自</i> <a href="#">专业版微博</a> </div> </div> </div> <!--/detail--> </li> <li> <div class="wb-face"> <a href="#" title="玉伯也叫射雕"><img src="http://tp3.sinaimg.cn/1748374882/50/40013360299/1" alt="" /></a> </div> <!--/face--> <div class="wb-detail"> <div class="wb-detail-title "> <div class="wb-title-oper"><a class="set-stick" href="#">置顶↑</a></div> <h1><a href="javascript:void(0)">玉伯也叫射雕</a></h1> </div> <div class="wb-detail-main"> 补充了一篇关于 CommonJS、RequireJS、SeaJS 的八卦：http://t.cn/zYODZUV 可以直接阅读这个回复。 </div> <div class="wb-detail-bot"> <div class="wb-bot-handle"> <a href="#">转发</a><i>|</i> <a href="#">收藏</a><i>|</i> <a href="#">评论(2)</a> </div> <div class="wb-from"> <a class="wb-time" href="#">今天09:17</a> <i>来自</i> <a href="#">专业版微博</a> </div> </div> </div> <!--/detail--> </li> </ul> </div> <!--/wrap--> <script type="text/javascript"> (function(window){ var wbList = document.getElementById('wbList'), liEle = wbList.getElementsByTagName('li'), curLi = null, eveTarget = null; for(var i = 0; i < liEle.length; i++){ curLi = liEle[i]; curLi.onclick = function(event){ event = event || window.event; eveTarget = event.target || event.srcElement; // click a if(eveTarget.tagName.toLowerCase() == 'a' && eveTarget.className == 'set-stick'){ // first list if(prev(this) != null){ wbList.insertBefore(this, wbList.firstChild); fadeIn(this); } else { alert('已置顶，请换一个试试！'); } } } } // fadein method function fadeIn(ele){ var aVal = 1; /* (function(){ ele.style.opacity = (aVal / 100); ele.style.filter = 'alpha(opacity=' + aVal + ')'; aVal ++; if(aVal <= 100){ setTimeout(arguments.callee, 15); } })(); */ function step(){ ele.style.opacity = (aVal / 100); ele.style.filter = 'alpha(opacity=' + aVal + ')'; aVal ++; if(aVal <= 100){ setTimeout(step, 15); } } step(); } // prev elem function prev(elem){ do{ elem = elem.previousSibling; } while(elem && elem.nodeType != 1); return elem; } }(window)); </script> </body> </html>
运行代码
分类:
JavaScript
好文要顶
关注我
收藏该文
微信分享
豪情
粉丝 -
3291
关注 -
43
+加关注
1
0
升级成为会员
«
上一篇：
模拟搜索结果项
»
下一篇：
回到顶部
posted @
2013-03-18 08:56
豪情
阅读(
2240
) 评论(
0
)
编辑
收藏
举报
刷新页面
返回顶部
登录后才能查看或发表评论，立即
登录
或者
逛逛
博客园首页
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
编辑推荐：
·
如何编写易于单元测试的代码
·
10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
·
.NET Core 中如何实现缓存的预热？
·
从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
·
AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
·
周边上新：园子的第一款马克杯温暖上架
·
Open-Sora 2.0 重磅开源！
·
.NET周刊【3月第1期 2025-03-02】
·
分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
·
[AI/GPT/综述] AI Agent的设计模式综述
公告
昵称：
豪情
园龄：
15年3个月
粉丝：
3291
关注：
43
+加关注
<
2013年3月
>
日
一
二
三
四
五
六
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
搜索
我的标签
Javascript高程第二版--笔记
(12)
javascript
(9)
zen coding
(5)
WebStorm
(4)
css
(3)
精通javascript
(3)
JavaScriptDOM高级程序设计
(2)
资源
(2)
网址导航
(2)
zp
(1)
更多
随笔分类
(339)
CSS(32)
JavaScript(159)
Jquery(35)
Month(9)
Other(53)
PHP(3)
SublimeText(4)
Tool(13)
UI(12)
Vim(4)
Vue(2)
WebStorm/PhpStorm(13)
随笔档案
(337)
2019年5月(2)
2016年2月(1)
2016年1月(1)
2015年11月(1)
2015年10月(2)
2015年9月(3)
2015年7月(1)
2015年6月(1)
2015年5月(1)
2015年4月(3)
2015年2月(1)
2015年1月(5)
2014年12月(4)
2014年11月(8)
2014年10月(8)
2014年9月(1)
2014年6月(1)
2014年3月(9)
2014年1月(1)
2013年12月(3)
2013年5月(1)
2013年4月(4)
2013年3月(8)
2013年1月(1)
2012年12月(4)
2012年11月(1)
2012年10月(2)
2012年8月(4)
2012年7月(3)
2012年6月(1)
2012年4月(2)
2012年3月(8)
2012年2月(3)
2012年1月(1)
2011年12月(6)
2011年11月(1)
2011年7月(3)
2011年6月(5)
2011年5月(1)
2011年4月(1)
2011年3月(12)
2011年2月(1)
2011年1月(2)
2010年12月(7)
2010年11月(2)
2010年10月(5)
2010年9月(7)
2010年8月(14)
2010年7月(10)
2010年6月(14)
2010年5月(46)
2010年4月(19)
2010年3月(19)
2010年2月(7)
2010年1月(7)
2009年12月(48)
更多
link
豪情-Java
james
stevenlevithan
paulirish--jquery team
我是程序员
Aaron
VaJoy Larn
阅读排行榜
1. 1. web前端开发分享-css,js入门篇(168106)
2. web前端开发分享-目录(120242)
3. 如何在Webstorm/Phpstorm中设置连接FTP，并快速进行文件比较，上传下载，同步等操作(113116)
4. 前端开发利器webStorm 3.0配置使用(105933)
5. 4. web前端开发分享-css,js工具篇(94351)
6. 在sublime-text中设置浏览器预览(83304)
7. 我们前端跟后端是怎么合作的(80429)
8. JS的构造函数(74046)
9. 超强JavaScript编辑器webstorm主题(theme)(68478)
10. 我们前端是怎么找到工作的(66026)
评论排行榜
1. JS高级前端开发群加群说明及如何晋级(67)
2. 豪情-2015年阅读书籍分享[上](57)
3. 网上分享知识和帮助他人，自己有什么收获？(53)
4. 经典黑色--网站管理界面(38)
5. 我们前端是怎么找到工作的(34)
6. 豪情-关于生活工作学习之感悟-第一篇(33)
7. 前端应聘要准备些什么样子的作品？(29)
8. css 填坑常用代码分享(29)
9. 超强JavaScript编辑器webstorm主题(theme)(29)
10. 年后跳槽如何准备？(28)
推荐排行榜
1. 我们前端是怎么找到工作的(77)
2. web前端开发分享-目录(74)
3. 豪情-关于生活工作学习之感悟-第一篇(54)
4. 年后跳槽如何准备？(53)
5. css 填坑常用代码分享(51)
最新评论
1. Re:超强JavaScript编辑器webstorm主题(theme)
现在还能用吗？在win10上？
--香荣如梦
2. Re:豪情-2014年年终总结
向豪哥学习
--王小伞
3. Re:JS高级前端开发群加群说明及如何晋级
上海-时间前来报道
--你灬哪位
4. Re:6. web前端开发分享-css,js移动篇
感谢
--不爱学习不爱运动
5. Re:我们前端跟后端是怎么合作的
时至今日偶然看见此片老文章，读着评论，感觉像和古人交互一样，这种感觉如同穿越一般，令人着迷啊。
--LBAMSG_1
点击右上角即可分享
SQL AI 助手
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述