A simple mobile topic

This blog is actually written yesterday (2015-12-09), yesterday morning, I wrote a blog, I would like to put the theme of the dynamic flashing small circle recorded in the GIF format picture uploaded to the blog, asked the mother downloaded a recording software, open the discovery and the tutorial on the diagram is different, will not use, unloading, unloading, the computer jammed, After 2 minutes, the computer shows "the computer is experiencing critical problems and will restart in a minute, please save ..." ", I think my blog has not been published, but the computer is too card, I think it will automatically save as a draft of it, the results, today a look, no, hey, rewrite it." My computer is silly, after restarting, it is like reloading the system, the desktop empty. In front of the tall system, I was too weak, whining.

Here's what I'm doing, and some of the problems that I've encountered.

This topic contains a full-screen background image with a small blinking circle in the head, a video that needs to be inserted, a focus graph carousel, and a QR code that can be identified by the user.

1, flashing small circle, the beginning of my thinking is silly, want to small circle from the material out, and then add dynamic flashing effect, the problem came, small circle so small, my PS is not very superb, this method is certainly wrong, and later, I used a div instead, like the previous radio button, the div into a button, You can set your own size, haha.

HTML structure:

1 <Divclass= "Radius0 radius"></Div>2         <Divclass= "Radius1 radius"></Div>3         <Divclass= "Radius2 radius"></Div>4         <Divclass= "Radius3 radius"></Div>5         <Divclass= "Radius4 radius"></Div>6         <Divclass= "RADIUS5 radius"></Div>

Partial 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;Ten} One . Radius1{ A width:25px; - Height:25px; - position:Absolute; the Top:222px; -  Left:385px; - Background-color: White; - Border:1px; + Border-radius:224px; -}

Method:

1        varA=1;2        functionA () {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;}Ten$ (". Radius"). EQ (3). CSS ("opacity", a+=0.2); One             if(a<0) {A=1;} A$ (". Radius"). EQ (4). CSS ("opacity", a-=0.1); -             if(a<0) {A=1;} -$ (". Radius"). EQ (5). CSS ("opacity", a-=0.2); the        } -SetInterval (a,500);

Static

2, the page inserted video, quite simple:

First, define the background color of the video playback area as black, and then put a play button in the middle:

To play the video when you click the middle button:

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        })

If you do not define the size of the class video, the video will overflow the box above, so add the style:

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

3. Focus Chart Carousel:

Use Swiper plug-in directly, so easy

1        varMySwiper1 =NewSwiper ('. Swiper-container '), {2Looptrue,3Direction: ' Horizontal ',4autoplay:2000,5Autoplaydisableoninteraction:false,6Mousewheelcontrol:true,7Watchslidesprogress:true,8});

4, when the two-dimensional code is placed in the background map, the browser is not recognized, so to the two-dimensional code from the background map to key out, with tag display to the user

1         <  class= "Ma">2             <src = "Ewm.jpg" /> 3         </ Div >

 1  .ma  {2   position : absolute ; 3   bottom : 139px ; 4  : 258px ; 5   widht : 255px ; 6   left : 50% ; 7   Margin-left : -127px ; 8 } 

Here, a simple feature page is completed.

A simple mobile topic