zoukankan      html  css  js  c++  java
  • 一个简单的移动专题

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

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

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

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

            html结构:

    1         <div class="radius0 radius"></div>
    2         <div class="radius1 radius"></div>
    3         <div class="radius2 radius"></div>
    4         <div class="radius3 radius"></div>
    5         <div class="radius4 radius"></div>
    6         <div class="radius5 radius"></div>

             部分css:

     1         .radius0{
     2             width: 20px;
     3             height: 20px;
     4             position: absolute;
     5             top: 141px;
     6             left: 260px;
     7             background-color: white;
     8             border: 1px;
     9             border-radius: 224px;
    10          }
    11          .radius1{
    12                 width: 25px;
    13                 height: 25px;
    14                 position: absolute;
    15                 top: 222px;
    16                 left: 385px;
    17                 background-color: white;
    18                 border: 1px;
    19                 border-radius: 224px;
    20         }

                方法:

     1        var a=1;
     2        function A(){
     3             if(a<0){a=1;}
     4             $(".radius").eq(0).css("opacity",a-=0.1);
     5             if(a<0){a=1;}
     6             $(".radius").eq(1).css("opacity",a-=0.2);
     7             if(a<0){a=1;}
     8             $(".radius").eq(2).css("opacity",a+=0.1);
     9             if(a<0){a=1;}
    10             $(".radius").eq(3).css("opacity",a+=0.2);
    11             if(a<0){a=1;}
    12             $(".radius").eq(4).css("opacity",a-=0.1);
    13             if(a<0){a=1;}
    14             $(".radius").eq(5).css("opacity",a-=0.2);
    15        }
    16        setInterval(A,500);

             

                       静态效果图

                2、网页中插入视频,挺简单的:

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

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

    1        $(".clickB").on("click",function(){
    2              $(".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>';
    3              $(".clickB").hide();
    4 
    5        })

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

    1         #video{
    2             width:600px;
    3              height:300px;
    4         }

                  3、焦点图轮播:

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

    1        var mySwiper1 = new Swiper ('.swiper-container', {
    2             loop:true,
    3             direction : 'horizontal',
    4             autoplay : 2000,
    5             autoplayDisableOnInteraction : false,
    6             mousewheelControl : true,
    7             watchSlidesProgress : true,
    8        });

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

    1         <div class="ma">
    2             <img src="ewm.jpg" />
    3         </div>
    1          .ma{
    2             position:absolute;
    3             bottom:139px;
    4             height:258px;
    5             widht:255px;
    6             left:50%;
    7             margin-left:-127px;
    8          }

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

     

    欢迎大家来浏览我的博客,如发现我有写错的地方,欢迎交流指正。
  • 相关阅读:
    linux异步信号handle浅析
    数据库的基本操作增删改查
    POJ1789Truck History最小生成树两种做法(Kruskal+Prim)模板题
    POJ1113Wall求凸包周长
    POJ3565AntsKM变形
    HDU2150Pipe判断线段是否相交
    POJ1815Friendship最大流最小割点+拆点+枚举
    HDU3081 Marriage Match II 最大匹配+并查集+匈牙利算法
    POJ3348Cows求凸包面积
    HDU3277Marriage Match III并查集+二分+最大流
  • 原文地址:https://www.cnblogs.com/lulu-beibei/p/5036569.html
Copyright © 2011-2022 走看看