一个简单的移动专题

        这篇博客其实写于昨天（2015-12-09），昨天早上，我写博客，我想把专题中动态闪烁的小圆圈录制成gif格式图片上传到博客中，问度娘下载了个录制的软件，打开发现和教程上的图不同，不会用，就卸了，卸的时候，电脑卡住了，2分钟后，电脑显示“电脑遇到关键问题，将在一分钟后重新启动，请保存。。。”，我想着我的博客还没发表，但是电脑实在太卡了，我估计会自动保存为草稿的吧，结果，今天一看，没了，哎，重写吧。我的电脑傻了，重启之后，完全像是重装了一遍系统，桌面空空如也。。在高大上的系统面前，我太弱小了，呜呜。

       下面来说说我做的这个专题，以及遇到的一些问题。

       这个专题包含的是一个全屏的背景图，头部有一些闪烁的小圆圈，需要插入视频，焦点图轮播，可供用户识别的二维码。

       1、闪烁的小圆圈，一开始我的思路是傻傻的，想要把小圆圈从素材中抠出来，然后在加动态闪烁效果，问题来了，小圆这么小，我的PS不是很高超，这方法肯定是错误的，后来，我用了div替代，像之前的单选按钮那样，把div变成按钮，大小就可以自己设置啦，哈哈。

 

        html结构：

1         <div class="radius0 radius"></div>
        <div class="radius1 radius"></div>
        <div class="radius2 radius"></div>
        <div class="radius3 radius"></div>
        <div class="radius4 radius"></div>
        <div class="radius5 radius"></div>

         部分css：

        .radius0{
            width: 20px;
            height: 20px;
            position: absolute;
            top: 141px;
            left: 260px;
            background-color: white;
            border: 1px;
            border-radius: 224px;
         }
         .radius1{
                width: 25px;
                height: 25px;
                position: absolute;
                top: 222px;
                left: 385px;
                background-color: white;
                border: 1px;
                border-radius: 224px;
        }

            方法：

       var a=1;
       function A(){
            if(a<0){a=1;}
            $(".radius").eq(0).css("opacity",a-=0.1);
            if(a<0){a=1;}
            $(".radius").eq(1).css("opacity",a-=0.2);
            if(a<0){a=1;}
            $(".radius").eq(2).css("opacity",a+=0.1);
            if(a<0){a=1;}
            $(".radius").eq(3).css("opacity",a+=0.2);
            if(a<0){a=1;}
            $(".radius").eq(4).css("opacity",a-=0.1);
            if(a<0){a=1;}
            $(".radius").eq(5).css("opacity",a-=0.2);
       }
       setInterval(A,500);

         

                   静态效果图

            2、网页中插入视频，挺简单的：

            首先定义视频播放区域的背景颜色为黑色，然后往中间放一个播放的按钮：

点击中间按钮的时候播放视频：

       $(".clickB").on("click",function(){
             $(".vido")[0].innerHTML='<video class="video" id="video" autoplay src="http://baby.pcvideo.com.cn/pcbaby/vpcbaby/2015/12/08/1449554173666-vpcb               aby-75884-1.mp4"></video>';
             $(".clickB").hide();

       })

 

 

              如果不定义类video的大小，视频会溢出上面的框，所以要加样式：

        #video{
            width:600px;
             height:300px;
        }

              3、焦点图轮播：

               直接使用swiper插件即可，so easy

       var mySwiper1 = new Swiper ('.swiper-container', {
            loop:true,
            direction : 'horizontal',
            autoplay : 2000,
            autoplayDisableOnInteraction : false,
            mousewheelControl : true,
            watchSlidesProgress : true,
       });

             4、当二维码被放在背景图中，浏览器是识别不到的，所以要把二维码从背景图中抠出来，用<img>标签显示给用户

        <div class="ma">
            <img src="ewm.jpg" />
        </div>

         .ma{
            position:absolute;
            bottom:139px;
            height:258px;
            widht:255px;
            left:50%;
            margin-left:-127px;
         }

               到这里，一个简单的专题页面完成了。