第四个页面 PC端

最新推荐文章于 2022-12-19 17:46:08 发布
achel9722
最新推荐文章于 2022-12-19 17:46:08 发布
阅读量459
点赞数
本文链接：https://blog.csdn.net/achel9722/article/details/53424085
版权
虽然已经是第四个页面，但是PC端还没写过官网这样功能如此复杂的页面。。犯了几个严重的错误。
1.第一个重要的错误就是忘了在head标签里面设置编码方式为utf-8编码。导致已经上线了，有台湾的小伙伴发现是乱码。
很重要！
2.第二个重要的错误就是PC端的布局，一般不要写成absolute 不然屏幕变小的时候div之间的布局会乱。标准的做法是最外层是宽度100%，最小宽度是1000px 然后第一里层是设置为1000px 然后里面进行div的static或者relative布局
代码：
HTML：
<div class="main">
    <div class="nav">
        <div class="link">
            <a href="" class="nav-btn home"></a>
            <a href="javascript:;" class="nav-btn gonggao"></a>
            <a href="" class="nav-btn role" ></a>
            <a href="" class="nav-btn intro" ></a>
            <a href="" target="_blank" class="nav-btn fans"></a>
        </div>
    </div>
    <div class="center">

    <div class="download">
    </div>

    <div class="box">
        <div class="banner swiper-container swiper-container-horizontal" id="banner">
           
        </div>

        <div class="right">
        </div>
    </div>

    <div class="content">
        <div class="facebook">
        </div>

        <div class="video">          
        </div>

        <div class="sheng">            
        </div>

        <div class="roles">
        </div>

    </div>
    </div>
    <div class="share">
        <div class="center-down">
            <div class="share-left" >
           </div>

           <div class="share-right">
           </div>
        </div>
    </div>
</div>

<div class="footer">
    <div class="block clearfix">
        <div class="footer-left">
        </div>
        <div class="footer-right">
        </div>
    </div>
</div>




CSS：

.main{
    min-width:1000px;
    background:url("../image/bg.png") top center no-repeat;
    background-color: #1f1631;
    height:2000px;
}

.nav{
    width:100%;
    background:url("../image/top.png")top center no-repeat;
    height:120px;
    min-width:1000px;
}

.link{
    padding-top: 30px;
    width: 1000px;
    margin: 0 auto;
    height: 100px;
}

.nav-btn{
    font-size:16px;
    text-decoration: none;
    text-align: center;
    color: white;
    margin-left: auto;
    margin-right: 0;
    height:100px;
    width:20px;
}

.nav-btn:active{
    color:#cda053;
}

.home{
    margin-right: 7%;
    color:#cda053;
    padding-left:3%;
}

.role{
    margin-left: 6%;
}

.intro{
    margin-left: 28%;
}

.fans{
    margin-left: 5%;
}

.nav-btn:hover{
    color:#cda053;
}.center{
    width: 1000px;
    position: relative;
    margin: 0 auto;
    top: 280px;
    height: 1300px;
}
.share-left{
    float: left;
    height: 100%;
}

.share-right{
    float: left;
    margin-left: 100px;
    height: 100%;
}

.center-down{
    width: 820px;
    margin: 0 auto;
    height:100%;
}
.download{
    width: 360px;
    height: 270px;
    background: url('../image/libao.png')top right no-repeat;
    float: right;
}


.box{
    width: 1000px;
    height: 280px;
}


.banner{
    float:left;
    width:660px;
    height:280px;
    margin-top: 100px;
}

.right{
    float:right;
    height:280px;
    width:320px;
    margin-top: 100px;
}


.content{
    width: 1000px;
    height: 700px;
}

.facebook{
    width: 320px;
    height: 450px;
    float:left;
    margin-bottom: 20px;
}

.video{
    width: 666px;
    height: 300px;
    left: 340px;
    text-align:center;
    background:url("../image/videobg.png")no-repeat;
    float:right;
}

.sheng{
    width: 320px;
    height: 220px;
    top: 465px;
}

.roles{
    margin-top:20px;
    background:url("../image/rolebg.png")100% no-repeat;
    width: 670px;
    height: 300px;
    top: 320px;
    left: 340px;
    float:right;
}
.share{
    position: relative;
    width: 100%;
    height: 125px;
    top: 400px;
    background-color: #4e3577;
    min-width: 1000px;
}




3.检查网页的时候需要将浏览器宽度变小，然后将左右的滚动条拉到最右边看是否有元素超出某个范围，或者背景或者背景图片是否有没覆盖的地方。
4.播放视频 这次的网页中要播放许多视频。基本思路就是先写一个mask最外层。然后内层先是一个table-cell控制其垂直居中，然后内层再包裹一个center-block控制其水平居中，然后内层才是真正播放视频的内容，最内层就是一个iframe标签，引用YouTube的API。这次页面中的视频分为两种，一种是YouTube上的视频播放，要引用YouTube的一部分视频播放插件；另一种就是直接播放服务器上的视频，用HTML5的video标签。video标签中的视频播放相对简单一些，最外层 一个mask
 然后内层一个video-ctn然后就是一个video标签。用JavaScript代码来控制这个video标签的src。
YouTube视频代码：
HTML：
<div class="mask popup hide" id="box-video">
        <div class="Table-Cell">
            <div class="Center-Block">
                <div class="close"><img src="close.png"></div>
                <div class="video-content">
                    <div class="video-container hide">
                        <div id="video-player"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<div class="video">
            <a target="_blank" href="javascript:;" class="video-btn"></a>
</div>






CSS：

.mask {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.5);
    display: table;
    top: 0;
    left: 0;
}
.mask .Table-Cell {
    display: table-cell;
    vertical-align: middle;
}

.mask .Table-Cell .Center-Block {
    margin: 0 auto;
    text-align: center;
}

.mask .Table-Cell .Center-Block .close {
    width: 60px;
    height: 60px;
    position: relative;
    right: -704px;
    cursor:pointer;
}.video-container{
    display: block;
    position: relative;
    top: -45px;
}






JavaScript：

$('.video-btn').bind('click',function(){
    $('#box-video').removeClass('hide');
});var youtubeTag = document.createElement('script');youtubeTag.src = "https://www.youtube.com/iframe_api";var firstScriptTag = document.getElementsByTagName('script')[0];firstScriptTag.parentNode.insertBefore(youtubeTag, firstScriptTag);//onYouTubePlayerAPIReady()var
 player;function onYouTubeIframeAPIReady() { player = new YT.Player('video-player', { height: '425px', width: '678px', videoId: 'xxx', events:{ 'onReady':onPlayerReady } });}// 4. The API will call this function when the video player is ready.function onPlayerReady(event)
 {}// 5. The API calls this function when the player's state changes.// The function indicates that when playing a video (state=1),// the player should play for six seconds and then stop.var done = false;function onPlayerStateChange(event) { if (event.data
 == YT.PlayerState.PLAYING && !done) { setTimeout(stopVideo, 6000); done = true; }}function stopVideo() { player.stopVideo(); $('#box-video').addClass('hide');}function playPause() { var myVideo = document.getElementsByClassName('v-control')[0]; if (myVideo.paused)
 myVideo.play(); else myVideo.pause();}$(".video-btn").on('click',function(){ $('#box-video').find('.Center-Block').add('.video-container').fadeIn(function () { $(this).removeClass('hide'); $("#box-video").removeClass('hide'); if(player.playVideo){ player.playVideo();
 } });});$('#box-video').find('.close').on('click',stopVideo);




HTML5视频代码：
HTML：

<div class="video-popup hide">
        <div class="video-ctn"></div>
</div>


<div class="r_content">
                <div class="hide rc0">
                    <a class="role_audio" id="xingshi" data-auname="1.mp3">
                    <a class="v_btn d0" ></a>
                    <a class="voice v0"></a>
                </div>
                <div class="hide rc1">
                    <a class="role_audio" id="binghe" data-auname="2.mp3"></a>
                    <a class="v_btn d1" ></a>
                    <a class="voice v1"></a>
                </div>
                <div class="hide rc2">
                    <a class="role_audio" id="zilong" data-auname="3.mp3"></a>
                    <a class="v_btn d2" ></a>
                    <a class="voice v2"></a>
                </div>
                <div class="hide rc3">
                    <a class="role_audio" id="shun" data-auname="4.mp3"></a>
                    <a class="v_btn d3" ></a>
                    <a class="voice v3"></a>
                </div>
                <div class="hide rc4">
                    <a class="role_audio" id="yihui" data-auname="5.mp3"></a>
                    <a class="v_btn d4" ></a>
                    <a class="voice v4"></a>
                </div>
                <div class="hide rc5">
                    <a class="role_audio" id="yadianna" data-auname="6.mp3"></a>
                    <a class="v_btn d5" ></a>
                    <a class="voice v5"></a>
                </div>
            </div>

CSS：

.video-popup .video-ctn .v-control {
    width: 700px;
}.video-popup {
    background: rgba(33, 33, 33, 0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    text-align: center;
    white-space: nowrap;
}

.video-ctn {
    display: inline-block;
    vertical-align: middle;
    padding: 10px 15px;
    background: #000000;
    position: relative;
    top: 10%;
}





JavaScript：

$('.v_btn.d0').on('click',function(){
    $('.video-ctn').empty();
    $('.video-ctn').append("<video class='v-control c1' autoplay='autoplay' src='1.mp4' controls='controls'></video>");
    $('.video-popup').removeClass('hide');

});
$('.v_btn.d1').on('click',function(){
    $('.video-ctn').empty();
    $('.video-ctn').append("<video class='v-control c1' autoplay='autoplay' src='2.mp4' controls='controls'></video>");
    $('.video-popup').removeClass('hide');

});
$('.v_btn.d2').on('click',function(){
    $('.video-ctn').empty();
    $('.video-ctn').append("<video class='v-control c1' autoplay='autoplay' src='3.mp4' controls='controls'></video>");
    $('.video-popup').removeClass('hide');

});
$('.v_btn.d3').on('click',function(){
    $('.video-ctn').empty();
    $('.video-ctn').append("<video class='v-control c1' autoplay='autoplay' src='4.mp4' controls='controls'></video>");
    $('.video-popup').removeClass('hide');

});
$('.v_btn.d4').on('click',function(){
    $('.video-ctn').empty();
    $('.video-ctn').append("<video class='v-control c1' autoplay='autoplay' src='5.mp4' controls='controls'></video>");
    $('.video-popup').removeClass('hide');

});
$('.v_btn.d5').on('click',function(){
    $('.video-ctn').empty();
    $('.video-ctn').append("<video class='v-control c1' autoplay='autoplay' src='6.mp4' controls='controls'></video>");
    $('.video-popup').removeClass('hide');

});

$('.video-popup').on('click',function(){
    var myVideo = document.getElementsByClassName('v-control')[0];
    myVideo.pause();
    $('.video-popup').addClass('hide');
});

$(".video.v-btn").on('click',function(){
    $('#box-video').find('.Center-Block').add('.video-container').fadeIn(function () {
        $(this).removeClass('hide');
        $("#box-video").removeClass('hide');
        if(player.playVideo){
            player.playVideo();
        }
    });
});



5.播放声音 这次的网页中还有许多声音的播放。具体思路就是设置一个隐形的audio标签放在页面中。因为不同的角色有不同的声音，所以通过在每个角色中设置一个a标签，用HTML5最新的属性data-xxx，设置声音的路径，通过jQuery的.data（）方法获取这个属性的值。然后通过JavaScript绑定这个a标签的点击函数。
HTML：

<div id="audio-container"></div>
            <audio class="closed-cv"></audio>

JavaScript：

var isIE=!-[1,];

$(".role_audio").click(function (e) {

    e.stopPropagation();
    var auname = $(this).data('auname');
    var audioSrc = ""+auname;

    var audioHtml = "<object class='skill-audio-j hide' classid='CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0'> \n\
                       <param name='src' value='"+audioSrc+"'> \n\
                       <param name='autostart' value='0'> \n\
                    </object>";
    $('#audio-container').empty().append(audioHtml);
    if (!isIE) {
        $('.closed-cv')[0].pause();
        $('.closed-cv').attr('src', audioSrc);
        $('.closed-cv')[0].play();
    }else{
        setTimeout(function(){
            $("#closed-cv")[0].play();
        },500);
    }
});

6.还有一个不同角色换背景图片的代码
HTML：

<div class="roles">
            <div class="rolebar">
                <div class="roless role0"><img src="1.png"></div>
                <div class="roless role1"><img src="2.png"></div>
                <div class="roless role2"><img src="3.png"> </div>
                <div class="roless role3"><img src="4.png"></div>
                <div class="roless role4"><img src="5.png"> </div>
                <div class="roless role5"><img src="6.png"></div>
            </div>

            <div id="audio-container"></div>
            <audio class="closed-cv"></audio>

            <div class="r_content">
                <div class="hide rc0">
                    <a class="role_audio" id="xingshi" data-auname="1.mp3">
                    <a class="v_btn d0" ></a>
                    <a class="voice v0"></a>
                </div>
                <div class="hide rc1">
                    <a class="role_audio" id="binghe" data-auname="2.mp3"></a>
                    <a class="v_btn d1" ></a>
                    <a class="voice v1"></a>
                </div>
                <div class="hide rc2">
                    <a class="role_audio" id="zilong" data-auname="3.mp3"></a>
                    <a class="v_btn d2" ></a>
                    <a class="voice v2"></a>
                </div>
                <div class="hide rc3">
                    <a class="role_audio" id="shun" data-auname="4.mp3"></a>
                    <a class="v_btn d3" ></a>
                    <a class="voice v3"></a>
                </div>
                <div class="hide rc4">
                    <a class="role_audio" id="yihui" data-auname="5.mp3"></a>
                    <a class="v_btn d4" ></a>
                    <a class="voice v4"></a>
                </div>
                <div class="hide rc5">
                    <a class="role_audio" id="yadianna" data-auname="6.mp3"></a>
                    <a class="v_btn d5" ></a>
                    <a class="voice v5"></a>
                </div>
            </div>
        </div>

CSS：

.rolebar{
    float:left;
    height: 250px;
    width:150px;
    position:relative;
    top: 32px;
    left: 33px;
}

.roless{
    background:url("../image/normal.png")no-repeat;
    float: left;
    margin: 10.5px 8%;
    cursor:pointer;

}

.roless:hover{
    background-position:0 -57px;
}

.roless >img{

    width: 85%;
    margin-top: 6%;
    margin-left: 7%;
}

.v_btn{
    display:block;
    background: url("../image/vtn.png")no-repeat;
    position:relative;
    width:54px;
    height:54px;
    top: 25px;
    left: 385px;
    cursor:pointer;
}

.v_btn:hover{
    background-position: 0 -54px;
}

.r_content{
    float:right;
    width:470px;
    height:300px;
}

.r_content .rc0{
    background: url("../image/1.png")no-repeat;
    height: 100%;
    width: 100%;
}

.r_content .rc1{
    background: url("../image/2.png")no-repeat;
    height: 100%;
    width: 100%;
}

.r_content .rc2{
    background: url("../image/3.png")no-repeat;
    height: 100%;
    width: 100%;
}

.r_content .rc3{
    background: url("../image/4.png")no-repeat;
    height: 100%;
    width: 100%;
}

.r_content .rc4{
    background: url("../image/5.png")no-repeat;
    height: 100%;
    width: 100%;
}

.r_content .rc5{
    background: url("../image/6.png")no-repeat;
    height: 100%;
    width: 100%;
    background-size: 100% 100%;
}

.r_content div.active {
    display: block;
}

.video .video-btn{
    display:block;
    position:relative;
    width:360px;
    height:70px;
    background:url("../image/bigvtn.png")no-repeat;
    top: 115px;
    left: 140px;
}

.video .video-btn:hover{
    background-position:0 -70px;
}.role_audio{
    display:block;
    position:relative;
    width: 150px;
    height: 30px;
    cursor: pointer;
}




JavaScript：

for(var i=0;i<=5;i++){
    (function(){
        var p=i;
        $('.role'+p).hover(function(){
            $(this).closest('.roles').find('.r_content').find('div').removeClass('active');
            $(this).closest('.roles').find('.rc'+p).addClass('active');
        },function(){
        })
    })();
}



7.官网领取礼包的弹框。pc端的弹框其实比较容易写。可以把像素都写死。
HTML:

<div class="mask popup hide" id="box-yuyue">
        <div class="Table-Cell">
            <div class="Center-Block">
                <div class="close" id="yuyue"></div>
                <select id="area" name="area" class="area">
                    <option value="1" selected="">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <input id="phoneNum" type="text" maxlength="11" placeholder="请输入手机号码">
                <p class="error-tips"></p>
                <div class="device clearfix">
                    <p id="device-andriod" class="device-choice float-l current" data-device="android">Android</p>
                    <p id="device-ios" class="device-choice float-r" data-device="ios">iOS</p>
                </div>
                <div id="submit"></div>
            </div>
        </div>
    </div>

    <div class="mask popup hide" id="box-yuyue-ss">
        <div class="Table-Cell">
            <div class="Center-Block">
                <div class="close" id="ss"></div>
                <p class="pp">
                    您的礼包码为<span id="ma" style="color:red">xxx</span>
                </p>
            </div>
        </div>
    </div>

CSS：

#box-yuyue .Center-Block {
    background: url("../image/yy.png") no-repeat;
    width: 624px;
    height: 522px;
    position: relative;
}
.mask .Table-Cell .Center-Block {
    margin: 0 auto;
    text-align: center;
}

.mask .Table-Cell .Center-Block .close {
    width: 60px;
    height: 60px;
    position: relative;
    right: -704px;
    cursor:pointer;
}

#area {
    position: absolute;
    top: 135px;
    left: 140px;
    height: 45px;
    border: 2px solid #af9251;
    color: white;
    line-height: 38px;
    width: 121px;
    text-indent: 11px;
    background: url("../image/down.png") center right no-repeat;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: #241c36;
}

#area option {
    height: 45px;
    line-height: 45px;
    color: white;
    border: 2px solid #af9251;
    background: #241c36;
}

#phoneNum {
    position: absolute;
    top: 135px;
    left: 270px;
    height: 39px;
    width: 200px;
    border: 2px solid #af9251;

    text-indent: 10px;
    line-height: 40px;
    color: white;
    background-color: #241c36;
}

p {
    margin-bottom: 10px;
}

#device-andriod {
    position: absolute;
    left: 140px;
    top: 200px;
    width: 118px;
    height: 43px;
    background-color: #241c36;

}
.device-choice.current {
    border: 2px solid #ffe465;
}

.device-choice.current:after {
    position: absolute;
    content: "";
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffe465 url("../image/check.png") center center no-repeat;
    right: 5px;
    top: 4px;
}

#device-ios {
    position: absolute;
    top: 200px;
    left: 270px;
    height: 43px;
    line-height: 43px;
    text-indent: 13px;
    text-align: left;
    background-color: #241c36;
}

.device-choice {
    position: relative;
    width: 135px;
    height: 46px;
    font-size: 14px;
    color: #fff;
    border: 2px solid #af9251;
    line-height: 46px;
    text-indent: -37px;
    cursor: pointer;
}

#submit {
    background: url("../image/get.png") 0 0;
    width: 227px;
    height: 61px;
    position: absolute;
    top: 270px;
    left: 160px;
    cursor:pointer;
}

#submit:hover{
    background-position:0 -62px;
}#box-yuyue-ss .Center-Block{
    width:565px;
    height:220px;
    position:relative;
    background:url("../image/success.png")no-repeat;
}

#box-yuyue-ss span{
    font-size:17px;
}

#box-yuyue-ss p{
    color: white;
    position: absolute;
    top: 120px;
    font-size: 17px;
    margin-right: 120px;
    margin-left: 60px;
    text-align: left;
}

#box-video .Center-Block {
    background: url("../image/video-bg.png") no-repeat;
    width: 710px;
    height: 460px;
}#yuyue{
    position: relative;
    left: 554px;
}


#ss{
    position: relative;
    right: -504px;
}






JavaScript：

$('.close').bind('click',function(e){
    var _this=$(this);
    _this.closest('.mask').addClass('hide');
});

$('.libao').bind('click',function(e){
    $('#box-yuyue').removeClass('hide');
    $('.mask').removeClass('hide');
    $('#box-yuyue-ss').addClass('hide');
   $('#box-video').addClass('hide');
});

8.这次还完成了一个跳转其他页面的需求。
具体就是在html目录下创建一个新目录，然后在那个目录中创建php代码，然后将地址写成/html/page/文件夹名/代码文件名
在跳转一些结构相同只是内容不同的页面时可以在地址的后面追加问号，问号后面的内容相当于页面之间传递的参数。在新页面中可以获取这个问号后面的字符串：用JavaScript：location.search。然后就可以控制页面中的显示内容了。
JavaScript：

$(document).ready(function () {
        $('#mymask').css("display","none");

        var s = location.search;
        s = s.substring(1);
        s = parseInt(s);

        mySwiper1.slideTo(s, 1, false);
    })

9.页面中进行锚定位：
HTML：

<a href="javascript:;" class="nav-btn gonggao">遊戲公告</a>

JavaScript：

$('.gonggao').bind('click',function(){
    $('html, body').animate({
        scrollTop: $(".facebook").offset().top
    }, 300);

});

10.swiper插件中有一个功能是滑动到指定索引的页面 见8



11.技能hover切换
JavaScript：

skill = '<h1 class="st _0">'+role_detail[i].skill0+'</h1>'+
        '<h1 class="st _1 hide">'+role_detail[i].skill1+'</h1>'+
        '<h1 class="st _2 hide">'+role_detail[i].skill2+'</h1>'+
        '<h1 class="st _3 hide">'+role_detail[i].skill3+'</h1>'+
        '<h1 class="st _4 hide">'+role_detail[i].skill4+'</h1>';

    $("#"+s).find(".skill-tittle").html(skill);

    //技能描述
    skill_detail = '<p class="text t0">'+role_detail[i].skill0_+'</p>'+
        '<p class="text t1 hide">'+role_detail[i].skill1_+'</p>'+
        '<p class="text t2 hide">'+role_detail[i].skill2_+'</p>'+
        '<p class="text t3 hide">'+role_detail[i].skill3_+'</p>'+
        '<p class="text t4 hide">'+role_detail[i].skill4_+'</p>';

    $("#"+s).find(".content").html(skill_detail);
$('.skill').find('.s-img').each(function(i){
    this.οnclick=function(){
        var _ele=$(this).closest('.skill').find('.skill-dis');
        var i=$(this).prop("class").substr(-1,1);

        _ele.find('.st').addClass('hide');
        _ele.find('.st._'+i).removeClass('hide');
        _ele.find('.text').addClass('hide');
        _ele.find('.text.t'+i).removeClass('hide');
    }
});



12.还有就是加载背景图片的时候，显示一个简单的动画
HTML：

<div class="page-loading">
    <div class="seiya"></div>
</div>

CSS：

.page-loading{
    width: 100%;
    height: 100%;
    position: fixed;
    background: black;
    z-index: 1000000;
}

.page-loading .seiya{
    width: 100px;
    height: 100px;
    margin: 0 auto;
    top: 37%;
    background: gray;
    position: relative;
    background: url("../image/loading.png") 0 0 no-repeat;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function:step-start;
    -webkit-animation-name: person-normal;
    -webkit-animation-duration: 800ms;
}

@-webkit-keyframes person-normal{
    0% {background-position: 0 0;}
    14.3% {background-position: -100px 0;}
    28.6% {background-position: -200px 0;}
    42.9% {background-position: -300px 0;}
    57.2% {background-position: 0 -100px;}
    71.5% {background-position: 0 -200px;}
    85.8% {background-position: -100px -100px;}
    100% {background-position: 0 0;}
}

JavaScript：

var imgUrl='';

loadImage(imgUrl, pageInit);

function loadImage(url,callback){
    var img = new Image();
    img.src = url;
    var timer = setInterval(function(){
        if(img.complete){
            callback();
            clearInterval(timer);
        }
    })
}

function pageInit(){
    $('.page-loading').addClass('hide');
}



pc端大概就是这些。
移动端我只参与了视频和音频的添加以及页面之间的跳转，和pc端是类似的
移动端：
1.禁止横屏：
JavaScript：

function orientationChange() {
    var LAND_WINDOW_ALERT_HTML = "<div id='land-window-alert-j' style='display:table;background-color:rgba(0,0,0,0.8);z-index:99999; position:fixed; width:100%; height:100%;'>\n\
    <div style='display:table-cell;vertical-align:middle;text-align:center;'>\n\
      <img style='display:block; margin:0 auto; height:20%' src='land_window_alert.png'>\n\
    </div>\n\
  </div>"
    switch (window.orientation) {
        case 0:
            $('.warp').show();
            $('body').find('#land-window-alert-j').remove();
            break;
        case -90:
            $(".warp").hide();
            $('body').append(LAND_WINDOW_ALERT_HTML);
            $('body').scrollTop(0);
            break;
        case 90:
            $(".warp").hide();
            $('body').append(LAND_WINDOW_ALERT_HTML);
            $('body').scrollTop(0);
            break;
        case 180:
            $('.warp').show();
            $('body').find('#land-window-alert-j').remove();
            break;
    };
};

$(document).ready(function () {
    orientationChange();
    window.onorientationchange = orientationChange;
});





ps:warp是body内部的第一层div

总之这次是一个比较复杂的项目。而且包括太多的文字上的操作。但是全部完成的时候还是觉得很有成就感的。