帮朋友做了个 tipers，模仿新浪微博的勋章说明。。。尝试了一些 css 技巧，特此分享...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>demo</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<style type="text/css">
body{background:#fff;}
img {display:block; border: 0 none;}
.icon-tips{display:inline-block;margin:10px;}
.SD-tipbox{display:none;padding: 6px; margin:10px;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99DDDDDD', endColorstr='#99DDDDDD');background:rgba(221,221,221,0.6);position: absolute; z-index: 100; font-size:12px; ;border-radius:5px;}
:root .SD-tipbox { filter:none; } /*IE9*/
.SD-tipbox p { line-height:1.5 }
.SD-tipbox .SD-tipbox-direction{position: absolute; z-index:2;}
.SD-tipbox .SD-tipbox-direction em,.SD-tipbox .SD-tipbox-direction span{ height: 19px; width: 17px; font-family: Simsun; font-size: 16px;line-height: 21px; overflow: hidden;position: absolute;}
.SD-tipbox .SD-tipbox-direction em{color: #d0d0d0;font-weight:normal;font-style:normal; }
.SD-tipbox .SD-tipbox-direction span{color: #fff; }
.SD-tipbox .SD-tipbox-up{left: 50%; margin-left:-8px; top:-3px;}
.SD-tipbox .SD-tipbox-up span{ top:1px}
.SD-tipbox .cntBox{padding:5px 10px 5px 5px;position:relative;height:140px;overflow:hidden;border:1px solid #d0d0d0;background:#fff;}
.cntBox .icon{float:left;margin-right:20px;width:130px;height:140px;background:url(http://img.t.sinajs.cn/t35/style/images/medal/medal_pbg.png) no-repeat;}
.cntBox .icon img{margin: 2px auto;}
.cntBox dl{padding-top:5px;}
.cntBox dl dt{font:700 14px/24px "宋体";}
.cntBox-con{display:none;}
</style>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function() {
var cons=$(".cntBox-con"),tipsWidth=325;
var tips = $("a.icon-tips");
var tiper = $("<div>", {"class":"SD-tipbox"}).css("width",tipsWidth).html('<div class="SD-tipbox-direction SD-tipbox-up">[i]◆[/i]<span>◆</span></div>');
var cont = $("<div>", {"class":"cntBox"}).html("222");
var hideTime;
tiper.append(cont).appendTo($("body"));
tiper.hover(function(){
window.clearInterval(hideTime);
},function(){
hideTiper(200);
});
tips.hover(function() {
window.clearInterval(hideTime);
var $this=$(this),eq=$this.index();
tiper.css(getPos($this)).show();
cont.html(cons.eq(eq).html());
}, function() {
hideTiper(200);
}).bind("click",function(){
return false;
});
function hideTiper(time){
hideTime=window.setTimeout(function(){
tiper.hide();
},time||800);
}
function getPos(t) {
var p = t.offset();
p.top =p.top+ t.outerWidth(true)/2+5;
p.left = p.left-tipsWidth/2-5;
return p;
}
});
</script>
</head>
<body>
[url=#]<img src="http://ww2.sinaimg.cn/thumbnail/5e421ec3tw1djyaw6aoisg.gif"/>[/url]
[url=#]<img src="http://ww1.sinaimg.cn/thumbnail/62015b43tw1diey4g0zyng.gif"/>[/url]
[url=#]<img src="http://ww1.sinaimg.cn/thumbnail/6c2dfebdtw1diyda5flkig.gif"/>[/url]
[url=#]<img src="http://ww4.sinaimg.cn/thumbnail/62015b43tw1diexyvmestg.gif"/>[/url]
[url=#]<img src="http://ww2.sinaimg.cn/thumbnail/62015b43tw1difspsoslng.gif"/>[/url]
<div class="cntBox-con">
<span class="icon">
<img src="http://ww1.sinaimg.cn/large/5e421ec3tw1djyaw9r2gdj.jpg" alt=""/>
</span>
<dl>
<dt>上好学生1</dt>
<dd>
没有得过“三好学生”的人生是不完整的。在帐设置教育信息里添加学校名称、入学年份即可获得此勋章。
[url=http://weibo.com/setting]立即参与[/url]
</dd>
</dl>
</div>
<div class="cntBox-con">
<span class="icon">
<img src="http://ww1.sinaimg.cn/large/5e421ec3tw1djyaw9r2gdj.jpg" alt=""/>
</span>
<dl>
<dt>上好学生2</dt>
<dd>
没有得过“三好学生”的人生是不完整的。在帐设置教育信息里添加学校名称、入学年份即可获得此勋章。
[url=http://weibo.com/setting]立即参与[/url]
</dd>
</dl>
</div>
<div class="cntBox-con">
<span class="icon">
<img src="http://ww1.sinaimg.cn/large/5e421ec3tw1djyaw9r2gdj.jpg" alt=""/>
</span>
<dl>
<dt>上好学生3</dt>
<dd>
没有得过“三好学生”的人生是不完整的。在帐设置教育信息里添加学校名称、入学年份即可获得此勋章。
[url=http://weibo.com/setting]立即参与[/url]
</dd>
</dl>
</div>
<div class="cntBox-con">
<span class="icon">
<img src="http://ww1.sinaimg.cn/large/5e421ec3tw1djyaw9r2gdj.jpg" alt=""/>
</span>
<dl>
<dt>上好学生4</dt>
<dd>
没有得过“三好学生”的人生是不完整的。在帐设置教育信息里添加学校名称、入学年份即可获得此勋章。
[url=http://weibo.com/setting]立即参与[/url]
</dd>
</dl>
</div>
<div class="cntBox-con">
<span class="icon">
<img src="http://ww1.sinaimg.cn/large/5e421ec3tw1djyaw9r2gdj.jpg" alt=""/>
</span>
<dl>
<dt>上好学生5</dt>
<dd>
没有得过“三好学生”的人生是不完整的。在帐设置教育信息里添加学校名称、入学年份即可获得此勋章。
[url=http://weibo.com/setting]立即参与[/url]
</dd>
</dl>
</div>
</body>
</html>
分享到：
相关推荐
《高仿新浪微博弹框菜单——sina-popmenu开源项目解析》 在当今互联网产品中，交互设计的重要性不言而喻，而弹框菜单作为一种常见的交互元素，被广泛应用于各种应用场景，如社交网络、新闻资讯、电子商务等。在众多...
总的来说，模拟新浪微博的图文混排切换效果是一个综合性的前端开发项目，涵盖了网页布局、动态效果、响应式设计等多个方面的知识。通过这个项目，开发者不仅可以提升自身的技能，也能更好地理解和应用现代网页技术，...
axure模拟新浪微博
在这个场景中，我们关注的是如何使用HTTPClient 4库来模拟登录新浪微博。首先，我们需要理解HTTPClient库的基本概念。 HTTPClient是一个强大的Java库，用于处理HTTP请求和响应。它提供了丰富的功能，包括支持HTTPS...
在本项目中，我们将探索如何使用Python来模拟开发一个简单的新浪微博平台。这涉及到的主要知识点包括Python编程基础、Web开发框架的使用以及CMS（内容管理系统）的设计原则。首先，让我们从Python编程基础开始。 ...
在安卓平台上，开发一款模拟新浪微博“随便看看”功能的程序是一项具有挑战性的任务，涉及到许多核心的Android技术和网络编程知识。下面将详细讲解这个项目所涵盖的技术点。 首先，我们需要理解安卓应用程序的基本...
7.3_生成页面_｜创建微博｜Node.js-Koa2框架从零开发仿新浪微博项目实战
在本文中，我们将深入探讨如何使用Java来模拟登录新浪微博这一话题。模拟登录是网络爬虫或自动化测试中常见的技术，它允许程序以用户的身份与网站交互。对于Java开发者来说，理解这一过程对于构建自动化工具或者数据...
本项目“Android—ADT模拟新浪微博随便看看”旨在通过重写ListView控件，帮助开发者深入理解和灵活运用ListView的功能，以实现类似新浪微博“随便看看”的功能。在这个过程中，我们将探讨ListView的工作原理、自定义...
在这个场景下，我们将探讨如何使用`requests`库模拟用户登录到新浪微博。首先，我们需要了解`requests`库的基本用法，然后深入到新浪登录的具体实现，包括加密算法的使用。 ### requests库介绍 `requests`库是...
重写了ListView控件和BaseAdapter适配器中的方法，添加了头部刷新功能，ListView中的数据中图片、昵称、文本都是在values目录中定义的arrays.xml资源，日期和人气则是通过java API中的Date、Random类模拟出来的。
在本资源中，"新浪微博制作的前端页面HTML与CSS代码"提供了一个学习和实践前端开发的实例，特别适合初学者入门。HTML（HyperText Markup Language）是构建网页内容的基础，而CSS（Cascading Style Sheets）则用于...
2016年4月7最新新浪微博模拟登录HttpClient4.5.2
在本资源中，我们主要探讨的是如何利用Python编程语言实现一个针对新浪微博的网络爬虫，目的是抓取微博数据，包括微博的文字内容、图片以及视频。爬虫是数据挖掘的重要工具，它能自动化地从互联网上收集信息，对于...
本段python代码可以实现对新浪微博的爬虫模拟登录 本段python代码可以实现对新浪微博的爬虫模拟登录
总的来说，逆向新浪微博的登录验证涉及到网络通信的解析、应用代码的分析、数据的提取和模拟登录等多个环节，需要对Android系统、网络编程、加密算法以及逆向工程有深入的理解。这是一个复杂的过程，但也是提升技能...
微博平台通常会有反爬虫机制，因此我们需要模拟浏览器行为，可能需要设置User-Agent、处理Cookie、甚至使用代理IP。此外，登录验证也是爬虫面临的一大挑战，可能需要利用`requests.Session`或第三方库如`selenium`来...
【标题】：“简单的仿新浪微博发布框” 在网页设计和开发中，模拟知名社交媒体平台的界面元素是一种常见的练习，有助于提升开发者的设计感和交互实现能力。本项目“简单的仿新浪微博发布框”就是一个很好的实例，...
程序通过模拟用户在新浪微博平台的浏览行为，自动模拟登录并访问目标用户的主页或特定微博页面，然后抓取所需的信息。 使用这个爬虫程序，你可以轻松地获取新浪微博上的用户数据、微博内容，进行社交网络分析、舆情...
该数据集包含了36万多条新浪微博的数据，这些数据经过人工标注，精确地分类为四种情感：喜悦、愤怒、厌恶和低落。其中，喜悦类别的样本数量约为20万条，而愤怒、厌恶和低落这三种负面情绪的样本数量各约为5万条。...