标签：
这篇博客其实写于昨天（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 }
到这里，一个简单的专题页面完成了。
标签：
原文地址：http://www.cnblogs.com/lulu-beibei/p/5036569.html
