master

分支 (1)

管理

管理

master

beautyPhoto
/
talentShow.html

<!DOCTYPE html>
<html>
<head lang="en">
    <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">
    <title>才艺展示</title>
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" media="all" href="css/base.css">
    <link rel="stylesheet" href="css/styleT.css"/>
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="js/ajax.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        #creat{
            width: 3.4rem;
            position: fixed;
            left: 50%;
            bottom: 2.5%;
            margin-left: -1.7rem;
            z-index: 999;
        }
    </style>
    <script>
        //判断是否是移动端
        function IsMobile()
        {
            var userAgentInfo = navigator.userAgent;
            var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
            var flag = false;
            for (var v = 0; v < Agents.length; v++) {
                if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = true; break; }
            }
            return flag;
        }
        //创建元素
        function create10() {
            var oMain=document.querySelector('.main');

            ajax({
                type: 'GET',
                url: 'json/video.json',
                dataType: 'json',
                success: function (str) {
                    var json=eval('('+str+')');
                    for (var i = 0; i < 10; i++) {
                        var oDiv = document.createElement('div');
                        oDiv.innerHTML = '<div class="video-list">\
                        <div class="imgBox" style="background:url('+json.lists[i].pic+') center top;background-size:cover "></div>\
                        <div class="user-message clearfix">\
                        <div class="header-page fl"><img src="'+json.lists[i].headp+'" alt="" /></div>\
                        <span class="username fl">'+json.lists[i].name+'</span>\
                        <span class="like fl">'+json.lists[i].mark+'</span>\
                        </div>\
                        <p class="describe">'+json.lists[i].describe+'</p>\
                        </div>';
                        oDiv.className='video-box col-xs-6 col-sm-4';
                        oMain.appendChild(oDiv);
                    }
                    Like();
                    setHeight();
                }
            });
        };
        //不同屏幕宽度的状态下设置不同的高度
        function setHeight(){
            var aVideoList=document.querySelectorAll('.video-list');
            var aImgBox=document.querySelectorAll('.imgBox');
            for(var i=0;i<aImgBox.length;i++){
                aImgBox[i].style.height=aVideoList[i].offsetWidth+'px';
            }
        }

        //点击心形变红
        function Like(){
            var aLike=document.querySelectorAll('.like');
            for(var i=0;i<aLike.length;i++){
                aLike[i].addEventListener('touchstart',function(){
                    this.style.background='url("img/heart2red.png") no-repeat left center';
                });
            }
        }

        //PC端拖拽
        function dragPC(oDiv) {
            var x = 0;
            oDiv.onmousedown = function (ev) {
                var oEvent = ev || event;
                var disX = oEvent.clientX - oDiv.offsetLeft;

                document.onmousemove = function (ev) {
                    var oEvent = ev || event;
                    var DW = document.body.offsetWidth;
                    if (DW > 640) {
                        DW = 640;
                    }

                    var num =DW-oDiv.offsetWidth;
                    x = oEvent.clientX - disX;

                    if (x > 0) {
                        x = 0;
                    }
                    if (x < num) {
                        x = num;
                    }
                    oDiv.style.left = x + 'px';

                };
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                    oDiv.releaseCapture && oDiv.releaseCapture();
                };
                oDiv.setCapture && oDiv.setCapture();
                return false;
            };
        }
        //导航栏拖拽
        function drag(oDiv){
            var x=0;
            oDiv.addEventListener('touchstart', function(ev){
                var disX=ev.targetTouches[0].pageX-x;

                function fnMove(ev){
                    var DW= document.body.offsetWidth;
                    if(DW>640){
                        DW=640;
                    }

                    var num=DW-oDiv.offsetWidth;
                    x=ev.targetTouches[0].pageX-disX;
                    if(x>0){
                        x=0;
                    }
                    if(x<num){
                        x=num;
                    }
                    oDiv.style.WebkitTransform='translate('+x+'px)';
                }
                function fnEnd(){
                    document.removeEventListener('touchmove', fnMove, false);
                    document.removeEventListener('touchend', fnEnd, false);
                }
                document.addEventListener('touchmove', fnMove, false);
                document.addEventListener('touchend', fnEnd, false);

//                ev.preventDefault();
            }, false);
        }
//        function hiddenText(){
//            var aDes=document.querySelectorAll('.describe');
//            var str=aDes.innerHTML;
//            var textLeng = 20;
//            if(str.length > textLeng ){
//                aDes.innerHTML = str.substring(0,textLeng )+"... ...";
//            }
//        }
        document.addEventListener('DOMContentLoaded', function(){
            var oDiv=document.querySelector('.title-list');
            var oMain=document.querySelector('.main');
            var aLi=oDiv.querySelectorAll('li');


            if(IsMobile()){
                drag(oDiv);//导航栏拖拽
            }else{
                dragPC(oDiv);//PC端导航栏拖拽
            }

            //生成10个元素
            create10();
//            hiddenText();
            for(var j=0;j<aLi.length;j++){
                aLi[j].addEventListener('click',function(){
                    for(var k=0;k<aLi.length;k++){
                        aLi[k].className='';
                    }
                    this.className='on';
                    oMain.innerHTML='';
                    create10();
//                    hiddenText();
                });
            }

            //加载元素
            window.onscroll = function () {
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                var clientH = document.documentElement.clientHeight;
                var scrollBottom = scrollTop + clientH;
                if (scrollBottom >= document.body.scrollHeight) {
                    create10();
                }
            };
        }, false);

    </script>
</head>
<body>
    <div class="container w640">
        <header>
            <ul class="title-list">
                <li class="on">女神</li>
                <li>最热</li>
                <li>绝招</li>
                <li>唱歌</li>
                <li>跳舞</li>
                <li>逗比</li>
                <li>动物</li>
                <li>美图</li>
                <li>舞蹈</li>
                <li>dota</li>
                <li>游戏</li>
                <li>中二</li>
            </ul>
        </header>
        <div class="main">,
            <!--<div class="video-box col-xs-6 col-sm-4">-->
                <!--<div class="video-list">-->
                    <!--<img src="img/t1.jpg" alt="" class="main-img"/>-->
                    <!--<div class="user-message clearfix">-->
                        <!--<div class="header-page fl"><img src="img/limg/l1.jpg" alt="" /></div>-->
                        <!--<span class="username fl">海绵宝宝啦啦啦</span>-->
                        <!--<span class="like fl">999</span>-->
                    <!--</div>-->
                    <!--<p class="describe">新鲜草莓的吃法啦啦啦啦啦哈哈哈哈哈哈</p>-->
                <!--</div>-->
            <!--</div>-->
        </div>
    </div>
    <a href="#"><img id="creat" src="img/icon_v.png" alt=""/></a>
</body>
</html>