码迷，mamicode.com
首页 > 其他好文 > 详细

抽屉新热榜

时间：2018-05-24 20:45:44      阅读：418      评论：0      收藏：0      [点我收藏+]

标签：abi   function   存储   hasclass   image   导航栏   styles   易云   聚合   



1.实现与抽屉新热榜一样的布局
2.允许点赞、评论
3.开发登录、注册页面
4.开发发贴功能

技术分享图片

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <!-- 以最高的ie 浏览器 渲染  -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 视口的设备 移动设备优先 支持移动端 在多个设备上适应 pc iphone 安卓 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>抽屉新热榜-聚合每日热门、搞笑、有趣资讯</title>

    <!-- Bootstrap 必须引入bootstrap -->
    <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
    <link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.min.css">
    <link rel="icon" href="./images/chouti.ico">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--兼容IE9以下的版本-->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="./css/index.css">

</head>
<body>
    <!--导航栏-->
    <nav class="navbar navbar-default navbar-fixed-top my-navbar">
        <div class="container">
            <!--页面导航-->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img src="./images/logo.png" alt="logo"></a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <!--导航-->
                <ul class="nav navbar-nav my-navbar-nav">
                    <li class="active"><a href="#">全部<span class="sr-only">(current)</span></a></li>
                    <li><a href="#">42区</a></li>
                    <li><a href="#">段子</a></li>
                    <li><a href="#">图片</a></li>
                    <li><a href="#">挨踢1024</a></li>
                    <li><a href="#">你问我答</a></li>
                    <li><a href="#">视频</a></li>
                </ul>

                <!--搜索框-->
                <form class="navbar-form navbar-right my-form">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <a class="my-img" href="#"></a>
                </form>

                <!--注册登录-->
                <ul class="nav navbar-nav navbar-right my-navbar-nav">
                    <li><a style="color: white;" href="javascript:login();">注册</a></li>
                    <li><a style="color: white;" href="javascript:login();">登录</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!--模态窗-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1 myModalLabel2">
        <div class="modal-dialog" role="document">
            <div class="modal-content clearfix">

                <!--登录页面-->
                <div class="pull-left">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                        <h4 class="modal-title" id="myModalLabel1">登录</h4>
                    </div>

                    <div class="modal-body my-modal-body">
                        <ul class="nav nav-pills">
                            <li role="presentation" class="active"><a href="#">手机号登录</a></li>
                            <li role="presentation"><a href="#">用户名登录</a></li>
                        </ul>

                        <!--手机号登录-->
                        <div class="my-phone-login">
                            <form>
                                <div class="form-group">
                                    <select class="form-control">
                                        <option>中国（+86）</option>
                                        <option>中国香港（+852）</option>
                                        <option>中国澳门（+853）</option>
                                        <option>中国台湾（+886）</option>
                                        <option>美国（+1）</option>
                                        <option>加拿大（+1）</option>
                                        <option>马拉西亚（+60）</option>
                                        <option>日本（+81）</option>
                                        <option>韩国（+82）</option>
                                        <option>新加坡（+65）</option>
                                        <option>德国（+49）</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" id="exampleInputText1" placeholder="手机号">
                                </div>
                                <div class="form-group">
                                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" checked> <small>一个月内自动登录</small>
                                    </label>
                                    <small>&nbsp;&nbsp;&nbsp;&nbsp;忘记密码？</small>
                                </div>
                            </form>
                        </div>

                        <!--用户名登录-->
                        <div class="my-user-login">
                            <form>
                                <div class="form-group">
                                    <input type="text" class="form-control" id="exampleInputText2" placeholder="用户名">
                                </div>
                                <div class="form-group">
                                    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="密码">
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" checked> <small>一个月内自动登录</small>
                                    </label>
                                    <small>&nbsp;&nbsp;&nbsp;&nbsp;忘记密码？</small>
                                </div>
                            </form>
                        </div>

                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">登录</button>
                    </div>
                </div>

                <!--注册页面-->
                <div class="pull-right">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel2">注册</h4>
                    </div>

                    <div class="modal-body my-modal-body">
                        <ul class="nav nav-tabs">
                            <li role="presentation" class="active"><a href="#">1.填写手机号</a></li>
                            <li role="presentation"><a href="#">2.填写基本资料</a></li>
                        </ul>

                        <!--填写手机号-->
                        <div class="my-phone-register">
                            <form>
                                <div class="form-group">
                                    <select class="form-control">
                                        <option>中国（+86）</option>
                                        <option>中国香港（+852）</option>
                                        <option>中国澳门（+853）</option>
                                        <option>中国台湾（+886）</option>
                                        <option>美国（+1）</option>
                                        <option>加拿大（+1）</option>
                                        <option>马拉西亚（+60）</option>
                                        <option>日本（+81）</option>
                                        <option>韩国（+82）</option>
                                        <option>新加坡（+65）</option>
                                        <option>德国（+49）</option>
                                    </select>
                                </div>
                                <div class="form-group form-inline">
                                    <input type="text" class="form-control" id="exampleInputText3" placeholder="手机号">
                                    <button type="submit" class="btn btn-primary">获取验证码</button>
                                </div>
                                <div class="form-group text-right" style="margin-top: -10px;">
                                    <small>收不到短信？</small>
                                    <small style="color: #337ab7;">获取语音验证码</small>
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" id="exampleInputText4" placeholder="验证码">
                                </div>
                                <div class="form-group">
                                    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="密码">
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary my-btn-next" onclick="btnNext();">下一步</button>
                        <button type="button" class="btn btn-primary my-btn-submit" data-dismiss="modal">提交资料</button>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!--发布的模态窗-->
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1 myModalLabel2">
        <div class="modal-dialog" role="document">
            <div class="modal-content clearfix">

                <!--发布页面-->
                <div class="my-publish">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel3">分享新发现</h4>
                    </div>

                    <div class="modal-body my-modal-body">
                        <ul class="nav nav-tabs">
                            <li role="presentation" class="active"><a href="#">链接</a></li>
                            <li role="presentation"><a href="#">文字</a></li>
                            <li role="presentation"><a href="#">图片</a></li>
                        </ul>

                        <!--链接-->
                        <div class="my-link">
                            <form>
                                <div class="form-group">
                                    <label for="exampleInputUrl">添加链接</label>
                                    <input type="text" class="form-control" id="exampleInputUrl" placeholder="http://">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputTitle">标题</label>
                                    <input type="text" class="form-control" id="exampleInputTitle">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputTextarea">添加摘要（选填）</label>
                                    <textarea class="form-control" rows="3" id="exampleInputTextarea"></textarea>
                                </div>
                                <div class="form-group my-form-a">
                                    <small>发布到：</small>
                                    <a href="#" class="btn btn-default btn-sm active" role="button">42区</a>
                                    <a href="#" class="btn btn-default btn-sm" role="button">段子</a>
                                    <a href="#" class="btn btn-default btn-sm" role="button">图片</a>
                                    <a href="#" class="btn btn-default btn-sm" role="button">挨踢1024</a>
                                    <a href="#" class="btn btn-default btn-sm" role="button">你问我答</a>
                                </div>
                            </form>
                        </div>

                        <!--文字-->
                        <div class="my-text">
                            <form>
                                <div class="form-group">
                                    <textarea class="form-control" rows="3" id="exampleInputTextarea1" placeholder="发布段子"></textarea>
                                </div>
                                <div class="form-group my-form-a">
                                    <small>发布到：</small>
                                    <a href="#" class="btn btn-default btn-sm active" role="button">段子</a>
                                    <a href="#" class="btn btn-default btn-sm" role="button">你问我答</a>
                                </div>
                            </form>
                        </div>

                        <!--图片-->
                        <div class="my-photo">
                            <form>
                                <div class="form-group">
                                    <label for="exampleInputFile">添加图片</label>
                                    <input type="file" id="exampleInputFile">
                                </div>
                                <div class="form-group">
                                    <textarea class="form-control" rows="3" id="exampleInputTextarea2" placeholder="发布段子"></textarea>
                                </div>
                                <div class="form-group my-form-a">
                                    <small>发布到：</small>
                                    <a href="#" class="btn btn-default btn-sm active" role="button">图片</a>
                                    <a href="#" class="btn btn-default btn-sm" role="button">你问我答</a>
                                </div>
                            </form>
                        </div>

                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">清空</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">发布</button>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!--中心内容-->
    <div class="container my-container">
        <div class="row">
            <!--左侧列表内容-->
            <div class="col-md-8">
                <!--标签页-->
                <div class="clearfix my-nav">
                    <ul class="nav nav-pills pull-left my-navbar-nav">
                        <li class="active"><a href="#">最热</a></li>
                        <li><a href="#">发现</a></li>
                        <li><a href="#">人类发布</a></li>
                    </ul>
                    <ul class="nav nav-pills pull-right my-navbar-nav my-active">
                        <li class="active"><a href="#">限时排序</a></li>
                        <li><a href="#">24小时</a></li>
                        <li><a href="#">3天</a></li>
                    </ul>
                    <button class="btn btn-default btn-success" onclick="publish()"><span class="glyphicon glyphicon-plus-sign"></span><span>发布</span></button>
                </div>

                <!--内容1-->
                <div class="list-group my-list-content">
                    <a href="#" class="list-group-item clearfix">
                        <div class="pull-left clearfix">
                            <h5>【支持女性开车就是“叛徒”？沙特女权活动家被捕】本周至少7名沙特女权活动家遭捕，她们曾为女性驾驶权开展活动。她们被指控破坏国家安全，当局在报纸头版上给她们打上“叛徒”标签。
                                &nbsp;&nbsp;<small>-news.haiwainet.cn<span>&nbsp;42区</span></small></h5>
                            <small>沙特活动家被沙特当局指控破坏国家安全而被捕，沙特当局在亲政府报纸头版上给他们打上“叛徒”的标签。</small>
                            <p class="clearfix my-p-left pull-left">
                                <span class="span1 span_click1" title="推荐"><span class="span_count1">5</span></span>
                                <span class="span2 span_click2" title="评论"><span class="span_count2" >1</span></span>
                                <span class="span3 span_click3" title="加入私藏"><span>私藏</span></span>
                                <span class="span4"></span>
                                <span class="span6">院长</span>
                                <span class="span5">10分钟前</span>
                                <small class="span7">入热搜</small>
                            </p>
                            <p class="clearfix my-p-right pull-right">
                                <span class="span1_1">分享到</span>
                                <span class="span2_1"></span>
                                <span class="span3_1"></span>
                                <span class="span4_1"></span>
                                <span class="span5_1"></span>

                            </p>
                        </div>

                        <!--文章图片-->
                        <div class="pull-right my-pull-right">
                            <img src="./images/1.png" alt="小图">
                        </div>
                    </a>

                    <!--评论区域-->
                    <div class="panel panel-default my-comment">
                        <div class="panel-heading">最热评论(<span class="com-count">1</span>)<span class="close">X</span></div>
                        <div class="panel-body">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <small>
                                        <span class="com-span1"></span>
                                        <span class="com-span2">乌漆嘛黑</span>
                                        <span class="com-span3">这种手段我们很熟悉！</span>
                                        <span class="com-span4">5分钟前&nbsp;发布&nbsp;来自iphone</span>
                                    </small>
                                </li>


                            </ul>
                            <div class="form-inline">
                                <textarea class="form-control" rows="2"></textarea>
                                <button type="button" class="btn btn-info">评论</button>
                            </div>

                        </div>
                    </div>

                </div>

                <!--内容2-->
                <div class="list-group my-list-content">
                    <a href="#" class="list-group-item clearfix">
                        <div class="pull-left clearfix">
                            <h5>各种阶层各种职业的中国人，这样度过了82年前的今天 &nbsp;&nbsp;<small>-mp.weixin.qq.com<span>&nbsp;42社区</span></small></h5>
                            <small>来自Android</small>
                            <p class="clearfix my-p-left pull-left">
                                <span class="span1 span_click1" title="推荐"><span class="span_count1">5</span></span>
                                <span class="span2 span_click2" title="评论"><span class="span_count2" >3</span></span>
                                <span class="span3 span_click3" title="加入私藏"><span>私藏</span></span>
                                <span class="span4"></span>
                                <span class="span6">提拉米喵帕斯</span>
                                <span class="span5">30分钟前</span>
                                <small class="span7">入热榜</small>
                            </p>
                            <p class="clearfix my-p-right pull-right">
                                <span class="span1_1">分享到</span>
                                <span class="span2_1"></span>
                                <span class="span3_1"></span>
                                <span class="span4_1"></span>
                                <span class="span5_1"></span>

                            </p>
                        </div>

                        <!--文章图片-->
                        <div class="pull-right my-pull-right">
                            <img src="./images/2.png" alt="小图">
                        </div>
                    </a>

                    <!--评论区域-->
                    <div class="panel panel-default my-comment">
                        <div class="panel-heading">最热评论(<span class="com-count">3</span>)<span class="close">X</span></div>
                        <div class="panel-body">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <small>
                                        <span class="com-span1"></span>
                                        <span class="com-span2">雄霸大天王</span>
                                        <span class="com-span3">城市的井然有序，农村的精准扶贫，富有者的法律约束，饥饿者的社会救济，小市民的房产增值，给你点赞的人得混得多么差？</span>
                                        <span class="com-span4">20分钟前&nbsp;来自Android</span>
                                    </small>
                                </li>
                                <li class="list-group-item">
                                    <small>
                                        <span class="com-span1"></span>
                                        <span class="com-span2">熊小雄</span>
                                        <span class="com-span3">历史的印记</span>
                                        <span class="com-span4">32分钟前&nbsp;来自Android</span>
                                    </small>
                                </li>
                                <li class="list-group-item">
                                    <small>
                                        <span class="com-span1"></span>
                                        <span class="com-span2">monimonipo</span>
                                        <span class="com-span3">你还是没在旧社会活过，改开前估计也没经验</span>
                                        <span class="com-span4">1小时15分钟前&nbsp;来自iphone</span>
                                    </small>
                                </li>

                            </ul>
                            <div class="form-inline">
                                <textarea class="form-control" rows="2"></textarea>
                                <button type="button" class="btn btn-info">评论</button>
                            </div>

                        </div>
                    </div>

                </div>

                <!--内容3-->
                <div class="list-group my-list-content">
                    <a href="#" class="list-group-item clearfix">
                        <div class="pull-left clearfix">
                            <h5>【美国财长：中国进口美农产品将增近4成，能源翻倍】另一个复杂的信号是，美国贸易代表莱特希泽20日却发表了与姆努钦当天表态相互矛盾的声明，
                                称中国需要“真正的结构性改革”，除非中国对其经济做出“真正结构性的改变”，否则华盛顿可能仍然会诉诸关税及其他工具，包括投资限制与出口监管。
                                &nbsp;&nbsp;<small>-www.guancha.cn<span>&nbsp;42区</span></small></h5>
                            <!--<small>RSSHub 是一款轻量、易于扩展的 RSS 生成器，基于 node.js 10，可以给「任何」内容生成 RSS 订阅源，目前支持 B 站、微博、即刻、网易云音乐、......</small>-->
                            <p class="clearfix my-p-left pull-left">
                                <span class="span1 span_click1" title="推荐"><span class="span_count1">11</span></span>
                                <span class="span2 span_click2" title="评论"><span class="span_count2" >32</span></span>
                                <span class="span3 span_click3" title="加入私藏"><span>私藏</span></span>
                                <span class="span4"></span>
                                <span class="span6">cog</span>
                                <span class="span5">1小时21分钟前</span>
                                <small class="span7">入热搜</small>
                            </p>
                            <p class="clearfix my-p-right pull-right">
                                <span class="span1_1">分享到</span>
                                <span class="span2_1"></span>
                                <span class="span3_1"></span>
                                <span class="span4_1"></span>
                                <span class="span5_1"></span>

                            </p>
                        </div>

                        <!--文章图片-->
                        <div class="pull-right my-pull-right">
                            <img src="./images/3.png" alt="小图">
                        </div>
                    </a>

                    <!--评论区域-->
                    <div class="panel panel-default my-comment">
                        <div class="panel-heading">最热评论(<span class="com-count">2</span>)<span class="close">X</span></div>
                        <div class="panel-body">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <small>
                                        <span class="com-span1"></span>
                                        <span class="com-span2">歪理邪说</span>
                                        <span class="com-span3">对于没有契约精神的流氓美帝，中国肯定要留一手的</span>
                                        <span class="com-span4">1小时19分钟前&nbsp;来自Android</span>
                                    </small>
                                </li>
                                <li class="list-group-item">
                                    <small>
                                        <span class="com-span1"></span>
                                        <span class="com-span2">gamedeng</span>
                                        <span class="com-span3">美国印钱给其他国家化，转移通胀。中国是印钱给自己老百姓花，转移通胀</span>
                                        <span class="com-span4">1小时18分钟前&nbsp;</span>
                                    </small>
                                </li>

                            </ul>
                            <div class="form-inline">
                                <textarea class="form-control" rows="2"></textarea>
                                <button type="button" class="btn btn-info">评论</button>
                            </div>

                        </div>
                    </div>

                </div>

                <!--内容4-->
                <div class="list-group my-list-content">
                    <a href="#" class="list-group-item clearfix">
                        <div class="pull-left clearfix">
                            <h5>【许纯美要选台北市长！「4年后拼选总统」】台湾的「话题女王」许纯美坐拥300亿身家，是出了名的富婆，
                                20日被爆出有意参选台北市市长，她事后也证实此事，并表示这是为了4年后做准备。 &nbsp;&nbsp;<small>-star.ettoday.net <span>&nbsp;42区</span></small></h5>

                            <p class="clearfix my-p-left pull-left">
                                <span class="span1 span_click1" title="推荐"><span class="span_count1">6</span></span>
                                <span class="span2 span_click2" title="评论"><span class="span_count2" >17</span></span>
                                <span class="span3 span_click3" title="加入私藏"><span>私藏</span></span>
                                <span class="span4"></span>
                                <span class="span6">ettoday</span>
                                <span class="span5">1小时36分钟前</span>
                                <small class="span7">入热榜</small>
                            </p>
                            <p class="clearfix my-p-right pull-right">
                                <span class="span1_1">分享到</span>
                                <span class="span2_1"></span>
                                <span class="span3_1"></span>
                                <span class="span4_1"></span>
                                <span class="span5_1"></span>

                            </p>
                        </div>

                        <!--文章图片-->
                        <div class="pull-right my-pull-right">
                            <img src="./images/4.png" alt="小图">
                        </div>
                    </a>

                    <!--评论区域-->
                    <div class="panel panel-default my-comment">
                        <div class="panel-heading">最热评论(<span class="com-count">2</span>)<span class="close">X</span></div>
                        <div class="panel-body">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <small>
                                        <span class="com-span1"></span>
                                        <span class="com-span2">张局座召忠</span>
                                        <span class="com-span3">犹记得当你她上刚开播的《康熙来了》的情境，觉得跟我们的世界观差异太大了</span>
                                        <span class="com-span4">1小时33分钟前&nbsp;来自Android</span>
                                    </small>
                                </li>
                                <li class="list-group-item">
                                    <small>
                                        <span class="com-span1"></span>
                                        <span class="com-span2">别问了反正你也不认识</span>
                                        <span class="com-span3">胖了</span>
                                        <span class="com-span4">1小时49分钟前&nbsp;来自Android</span>
                                    </small>
                                </li>

                            </ul>
                            <div class="form-inline">
                                <textarea class="form-control" rows="2"></textarea>
                                <button type="button" class="btn btn-info">评论</button>
                            </div>

                        </div>
                    </div>

                </div>

                <!--内容5-->
                <div class="list-group my-list-content">
                    <a href="#" class="list-group-item clearfix">
                        <div class="pull-left clearfix">
                            <h5>坚果R1手机刚上市，你就不得不“理解万岁”了 &nbsp;&nbsp;<small>-www.pingwest.com <span>&nbsp;挨踢1024</span></small></h5>
                            <small>一周前的锤子发布会上，罗永浩带来的两款所谓革命性产品中，坚果R1手机看起来还是有吸引力的。不管是骁龙845、最大8GBRAM和1TB存储空间，
                                还是带光学防抖和采用IMX363CMOS的影像系统，再或者线性马达、无线充电、压感屏幕都足以...</small>
                            <p class="clearfix my-p-left pull-left">
                                <span class="span1 span_click1" title="推荐"><span class="span_count1">15</span></span>
                                <span class="span2 span_click2" title="评论"><span class="span_count2" >59</span></span>
                                <span class="span3 span_click3" title="加入私藏"><span>私藏</span></span>
                                <span class="span4"></span>
                                <span class="span6">Pin</span>
                                <span class="span5">2小时2分钟前</span>
                                <small class="span7">入热搜</small>
                            </p>
                            <p class="clearfix my-p-right pull-right">
                                <span class="span1_1">分享到</span>
                                <span class="span2_1"></span>
                                <span class="span3_1"></span>
                                <span class="span4_1"></span>
                                <span class="span5_1"></span>

                            </p>
                        </div>

                        <!--文章图片-->
                        <div class="pull-right my-pull-right">
                            <img src="./images/5.png" alt="小图">
                        </div>
                    </a>

                    <!--评论区域-->
                    <div class="panel panel-default my-comment">
                        <div class="panel-heading">最热评论(<span class="com-count">2</span>)<span class="close">X</span></div>
                        <div class="panel-body">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <small>
                                        <span class="com-span1"></span>
                                        <span class="com-span2">李多多</span>
                                        <span class="com-span3">罗锤子：个性化镜头，助您拍摄出与众不同的照片。</span>
                                        <span class="com-span4">2小时2分钟前&nbsp;</span>
                                    </small>
                                </li>
                                <li class="list-group-item">
                                    <small>
                                        <span class="com-span1"></span>
                                        <span class="com-span2">一股清流</span>
                                        <span class="com-span3">奇怪，把一块普通玻璃像手机一样包装里，都不会磨成这样吧，感觉有猫腻</span>
                                        <span class="com-span4">1小时42分钟前&nbsp;来自Android</span>
                                    </small>
                                </li>

                            </ul>
                            <div class="form-inline">
                                <textarea class="form-control" rows="2"></textarea>
                                <button type="button" class="btn btn-info">评论</button>
                            </div>

                        </div>
                    </div>

                </div>

                <!--内容6-->
                <div class="list-group my-list-content">
                    <a href="#" class="list-group-item clearfix">
                        <div class="pull-left clearfix">
                            <h5>“美帝良心”从何而来？ &nbsp;&nbsp;<small>-img3.chouti.com<span>&nbsp;挨踢1024 /span></small></h5>

                            <p class="clearfix my-p-left pull-left">
                                <span class="span1 span_click1" title="推荐"><span class="span_count1"> 53</span></span>
                                <span class="span2 span_click2" title="评论"><span class="span_count2" > 121</span></span>
                                <span class="span3 span_click3" title="加入私藏"><span>私藏</span></span>
                                <span class="span4"></span>
                                <span class="span6">Peter</span>
                                <span class="span5">2小时17分钟前</span>
                                <small class="span7">入热搜</small>
                            </p>
                            <p class="clearfix my-p-right pull-right">
                                <span class="span1_1">分享到</span>
                                <span class="span2_1"></span>
                                <span class="span3_1"></span>
                                <span class="span4_1"></span>
                                <span class="span5_1"></span>

                            </p>
                        </div>

                        <!--文章图片-->
                        <div class="pull-right my-pull-right">
                            <img src="./images/6.png" alt="小图">
                        </div>
                    </a>

                    <!--评论区域-->
                    <div class="panel panel-default my-comment">
                        <div class="panel-heading">最热评论(<span class="com-count">2</span>)<span class="close">X</span></div>
                        <div class="panel-body">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <small>
                                        <span class="com-span1"></span>
                                        <span class="com-span2">小白公子</span>
                                        <span class="com-span3">所以这次事并不是因为5g标准</span>
                                        <span class="com-span4">2小时47分钟前&nbsp;来自Android</span>
                                    </small>
                                </li>
                                <li class="list-group-item">
                                    <small>
                                        <span class="com-span1"></span>
                                        <span class="com-span2">alanlin</span>
                                        <span class="com-span3">节操在哪里，柳家招人恨不是一天两天了，这波被黑活该。</span>
                                        <span class="com-span4">2小时2分钟前&nbsp;发布</span>
                                    </small>
                                </li>

                            </ul>
                            <div class="form-inline">
                                <textarea class="form-control" rows="2"></textarea>
                                <button type="button" class="btn btn-info">评论</button>
                            </div>

                        </div>
                    </div>

                </div>

                <!--分页-->
                <nav aria-label="Page navigation" style="text-align: center;">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li class="active"><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>

            </div>

            <!--右侧列表内容-->
            <div class="col-md-4">
                <div class="my-a-img">
                    <a href="#"><img src="images/有害信息举报专区.png" alt=""></a>
                    <a href="#"><img src="images/儿童色情信息举报.png" alt=""></a>
                </div>

                <a href="#">如何避免自己被封号</a>

                <a href="#"><img src="images/不正经的咨询社区.png" alt=""></a>

                <div><span class="my-span-top">24小时全部<span> TOP 10</span></span></div>

                <!--面板链接 ul li 内容-->
                <div class="panel panel-default my-panel">
                    <!-- Default panel contents -->
                    <div class="panel-heading">最热榜</div>

                    <!-- List group -->
                    <ul class="list-group my-list-group">
                        <li class="list-group-item">
                            <span class="badge">374</span>
                            <a href="#">帅不过三秒</a>
                        </li>
                        <li class="list-group-item">
                            <span class="badge">316</span>
                            <a href="#">压腿是个技术活，一般人受不了。建议声调小点~~</a>
                        </li>
                        <li class="list-group-item">
                            <span class="badge">218</span>
                            <a href="#">例无虚发的撩妹最高境界</a>
                        </li>
                        <li class="list-group-item">
                            <span class="badge">203</span>
                            <a href="#">阿拉丁神灯cos</a>
                        </li>
                        <li class="list-group-item">
                            <span class="badge">96</span>
                            <a href="#">祝大家节日快乐，来自一只汪的祝福。</a>?
                        </li>
                    </ul>
                </div>

                <!--广告图片-->
                <a href="#"><img src="./images/广告.png" alt=""></a>

            </div>
        </div>

    </div>

    <!--回到顶部图标-->
    <div class="move-top" title="回到顶部"></div>

    <!-- jQuery (Bootstrap 的所有 前段 插件都依赖 jQuery，所以必须放在前边) -->
    <!--<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>-->
    <script src="./jquery/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 前段 插件。也可以根据需要只加载单个插件。 -->
    <!--<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
    <script src="./bootstrap-3.3.7/js/bootstrap.min.js"></script>

</body>
    <script src="./js/index.js"></script>

</html>

index.css

.modal-open {
    overflow-y: scroll !important;
}
@media screen and (min-width: 765px) and (max-width:995px) {
    .my-form{display: none;}
}
body {
    background-color: #ededed;
}
.my-form{
    position: relative;
}
.my-container{
    padding-top: 70px;
    background-color: white;
}
.my-nav{
    padding-bottom: 20px;
    overflow: hidden;
}
.my-nav .pull-right{
    position: relative;
    right: 128px;
}
.my-nav .pull-right li{
    font-size: 12px;
}
.my-nav .pull-right li a{
    padding: 11px 8px;
    color: #333;
}
.my-nav .pull-right+button{
    width: 120px;
    margin-left: 10px;
    position: relative;
    right: -155px;
    float: right;
}
.my-nav .pull-right+button span{
    padding: 0 8px;
}
.my-nav .pull-right li.active a{
    color: #5cb85c;
}
.my-nav .pull-right li a:hover{
    color: #5cb85c;
    background-color: white;
}
.my-nav .pull-right li a:visited{
    background-color: white;
}
.my-nav .my-active .active a{
    background-color: white;
}
.my-navbar{
    background-color: #2459A2;
}
.my-navbar .navbar-collapse:last-child li.active a{
    color: white;
    background-color: #204982;
}
.my-navbar .navbar-collapse:last-child li.active a:visited{
    color: white;background-color: #204982;
}
.my-navbar .my-navbar-nav>.active>a{
    background-color: #204982;
    color: white;
}
.my-navbar .my-navbar-nav>.active:hover{
    background-color: #396bb3;
}
.my-navbar .my-navbar-nav>.active a:hover{
    background-color: #204982; color: white;
}
.my-navbar .my-navbar-nav>.active a:visited{
    color: white;background-color: #204982;
}
.my-navbar .my-navbar-nav>li>a{
    color: #c0cddf;
}
.my-navbar .my-navbar-nav>li>a:visited{
    color: #c0cddf;
}
.my-navbar .my-navbar-nav>li:hover{
    background-color: #396bb3;
}
.my-navbar .my-navbar-nav>li>a:hover{
    color:white;
}

.my-list-content a{
    cursor: default;
}
.my-list-content a h5{
    color: black;
}
.my-list-content a h5>small{
    cursor: text;
}
.my-list-content a h5,small,p,h5>small>span{
    cursor: pointer;
}
.my-list-content a>div{
    width: 83%;
}
.my-list-content a .pull-left p.pull-left{
    /*width: 67%;*/
    width: 100%;
}
.my-list-content a .pull-left p.my-p-right{
    display: none;
}
.my-list-content div.my-pull-right {
    position: absolute;
    height: 120px;
    width: 120px;
    right: 20px;
}
.my-list-content a .pull-left small{
    color: gray;
}
.my-list-content a .pull-left p{
    margin: 12px 0 0 0; color: #9d9d9d;
}
.my-list-content a .pull-left p>span{
    display: inline-block;
    width: 50px;
    height: 18px;
    margin-right: 10px;
}
.my-list-content a .pull-left p .span1{
    background: url("../images/点赞.png") no-repeat 8px -40px;


}
.my-list-content a .pull-left p .span1:hover{
    background: url("../images/点赞.png") no-repeat 8px -20px;
    color: #204982;
}
.my-list-content a .pull-left p span span{
    float: right;
}
.my-list-content a .pull-left p .span2{
    background: url("../images/点赞.png") no-repeat 8px -99px;
}
.my-list-content a .pull-left p .span2:hover{
    background: url("../images/点赞.png") no-repeat 8px -79px;
    color: #204982;
}
.my-list-content a .pull-left p .span3{
    width: 42px;
    background: url("../images/点赞.png") no-repeat 8px -159px;
}
.my-list-content a .pull-left p .span3:hover{
    background: url("../images/点赞.png") no-repeat 8px -139px;
    color: #204982;
}
.my-list-content a .pull-left p .span3>span{
    margin-right: -18px;
}
.my-list-content a .pull-left p .span4{
    background: url("../images/图标.png") no-repeat left center/19px;
    border:1px solid #ccc;
    margin-left: 30px;
    width: 20px;
    position: relative;
    cursor: default;
}
.my-list-content a .pull-left p .span5{
    width: 85px;
    color: orange;
    font-size: 12px;
    position: relative;
    cursor: text;
    top: -4px;
    left: -12px;
}
.my-list-content a .pull-left p .span6{
    position: relative;
    top:-4px;
    left: -4px;
}
.my-list-content a .pull-left p .span7{

    position: relative;
    top:-4px;
    left: -18px;
}
.my-list-content .pull-right img{
    height: 64px;
    width: 64px;
    margin: 10px;
    position: absolute;
    top: 0;
    right: -10px;
    z-index: 2
}
.my-list-content .pull-right img:hover{cursor: zoom-in;}
.my-list-content .pull-right img.big:hover{ cursor: zoom-out;}
.my-list-content a .pull-left p.my-p-right span{ width: 22px; margin: 0; height: 15px;}
.my-list-content a .pull-left p.my-p-right .span1_1{ width: 41px; font-size: 12px; cursor: text;}
.my-list-content a .pull-left p.my-p-right .span1_1~span{ position: relative;top:2px;}
.my-list-content a .pull-left p.my-p-right .span2_1{
    background:url("../images/share.png") no-repeat 5px 0;}
.my-list-content a .pull-left p.my-p-right .span2_1:hover{
    background:url("../images/share.png") no-repeat 5px -90px; color: gray;}
.my-list-content a .pull-left p.my-p-right .span3_1{
    background:url("../images/share.png") no-repeat 5px -15px;}
.my-list-content a .pull-left p.my-p-right .span3_1:hover{
    background:url("../images/share.png") no-repeat 5px -105px;}
.my-list-content a .pull-left p.my-p-right .span4_1{
    background:url("../images/share.png") no-repeat 5px -30px;}
.my-list-content a .pull-left p.my-p-right .span4_1:hover{
    background:url("../images/share.png") no-repeat 5px -120px;}
.my-list-content a .pull-left p.my-p-right .span5_1{
    background:url("../images/share.png") no-repeat 5px -60px;}
.my-list-content a .pull-left p.my-p-right .span5_1:hover{
    background:url("../images/share.png") no-repeat 5px -150px;}

@media screen and (min-width: 990px) and (max-width: 1200px) {
    .my-list-content a .pull-left p.pull-left{ width: 78%;}
    .my-list-content a .pull-left p.my-p-right{ width: 18%;}
}
.my-img{
    position: absolute;
    background: url("../images/搜索.png") no-repeat left center;
    display: inline-block;height: 32px; width: 37px;top: 1px; right: 12px; border-left: 1px solid #e0e0e0;}
@media screen and (max-width: 765px) {
    .my-img{ top: 10px;}
}
.my-a-img a{
    padding-right: 16px;}
.my-a-img+a{
    background: url("../images/搜索.png") no-repeat left center;
    display: block;height: 20px;
    padding-left: 30px;
    font-size: 14px;font-weight: bold;
    margin: 15px 0;}
.my-span-top{
    font-size: 14px;
    margin: 12px 0;display: block;font-weight: 600;
}
.my-span-top>span{
    color: red;}
.my-list-group{
    padding-left: 30px;
}
.my-list-group li.list-group-item>span{
    float: left; background-color: #e0e0e0;color: gray; position: absolute;left: -24px;}
.my-list-group li.list-group-item a{
    text-decoration: none; color: #333;
}
.my-list-group li.list-group-item a:hover{
    color: #396bb3;
}
.my-panel .panel-heading{
    background-color: #2459a2;
    color: white;
    text-align: center;
}
.my-modal-body>ul{
    margin-bottom: 15px;
}
.my-modal-body .my-user-login{
    display: none;}

#myModal .modal-dialog{
    width: 45%;}

.my-comment{
    display: none;}
.my-comment ul.list-group li:hover{
    background-color: #f5f5f5; }
.my-comment .form-inline textarea{
    width: 90%;}
.my-comment .com-span1{
    background: url(../images/图标.png) no-repeat left center/19px;
    width: 20px;
    height: 20px;
    display: inline-block;
    border: 1px solid #ccc;
    position: relative;
    top: 4px;}
.my-comment .com-span2{
    color: #2459a2;
    margin-left: 5px;
}
.my-comment .com-span3{
    margin-left: 10px;
}
.my-comment .com-span4{
    color: #ccc;
    margin-left: 20px;
}
.move-top{
    display: none;
    position:fixed;
    z-index: 3;
    background: url("../images/movetop.png") no-repeat 0 0;
    width: 40px;
    height: 40px;
    bottom: 30px;right: 100px;
    cursor: pointer;
}
.move-top:hover{
    background: url("../images/movetop.png") no-repeat 0 -40px;}
.my-publish .my-text,.my-photo{
    display: none;
}

index.js

$(function () {
    $(‘.my-list-content>a‘).click(function (ev) {
        ev.preventDefault(); //阻止默认事件 href
        // ev.stopPropagation(); // 阻止事件冒泡
        // return false; // 阻止了冒泡和默认

    });

    //鼠标点击 ul li 下的 active 样式切换
    $(‘.my-navbar-nav li‘).click(function () {
        $(this).addClass(‘active‘).siblings(‘li‘).removeClass(‘active‘);
    });

    //模态窗中的标签样式切换
    $(‘.pull-left .my-modal-body ul li‘).click(function () {
        $(this).addClass(‘active‘).siblings(‘li‘).removeClass(‘active‘);
        $($(‘.my-modal-body ul‘).siblings(‘div‘)[$(this).index()]).show().siblings(‘div‘).hide();

    });

    //鼠标移入到内容中，显示分享的小图标
    $(‘.my-list-content a‘).each(function (index,ele) {
        $(this).hover(function () {
            $($(‘.pull-left p.my-p-right‘)[index]).css(‘display‘,‘block‘);
        },function () {
            $($(‘.pull-left p.my-p-right‘)[index]).css(‘display‘,‘none‘);
        })
    });

    //鼠标移入到内容的图片上，将小图片变成大图片
    $(‘.pull-right img‘).each(function (index,ele) {
        $(this).click(function () {
            if($(this).hasClass(‘big‘)){
                $(this).animate({width:‘64px‘,height:‘64px‘},500);
                $(this).removeClass(‘big‘);

            }else {
                $(this).animate({width:‘120px‘,height:‘120px‘},500);
                $(this).addClass(‘big‘);
            }
        })
    });



    //推荐的点击事件
    $(‘.span_click1‘).each(function (index,ele) {
        var isFlag1 = true;
        $(this).click(function () {
            var count1 = $($(‘.span_count1‘)[index]).text();
            if(isFlag1){
                $($(‘.span_count1‘)[index]).text(Number(count1)+1);
                $(this).css({‘background‘:‘url(./images/点赞.png) no-repeat 8px -20px‘,‘color‘:‘#58cb05‘});
                $(this).attr(‘title‘,‘取消推荐‘);
                isFlag1 = false;
            }else{
                $($(‘.span_count1‘)[index]).text(Number(count1)-1);
                $(this).css({‘background‘:‘url(./images/点赞.png) no-repeat 8px -40px‘,‘color‘:‘#9d9d9d‘});
                $(this).attr(‘title‘,‘推荐‘);
                isFlag1 = true;
            }
        });
    });

    //评论的点击事件
    $(‘.span_click2‘).each(function (index,ele) {
        var isFlag2 = true;
        $(this).click(function () {
            console.log($(this).index());
            if(isFlag2){
                $($(‘.my-comment‘)[index]).show();
                $(this).css({‘background‘:‘url(./images/点赞.png) no-repeat 8px -79px‘,‘color‘:‘#63c8ff‘});
                isFlag2 = false;
            }else{
                $($(‘.my-comment‘)[index]).hide();
                $(this).css({‘background‘:‘url(./images/点赞.png) no-repeat 8px -99px‘,‘color‘:‘#9d9d9d‘});
                isFlag2 = true;
            }
        })
    });

    //关闭评论框
    $(‘.my-comment .close‘).each(function (index,ele) {
        $(this).click(function () {
            $($(‘.my-comment‘)[index]).hide();
            $($(‘.span_click2‘)[index]).css({‘background‘:‘url(./images/点赞.png) no-repeat 8px -99px‘,‘color‘:‘#9d9d9d‘});
        })
    });

    //私藏的 点击事件
    $(‘.span_click3‘).each(function (index,ele) {
        var isFlag3 = true;
        $(this).click(function () {
            if(isFlag3){
                $(this).css({‘background‘:‘url(./images/点赞.png) no-repeat 8px -139px‘,‘color‘:‘orange‘});
                $(this).attr(‘title‘,‘移除私藏‘);
                isFlag3 = false;
            }else{
                $(this).css({‘background‘:‘url(./images/点赞.png) no-repeat 8px -159px‘,‘color‘:‘#9d9d9d‘});
                $(this).attr(‘title‘,‘加入私藏‘);
                isFlag3 = true;
            }
        });
    });

    //评论内容追加到 ul li 中
    $(‘.my-comment button‘).each(function (index,ele) {
        $(this).bind(‘click‘,function () {
            var date = new Date();
            var strDate = date.getFullYear() + ‘-‘ + Number(date.getMonth())+1 + ‘-‘ + date.getDate()
                + ‘&nbsp;&nbsp;‘ + date.getHours() + ‘:‘ + date.getMinutes() + ‘:‘ + date.getSeconds();
            var comCount = $($(‘.com-count‘)[index]).text();
            var comment = $($(‘.my-comment textarea‘)[index]).val();

            var str = "<li class=\"list-group-item\"> <small>" +
                "<span class=\"com-span1\"></span>" +
                "<span class=\"com-span2\">kris</span> " +
                "<span class=\"com-span3\">"+comment+"</span> " +
                "<span class=\"com-span4\">"+strDate+"&nbsp;发布</span> " +
                "</small></li> ";

            $($(‘.my-comment ul.list-group‘)[index]).append(str);
            $($(‘.com-count‘)[index]).text(Number(comCount)+1);
            $($(‘.span_count2‘)[index]).text(Number(comCount)+1);
            $($(‘.my-comment textarea‘)[index]).val(‘‘);
        })
    });

    //监听页面滚动
    $(document).scroll(function () {
        $(document).scrollTop() > 0 ? $(‘.move-top‘).show() : $(‘.move-top‘).hide();
    });

    //回到顶部 点击事件
    $(‘.move-top‘).click(function () {
        $(document.documentElement).animate({scrollTop:‘0‘},500)
    });

    //发布页面的导航,内容切换
    $(‘.my-publish ul.nav li‘).click(function () {
        $(this).addClass(‘active‘).siblings(‘li‘).removeClass(‘active‘);
        $($(‘.my-publish ul.nav‘).siblings(‘div‘)[$(this).index()]).show().siblings(‘div‘).hide();
    });
    // 发布到的切换
    $(‘.my-form-a a‘).click(function () {
        $(this).addClass(‘active‘).siblings(‘a‘).removeClass(‘active‘);
    })

});

//注册登录页面
function login() {
    $(‘#myModal‘).modal({
        keyboard:false
    });
    /* 为了弹出框 弹出时滚动条不消失 背景不影响*/
    $(‘body‘).css(‘padding-right‘,‘0‘);
}

//注册 选择下一步时的操作
function btnNext() {
    $(‘.my-phone-register‘).hide();
    $(‘.my-info-register‘).show();
    $(‘.my-btn-next‘).hide();
    $(‘.my-btn-submit‘).show();
    $(‘.pull-right .my-modal-body ul li‘).last().addClass(‘active‘).siblings(‘li‘).removeClass(‘active‘);
}

//发布
function publish() {
    $(‘#myModal1‘).modal({
        keyboard:false
    });


    $(‘body‘).css(‘padding-right‘,‘0‘);
}

 

 

抽屉新热榜

标签：abi   function   存储   hasclass   image   导航栏   styles   易云   聚合   

原文地址：https://www.cnblogs.com/shengyang17/p/9084852.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！