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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.