模拟新浪微博的勋章弹框-CSDN博客

帮朋友做了个 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>