Html5 full screen switch IDO smart watch Page scrolling code, html5ido

Html5 full screen switch IDO smart watch Page scrolling code, html5ido

Previously, we introduced a full screen switching effect implemented by jquery. Today I will share the html5 code for rolling the page of an IDO smart watch. This is a Page scrolling effect code based on jQuery + HTML5. As follows:

Download Online Preview source code

Some code:

<Div class = "main" id = "main"> <div class = "page page1"> <div class = "head-pic"> <div style = "display: block; "id =" showCon0 "class =" big-pic ">  </A> </div> <div style =" display: none; "id =" showCon1 "class =" big-pic ">  </div> <div style =" display: none; "id =" showCon2 "class =" big-pic ">  </div> <div style =" display: none; "id =" showC On3 "class =" big-pic ">  </div> <div style =" display: none; "id =" showCon4 "class =" big-pic ">  </div> <div style =" display: none; "id =" showCon5 "class =" big-pic ">  </div> <div style =" display: none; "id =" showCon6 "class =" big-pic ">  </div> <ul class =" small-pic "> <li id = "list0" class = "on" onmouseover = "ShowContent (0)">  </li> <li id =" list1 "onmouseover =" showContent (1) ">  </li> <li id = "list2" onmouseover = "showContent (2) ">  </li> <li id = "list3" onmouseover = "showContent (3) ">  </li> <li id = "list4" onmouseover = "showContent (4) ">  </li> <li id = "List5" onmouseover = "showContent (5) ">  </li> <li id = "list6" onmouseover = "showContent (6) ">  </li> </ul> </div> <div class = "icon"> </div> <script language = "javascript"> var current = 0; var imgNum = 1; var interval = 0; function showContent (index) {var oldTag = document. getElementById ("list" + current. toString (); var oldCon = document. GetElementById ("showCon" + current. toString (); var newTag = document. getElementById ("list" + index. toString (); var newCon = document. getElementById ("showCon" + index. toString (); if (current! = Index) {oldTag. className = ""; oldCon. style. display = "none"; current = index; newTag. className = "on"; newCon. style. display = "block" ;}} function setMode (n) {if (n! = Null) {imgNum = n + 1;} if (interval = 0) {interval = setInterval ("showTime ()", 300000 ); // time adjustment} function showTime () {if (imgNum> 7) {imgNum = 0;} showContent (imgNum); imgNum ++;} setMode (); </script> </div> <div class = "page page2"> <div class = "txt"> <div class = "h2" id = "page2_h2"> Automatic Identification sports mode & nbsp; </div> <div class = "h2_list" id = "page2_list"> ido one helps you manage sports and life & nbsp; <br/> automatically identifies you Exercise, you can know your steps, <br/> distance, calorie consumption, <br/> make life more intelligent, convenient, and improve the quality of life. <Br/> </div> <div class = "page2_img1">  </div>  </div> <div class =" page page3 "> <div class =" txt "> <div class =" h3 "id =" page3_h3 "> automatic monitoring of sleep & nbsp; </div> <div class = "h3_list" id = "page3_list"> ido one cares about your sleep and helps you improve your sleep quality & nbsp; <br/> with sleep data monitoring, you can learn about deep sleep & nbsp; <br/> and light sleep time, you also know the number of waking times at night. <br/> Sleep, further improving sleep quality. <Br/> </div> <div class = "page3_img1">  </div> <div class = "page page4"> <div class = "photo w1920-h1080"> <ul> <li class = "one"> <div class = "photo-mask" style = "opacity: 0.5; "> </div> <div class =" photo-text "> Anti-loss warning </div> </li> <li class =" two "> <div class =" photo "-mask "style =" opacity: 0; "> </div> <div class =" photo-text "> sedentary reminder </div> </li> <li class =" three "> <d Iv class = "photo-mask" style = "opacity: 0.5; "> </div> <div class =" photo-text "> Call Notification </div> </li> <li class =" four "> <div class =" photo "-mask "style =" opacity: 0.5; "> </div> <div class =" photo-text "> event reminder </div> </li> </ul> <! -- Navigation --> </div>

Via: http://www.w2bc.com/Article/33819