模拟新浪微博的勋章弹框
帮朋友做了个 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">◆<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><img src="http://ww2.sinaimg.cn/thumbnail/5e421ec3tw1djyaw6aoisg.gif"/><img src="http://ww1.sinaimg.cn/thumbnail/62015b43tw1diey4g0zyng.gif"/><img src="http://ww1.sinaimg.cn/thumbnail/6c2dfebdtw1diyda5flkig.gif"/><img src="http://ww4.sinaimg.cn/thumbnail/62015b43tw1diexyvmestg.gif"/><img src="http://ww2.sinaimg.cn/thumbnail/62015b43tw1difspsoslng.gif"/><div class="cntBox-con"> <span class="icon"> <img src="http://ww1.sinaimg.cn/large/5e421ec3tw1djyaw9r2gdj.jpg" alt=""/> </span> <dl> <dt>上好学生1</dt> <dd> 没有得过“三好学生”的人生是不完整的。在帐设置教育信息里添加学校名称、入学年份即可获得此勋章。 立即参与 </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> 没有得过“三好学生”的人生是不完整的。在帐设置教育信息里添加学校名称、入学年份即可获得此勋章。 立即参与 </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> 没有得过“三好学生”的人生是不完整的。在帐设置教育信息里添加学校名称、入学年份即可获得此勋章。 立即参与 </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> 没有得过“三好学生”的人生是不完整的。在帐设置教育信息里添加学校名称、入学年份即可获得此勋章。 立即参与 </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> 没有得过“三好学生”的人生是不完整的。在帐设置教育信息里添加学校名称、入学年份即可获得此勋章。 立即参与 </dd> </dl></div></body></html>
页:
[1]