帮朋友做了个 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>
分享到:
相关推荐
简单的java swing 编写的新浪微博用户登陆客户端。 在本地运行时,需要自己修改config.properties中client_ID和client_SERCRET属性的值。这两个值需要自己通过注册得到。
httpclient4模拟登陆新浪微博 最新版
模拟新浪微博大数据分析
axure模拟新浪微博
新浪微博改版之后登陆变得非常复杂,这是使用java模拟登陆新浪微博。
本程序模拟新浪微博随便看看程序,供别人参考,指点。
java模拟新浪微博登录,通过调用微博SDK发布新信息.个人测试可以使用。 java模拟新浪微博登录,通过调用微博SDK发布新信息.个人测试可以使用。
7.3_生成页面_|创建微博|Node.js-Koa2框架从零开发仿新浪微博项目实战
新浪微博上,大家经常见到图文混排的效果,并且支持左右切换功能,今天把这款效果模仿做出来给大家参考
新浪微博模拟登陆 可以获得AccessToken
用python实现了新浪微博的模拟登陆,新浪微博各种加密,各种跳转,详细分析登陆过程并实现!
模拟新浪微博随便看看栏目 ,希望对你有所帮助
J2EE完整小目(模拟新浪微博),含数据库等完整资料,对新手具有不错的参考价值
模拟新浪微博随便看看文件压缩包,主要是重写ListView控件加深对ListView控件的理解和应用!
新浪微博制作前端页面HTML与CSS代码,适用于刚接触前端并有些许了解的小白学习
NULL 博文链接:https://tonyj.iteye.com/blog/1897604
python3.7 使用requests库模拟新浪微博登录。由于新浪对于用户账号和密码使用特殊加密,此程序使用base64对用户名进行编码和rsa2对password进行编码,亲测完成登录。
模拟新浪微博的随便看看栏目,可以学习一下