master

分支 (1)

管理

管理

master

beautyPhoto
/
inBeautyPhoto.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title> MissQ校花女团 </title>

    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/styleI.css">
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/baguetteBox.min.css">

    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/share.js"></script>

    <link rel="stylesheet" href="css/comment.css"/>
    <script>
        //获取数据
        function getData(json,n,comment){
            var Com= '<li class="comment-list-head"><img src="'+json.lists[n].pic+'"/></li>'+
                    '<li class="comment-list-words">'+
                    '<p class="comment-list-name">'+json.lists[n].title+'</p>'+
                    '<p>'+comment+'</p>'+
                    '</li>'+
                    '<li class="comment-list-time">'+json.lists[n].thisTime+'</li>';
            return Com;
        }
        $(function(){
            //点击心形变红
            $('.like').on('click',function(){
                //判断点赞头像行的长度，达到最大长度则去掉最后一个元素
                $('.fans').width();
                var MR=parseInt($('.fans li').css('marginRight'));
                var FL=$('.fans li').length;
                var FW=$('.fans li').width();
                var F=$('.fans').width()-100;
                var W=FW*FL+MR*FL;
                if(W>F){
                    $('.fans li:last-child').remove();
                }

                $(this).css('background','url(img/like_tab.png) no-repeat center center ');
                $('.fans').prepend('<li class="fans-like"><img src="img/p2.jpg" alt=""/></li>');

            });
            //进入页面加载评论等数据
            $.ajax({
                url:"json/comment.json",
                success:function(json){
                    for(var i=0;i<json.lists.length;i++) {
                        $('.comments').prepend('<ul class="comment-list"></ul>');
                        $('.comment-list').eq(0).html(getData(json,i,json.lists[i].comment));
                    }
                    $('.num-like-center').html(json.data.like);
                    $('.praise').each(function(i){
                        $('.praise').eq(i).html(json.dataList[i].like);
                    });
                },
                error:function(e){
                    alert(e);
                }
            });

            //点击按钮添加一条评论
            $('.send').on('click',function(){
                if($('.com-text').val()==''){
                    alert('评论内容不能为空哦~');
                    return;
                }
                $('.comments').prepend('<ul class="comment-list"></ul>');
                $.ajax({
                    url:"json/comment.json",
                    success:function(json){
                        $('.comment-list').eq(0).html(getData(json,0,$('.com-text').val()));
                        $('.com-text').val('');
                    },
                    error:function(e){
                        alert(e);
                    }
                });

            });
        });
    </script>
</head>
<body>
<div class="weixin-guide-mask" style="display: none;">
    <div class="weixin-guide">
        <p>如果无法下载<img class="isad" src="http://weihui.yy.com/assets/img/weixin-sad.png"></p>
        <p>别担心，点击右上角<img class="iguide" src="http://weihui.yy.com/assets/img/weixin-guide.png"></p>
        <p>选择<span>用其他浏览器打开</span>就能下!<img class="ismile" src="http://weihui.yy.com/assets/img/weixin-smile.png"></p>
    </div>
</div>
<div class="w640 mgauto">
    <div class="album-head mt20">
        <div class="marketing">
            <img src="img/p1.jpg">
        </div>
        <div class="background-image-container-cover"></div>
        <div class="mask-info">
            <div class="usercard">

                <div class="ava">
                    <img src="img/t1.jpg">
                </div>
                <div class="user-info">
                    <div class="nk mb10">你容姐  <img class="gender" src="img/girl_icon.png"> </div>
                    <div class="school">清华大学</div>
                </div>
            </div>

            <h2 class="title">我是tsinghuaer</h2>
            <div class="info">
                <span class="praise">4</span>
            </div>
        </div>
    </div>
    <div class="main">
        <ul class="photos">
            <li class="photo-item">
                <a href="javascript:;">
                    <img src="img/limg/l1.jpg">
                </a>
                <div class="actions">
                    <span class="praise"></span>
                </div>
            </li>
            <li class="photo-item">
                <a href="javascript:;">
                    <img src="img/limg/l2.jpg">
                </a>
                <div class="actions">
                    <span class="praise"></span>
                </div>
            </li>
            <li class="photo-item">
                <a href="javascript:;">
                    <img src="img/limg/l3.jpg">
                </a>
                <div class="actions">
                    <span class="praise"></span>
                </div>
            </li>

        </ul>
    </div>
    <div class="l-comments"></div>
    <div class="fan">
        <ul class="fans">
            <li class="fans-like"><img src="img/t1.jpg" alt=""/></li>
            <li class="fans-like"><img src="img/t1.jpg" alt=""/></li>
            <li class="fans-like"><img src="img/t1.jpg" alt=""/></li>
            <li class="fans-like"><img src="img/t1.jpg" alt=""/></li>
            <li class="fans-like"><img src="img/t1.jpg" alt=""/></li>
            <li class="fans-like"><img src="img/t1.jpg" alt=""/></li>
        </ul>
        <div class="num-like"><i class="num-like-left"></i><span class="num-like-center"></span><i class="num-like-right"></i></div>
    </div>

        <div class="comments">
            <!--<ul class="comment-list">-->
                <!--<li class="comment-list-head"><img src="img/t1.jpg" alt=""/></li>-->
                <!--<li class="comment-list-words">-->
                    <!--<p class="comment-list-name">某某某</p>-->
                    <!--<p>增加运算类，会修改客户端代码，工厂方法只是把简单工厂的。</p>-->
                <!--</li>-->
                <!--<li class="comment-list-time">一天前</li>-->
            <!--</ul>-->
        </div>
        <footer class="w640 container">
            <div class="fa-inp col-xs-8 col-sm-8 col-md-8">
                <input type="text" class="fl com-text" placeholder="评论..." />
            </div>
            <div class="fa-share   col-xs-2 col-sm-2 col-md-2">
                <div class="row">
                    <div class="send center-block"></div>
                </div>
            </div>
            <div class="fa-like center-block  col-xs-2 col-sm-2 col-md-2" >
                <div class="row">
                    <div class="like center-block"></div>
                </div>
            </div>

        </footer>


</div>
</body>
</html>