作為一名前端程式媛，雖然整天和程式碼打交道，但是還是有一顆小清新的內心，雖然有時候加起班來不是人，但是空閒的時候還是會整理一下思緒，順便整理一下自己，兩個多月的加班，一直沒有更新，今天就把自己最近做的一些h5的東西的想法整理一下，也好慰藉一下我這兩個多月的不辭辛苦，好了，上面純屬作為女孩子的自我嘮叨，切入正題：

首先來看一下一些h5的頁面效果

二維碼奉上，掃碼檢視，當然也有很多不足，這是我做的第一個算是長圖文似的H5吧，動畫不少，不過應該還有一些問題，希望能多多指教

剛開始做這種長圖文的頁面踩了很多坑

做法1：（不推薦）

因為是h5所以都是用的圖片去實現一些動畫的，所以切圖還是很關鍵的，這裡提醒各位做之前一定要根據設計圖去切背景圖片，看哪些需要動畫就單獨切出來，哪些不需要就當背景，這個專案我當時切得背景是一塊一塊的切得，因為很長，怕圖片載入太慢所以就一個板塊一個板塊去切，這時候要注意每個板塊背景要銜接好，不然後期動畫什麼的定位很麻煩的；

接下來說一下當時我的做法，貼個程式碼

 <div class="bg-wrap" >
        <div class="pop-balck" style="display: none;"></div>

        <img src="images/zijin/page1-bg.png" class="bg-img page1">
        <img src="images/zijin/page2.png" class="bg-img page2">
        <img src="images/zijin/page3.png" class="bg-img page3">
        <img src="images/zijin/page4.jpg" class="bg-img page4">
        <img src="images/zijin/bgnew_05.jpg" class="bg-img common page5">
        <img src="images/zijin/bgnew_06.jpg" class="bg-img common page6">
        <img src="images/zijin/bgnew_07.jpg" class="bg-img common page7">
        <img src="images/zijin/bgnew_08.png" class="bg-img common page8">

        <div style="clear: both"></div>
    </div>

　　這是我的背景，我是把所有的背景放到一個容器裡去載入根據背景圖片的寬度確定整個長圖文的寬度，下面是我用js  loading之後去動態新增整個頁面的寬度，並執行第一版面的動畫，動畫通過新增類去執行

 $("body").css({
                                "width":"100%",
                                "height":"100%",
                                "overflow":"hidden"
                            });
                            $(
 
".allPic").hide();
                            var bg_width=0;
                            var w_height=$(window).height()
                            console.log("height:"+w_height);

                            $(".bg-wrap img").each(function (index) {
                                $(this).css("height",w_height);
                                bg_width+=$(this).width();
                                $(this).css({
                                    "width":$(this).css("width"),
                                    "float":"left"
                                })
                            })
                            $('.bg-wrap,.longcontent,.allPic').css({
                                "width":bg_width,
                                "height":w_height
                            })
                            $('.allPic').width(bg_width);
                            $(".p103,.p102,.p101").click(function () {

                                $("body").css({
                                    "width":bg_width,
                                    "height":w_height,
                                    "overflow-y":"hidden",
                                    "overflow-x":"auto"
                                });
                                $(".link-page").fadeOut(200);
                                $(".bg-wrap").css({
                                    "position": "absolute",
                                    "left": 0,
                                    "top": 0,
                                })
                                $(".bg-wrap").fadeIn();
                                $(".allPic").show();
                                $(".t1,.t2,.t3,.t4,.t5,.t6,.t7").addClass("cur");
                                $(".logo").addClass("cur");
                            });

最後就是根據滾輪滑動到某個位置去判斷該出現什麼動畫，這裡我也是動態獲取某個圖片所在位置然後去判斷出現什麼動畫，下面貼點程式碼

    $(window).scroll(function(){

                                var screenWidth = $(window).width()*0.8;
                                var fullWidth = $(window).width()
                                if($(window).scrollLeft() >= $(".people").position().left-screenWidth&&$(window).scrollLeft() <= $(".people").position().left+screenWidth){
                                    $(".people").addClass("cur");
                                    $(".t1,.t2,.t3,.t4,.t5,.t6,.t7").addClass("cur");
                                    $(".logo").addClass("cur")
                                }else if($(window).scrollLeft()>=$(".w1").position().left-screenWidth&&$(window).scrollLeft() <$(".w1").position().left+screenWidth){
                                    $(".t1,.t2,.t3,.t4,.t5,.t6,.t7,user4").addClass("hide");
                                    $(".t1,.t2,.t3,.t4,.t5,.t6,.t7,.logo").removeClass("cur");
                                    $(".user4").removeClass("ly");
                                    $(".w1,.w2,.w3").addClass("cur");
                                    $(".timeline").removeClass("lineAnmitate");
                                    $(".timeline,.year2000,.year2003,.year2005,.year2008,.year1993,.now").addClass("none");
                                    $(".timeline").removeClass("lineback");
                                    $(".year2000,.year2003,.year2005,.year2008,.year1993,.now").removeClass("tool_1");

                                }

　　大概就是根據滾輪的位置以及你要出現的圖片的位置去判斷動畫，雖然這個方法有點笨拙不過這是當時能想到的方法，後續也做了其他的H5有了一定的改進，希望多多指教