关于H5的一些杂思细想（一）

作为一名前端程序媛，虽然整天和代码打交道，但是还是有一颗小清新的内心，虽然有时候加起班来不是人，但是空闲的时候还是会整理一下思绪，顺便整理一下自己，两个多月的加班，一直没有更新，今天就把自己最近做的一些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有了一定的改进，希望多多指教

关于H5的一些杂思细想（一）

猜你喜欢