master

分支 (1)

管理

管理

master

beautyPhoto
/
uploadPhoto3.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta charset="utf-8">
    <!-- 使用不同智能机的宽度 -->
    <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">
    <meta name="renderer" content="webkit">
    <title>编辑封面</title>
    <!-- 标注网页的作者 -->
    <meta name="author" content="[email protected]">
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" media="all" href="css/base.css">
    <link rel="stylesheet" href="css/styleU.css"/>
    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <!--<script type="text/javascript" src="js/cropbox.js"></script>-->
    <script>
        $(document).ready(function(){
            var H=$('#content li').width();
            $('#content li').each(function(i){
                $(this).css('height',H);
                var index=$('#content li').index(this);

                $(this).on('touchstart',function(){
                    $('.l-cover').each(function(i){
                        $('.l-cover').eq(i).css('display','none');
                        $('.l-cover').eq(index).css('display','block');
                    });

                    $('#main-img').attr('src',$('#content img').eq(index).attr('src'));
                });
            });

//            $('.btn').on('touchstart',function(){
//                $(this).css('display','none');
//                $('html,body').scrollTop(0);
//                $('.shadow,.cover').css('display','block');
//            });
            $('.content img').css('width','100%');
        });
    </script>
</head>
<body>
<div class="container">
    <div id="title">
        <input type="text" placeholder="请在此输入标题" class="title"/>
    </div>
    <div class="change-cov">
            <!--<div class="shadow" style="display: none"></div>-->
        <div class="img-box"><img src="img/p2.jpg" alt="" id="main-img"/></div>
        <p class="hint">点击图片调整封面</p>
        <!--<button class="ok" style="display: none;">确定</button>-->
    </div>

    <ul class="content" id="content">
        <div class="cover"></div>
        <li><div><span class="l-cover" style="display: none;"></span><img src="img/limg/l1.jpg" alt=""/></div></li>
        <li><div><span class="l-cover" style="display: none;"></span><img src="img/limg/l2.jpg" alt=""/></div></li>
        <li><div><span class="l-cover" style="display: none;"></span><img src="img/limg/l3.jpg" alt=""/></div></li>
        <li><div><span class="l-cover" style="display: none;"></span><img src="img/limg/l4.jpg" alt=""/></div></li>
        <li><div><span class="l-cover" style="display: none;"></span><img src="img/limg/l5.jpg" alt=""/></div></li>
        <li><div><span class="l-cover" style="display: none;"></span><img src="img/limg/l6.jpg" alt=""/></div></li>
        <li><div><span class="l-cover" style="display: none;"></span><img src="img/limg/l7.jpg" alt=""/></div></li>
        <li><div><span class="l-cover" style="display: none;"></span><img src="img/limg/l8.jpg" alt=""/></div></li>
    </ul>
    <div id="main">
        <div class="next">下一步</div>
    </div>

</div>

</body>
</html>