微博置顶

最新推荐文章于 2024-07-06 10:12:54 发布
Panda_Joy
最新推荐文章于 2024-07-06 10:12:54 发布
阅读量999
点赞数
分类专栏： js 文章标签：微博置顶
本文链接：https://blog.youkuaiyun.com/yongxiaokang1/article/details/43795345
版权
js 专栏收录该内容
19 篇文章
订阅专栏
本文通过实例展示了如何使用HTML和JavaScript实现微博置顶功能。包括页面布局、样式设置及交互逻辑，如点击置顶按钮将指定微博移动到列表顶部并伴有淡入效果。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!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>