以下是 IDO智能手表页面滚动html5代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IDO智能手表页面滚动html5代码</title>
<link rel="stylesheet" href="css/onepage-scroll.css">
<link rel="stylesheet" href="css/index.css">
<LINK rel="stylesheet" type="text/css" href="css/js.itobe.cn.css">
<LINK rel="stylesheet" type="text/css" href="css/aaAccordion.css">
<LINK rel="stylesheet" type="text/css" href="css/flickerplate.css">
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/jquery.onepage-scroll.min.js"></script>
<script type="text/javascript" src="js/jQuery.resizeEnd.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.07427.js"></script>
<script type="text/javascript" src="js/jquery.carouFredSel-6.2.0-packed.js"></script>
<script type="text/javascript" src="js/jquery.zaccordion.min.js"></script>
<script type="text/javascript" src="js/flickerplate.min.js"></script>
</head>
<body class="loading">
<div class="dowebok-hd">
<div class="inner">
<h1><a href="/">IDO ONE 产品介绍</a></h1>
<ul class="nav">
<li><a href="#">概述</a></li>
<li><a href="#">技术规格</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">社区</a></li>
<li><a href="#">下载APP端</a></li>
</ul>
</div>
</div>
<div class="main" id="main">
<div class="page page1">
<DIV class="head-pic">
<DIV style="display: block;" id="showCon0" class="big-pic" ><IMG src="images/img1.png"></A> </DIV>
<DIV style="display: none;" id="showCon1" class="big-pic"> <IMG src="images/img2.png"> </DIV>
<DIV style="display: none;" id="showCon2" class="big-pic"> <IMG src="images/img3.png"> </DIV>
<DIV style="display: none;" id="showCon3" class="big-pic"><IMG src="images/img4.png"> </DIV>
<DIV style="display: none;" id="showCon4" class="big-pic"><IMG src="images/img5.png"> </DIV>
<DIV style="display: none;" id="showCon5" class="big-pic"><IMG src="images/img6.png"> </DIV>
<DIV style="display: none;" id="showCon6" class="big-pic"><IMG src="images/img7.png"> </DIV>
<UL class="small-pic">
<LI id="list0" class="on" onMouseOver="showContent(0)"> <IMG alt="颜色" src="images/1.jpg"></LI>
<LI id="list1" onMouseOver="showContent(1)"> <IMG alt="颜色" src="images/2.jpg"></LI>
<LI id="list2" onMouseOver="showContent(2)"> <IMG alt="颜色" src="images/3.jpg"></LI>
<LI id="list3" onMouseOver="showContent(3)"> <IMG alt="颜色" src="images/4.jpg"></LI>
<LI id="list4" onMouseOver="showContent(4)"> <IMG alt="颜色" src="images/5.jpg"></LI>
<LI id="list5" onMouseOver="showContent(5)"> <IMG alt="颜色" src="images/6.jpg"></LI>
<LI id="list6" onMouseOver="showContent(6)"> <IMG alt="颜色" src="images/7.jpg"></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); //时间调整
}
}
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">自动识别运动模式 </div>
<div class="h2_list" id="page2_list">
IDO ONE助您管理运动生活 <br/>
通过自动识别您的运动，您可以清楚自己步数，<br/>
距离，卡路里消耗，<br/>
让生活更智能，便捷，提升生活品质。<br/>
</div>
<div class="page2_img1">
<img src="images/page2_img1.jpg">
</div>
</div>
<img src="images/img2-b.jpg" class="img2-b">
</div>
<div class="page page3">
<div class="txt">
<div class="h3" id="page3_h3">自动监测睡眠状态 </div>
<div class="h3_list" id="page3_list">
IDO ONE关心您的睡眠状况，助您改善睡眠质量 <br/>
通过睡眠数据监测，您可以了解每晚入睡后深度睡眠 <br/>
和浅度睡眠时间，还知道您夜晚清醒的次数，<br/>
让您更了解入睡的自己，进一步提高睡眠质量。<br/>
</div>
<div class="page3_img1">
<img src="images/page3_img1.jpg">
</div>
</div>
</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">防丢提醒</div>
</li>
<li class="two">
<div class="photo-mask" style="opacity: 0;"></div>
<div class="photo-text">久坐提醒</div>
</li>
<li class="three">
<div class="photo-mask" style="opacity: 0.5;"></div>
<div class="photo-text">来电提醒</div>
</li>
<li class="four">
<div class="photo-mask" style="opacity: 0.5;"></div>
<div class="photo-text">事件提醒</div>
</li>
</ul>
<!--导航-->
</div>
</div>
<div class="page page5">
<div class="flicker-example" data-block-text="false">
<ul>
<li data-background="images/phone.jpg">
<div class="flick-title">Flickerplate Is Working</div>
<div class="flick-sub-text">Heaven forbid this package you downloaded is broken. That wouldn't be embarrassing at all.</div>
</li>
<li data-background="images/misc.jpg">
<div class="flick-title">Editable via Javascript or CSS</div>
<div class="flick-sub-text">Take a look at the extensive documentation to see how you can change the settings in multiple ways.</div>
</li>
</ul>
</div>
</div>
<div class="page page6">
<div class="txt" >
<div class="h6" id="page6_txt">充电如此简单</div>
<div class="h6_list" id="page6_list">
我们希望，充电能做到更简单，更聪明<br/>
因此，IDO ONE创新使用磁吸式触点充电<br/>
将T线靠近表盘就能吸附充电<br/>
仅需25分钟即可完全充满<br/>
一周待机时间，让您不必为电量烦恼<br/>
</div>
<div class="page6_img1">
<img src="images/page6_img1.jpg">
</div>
</div>
</div>
<div class="page page7">
<div class="txt" >
<div class="h7" id="page7_txt">精选的材质</div>
<div class="h7_list" id="page7_list">
蓝宝石镜面<br/>
12盏LED指示灯<br/>
OLED显示屏<br/>
316L不锈钢表盘（玫瑰金，太空黑，星光银）<br/>
精选头层牛皮表带<br/>
T线：磁吸式触点充电<br/>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$('.flicker-example').flicker({flick_animation: 'jquery-slide'});
var $window = $(window);
var $wh = $window.height();
var $body = $('body');
var $main = $('.main');
var $responsiveImg = $('.responsiveImg');
var $responsiveFallback = false;
//页面加载时判断是否需要更换图片
if($wh < 790){
responsiveFn1();
}
//浏览器检测，判断是否为高级浏览器
if(Modernizr.cssanimations){
$responsiveFallback = false;
} else {
$responsiveFallback = true;
}
//onepage_scroll方法
$main.onepage_scroll({
sectionContainer: '.page',
loop:false,
responsiveFallback: $responsiveFallback,
beforeMove: function(index){
$("#page2_h2").fadeOut();
$("#page2_list").fadeOut();
$(".page2_img1").fadeOut();
$("#page3_h3").fadeOut();
$("#page3_list").fadeOut();
$(".page3_img1").fadeOut();
$(".flick-title").fadeOut();
$(".flick-sub-text").fadeOut();
$("#page6_txt").fadeOut();
$("#page6_list").fadeOut();
$(".page6_img1").fadeOut();
$("#page7_txt").fadeOut();
$("#page7_list").fadeOut();
$(".page7_img1").fadeOut();
},
afterMove: function(index){
switch(index){
case 1:
var current = 0;
var imgNum = 1;
var interval = 0;
setMode();
break;
case 2:
$("#page2_h2").fadeIn();
$("#page2_list").fadeIn(3000);
$(".page2_img1").fadeIn(4000);
break;
case 3:
$("#page3_h3").fadeIn();
$("#page3_list").fadeIn(3000);
$(".page3_img1").fadeIn(4000);
break;
case 5:
$(".flick-title").fadeIn();
$(".flick-sub-text").fadeIn(3000);
break;
case 6:
$("#page6_txt").fadeIn();
$("#page6_list").fadeIn(3000);
$(".page6_img1").fadeIn(4000);
break;
case 7:
$("#page7_txt").fadeIn();
$("#page7_list").fadeIn(3000);
$(".page7_img1").fadeIn(4000);
break;
}
}
});
//窗口改变大小切换不同的图片
$window.resizeEnd({
delay : 500
}, function(){
var $wh = $window.height();
if($wh < 790){
responsiveFn1();
} else {
responsiveFn2();
}
});
function responsiveFn1(){
$body.addClass('responsive-height-lt790')
$responsiveImg.each(function(){
var $dateSmall = $(this).attr('date-small');
$(this).attr('src', $dateSmall);
});
}
function responsiveFn2(){
$body.removeClass('responsive-height-lt790')
$responsiveImg.each(function(){
var $dateBig = $(this).attr('date-big');
$(this).attr('src', $dateBig);
});
}
});
//页面加载时的 Loading 效果
$(window).load(function(){
window.setTimeout(function(){
$('body').removeClass('loading');
}, 2000);
});
</script>
</body>
</html>JS代码(reveal-it.js):
/* Created on:12/02/2015,7:06:03 PM Author:Robin Spark Dependencies:isOnScreen jQuery plugin:http://upshots.org/javascript/jquery-test-if-element-is-in-viewport-visible-on-screen Free for commerical purposes.*/
/** * perform global replacement * @param string source contains characters to be replaced * @param string search contains characters to be searched for * @param string replacement contains the replacement characters * @returns string result of replacement */
function replaceAllInstances(source,search,replacement){
var regex = new RegExp(search,"g");
var result = source.replace(regex,replacement);
return result;
}
$.fn.isOnScreen = function (x,y){
if (x == null || typeof x == 'undefined') x = 1;
if (y == null || typeof y == 'undefined') y = 1;
var win = $(window);
var viewport ={
top:win.scrollTop(),left:win.scrollLeft()}
;
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var height = this.outerHeight();
var width = this.outerWidth();
if (!width || !height){
return false;
}
var bounds = this.offset();
bounds.right = bounds.left + width;
bounds.bottom = bounds.top + height;
var visible = (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
if (!visible){
return false;
}
var deltas ={
top:Math.min(1,(bounds.bottom - viewport.top) / height),bottom:Math.min(1,(viewport.bottom - bounds.top) / height),left:Math.min(1,(bounds.right - viewport.left) / width),right:Math.min(1,(viewport.right - bounds.left) / width)}
;
return (deltas.left * deltas.right) >= x && (deltas.top * deltas.bottom) >= y;
}
;
/* * Init specified element so it can be gradually revealed. * * Limitations:* Only works on backgrounds with a solid color. * * @param options ={
* id:'box3' *,background='#ffffff' //default *,delay='0' //default *}
* */
$.fn.initReveal = function (options){
console.log('-------------');
console.log('selector:' + this.selector);
var parent = $(this).parent();
//grab a copy of the contents,then remove it from DOM var contents = $(this).clone();
$(this).empty();
var revealHtmlBlock = "<div class='reveal'> <div class='text reveal__inner reveal__inner-{
class}
'> </div> <div class='reveal__cover reveal__cover-{
class}
'> <div class='reveal__cover-section reveal__100'></div> <div class='reveal__cover-section reveal__90'></div> <div class='reveal__cover-section reveal__80'></div> <div class='reveal__cover-section reveal__70'></div> <div class='reveal__cover-section reveal__60'></div> <div class='reveal__cover-section reveal__50'></div> <div class='reveal__cover-section reveal__40'></div> <div class='reveal__cover-section reveal__30'></div> <div class='reveal__cover-section reveal__20'></div> <div class='reveal__cover-section reveal__10'></div> </div> </div>";
revealHtmlBlock = replaceAllInstances(revealHtmlBlock,"{
class}
",options.id);
$(revealHtmlBlock).appendTo(parent);
contents.appendTo($('.reveal__inner-' + options.id));
//handle options //delay if (options.delay === undefined){
console.log('delay set to 0');
options.delay = 0;
//set default}
else{
console.log('delay set to:' + options.delay);
}
var revealElementFunction = function (options){
$(this).performReveal(options);
}
;
//background if (options.background !== undefined){
$('.reveal__cover-' + options.id + ' .reveal__cover-section').css({
'background-color':options.background}
);
}
//trigger the reveal at the specified time,unless auto is present and set to false if (options.auto === undefined || (options.auto !== undefined && options.auto)){
setTimeout(function (){
console.log('call');
revealElementFunction(options);
}
,options.delay);
}
//trigger on-visible if (options.trigger !== undefined){
var revealOnScreenIntervalIdMap ={
}
;
function uncoverText(){
var onscreen = $('.reveal__inner-box4').isOnScreen();
if ($('.reveal__inner-' + options.id).isOnScreen()){
$('.reveal__cover-' + options.id).addClass('reveal__uncovered');
revealOnScreenIntervalIdMap[options.id] = window.clearInterval(revealOnScreenIntervalIdMap[options.id]);
}
}
function showTextWhenVisible(){
revealOnScreenIntervalIdMap[options.id] = setInterval(uncoverText,500);
}
showTextWhenVisible();
}
}
;
//--------------------/* * trigger options:* immediately (on page load) * on event,eg. onclick * on becoming visible,after it scrolls into view,or is displayed after bein ghidden * * @param options ={
* id:'box3' *}
* */
$.fn.performReveal = function (options){
var _performReveal = function (){
$('.reveal__cover-' + options.id).addClass('reveal__uncovered');
}
;
//allow time for init code to complete setTimeout(_performReveal,250);
}
;
CSS代码(index.css):
*{margin:0;padding:0;}
ul,ol{list-style-type:none;}
.f-cb:after{display:table;content:'';clear:both;}
.f-cb{zoom:1;}
a{text-decoration:none;}
html{overflow-x:auto;}
body{min-width:1024px;font:12px/18px "Microsoft Yahei","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;color:#333;}
.loading{background:url(../images/loading.gif) 50% no-repeat;}
.loading .main{opacity:0;opacity:0;}
.main{-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s;}
.page{position:relative;overflow:hidden;}
.page .txt{z-index:2}
.page .txt p{font-size:19px;line-height:1.6316;}
.page img{z-index:1;}
.page1{background:url(../images/texture_50.png) repeat scroll 0 0 / 160px auto,url(../images/slider2.jpg) repeat;background-color:#e2d5c5;margin-top:64px;}
.page2{/*background:url(../images/texture_20.png) repeat scroll 0 0 / 160px auto,url(../images/gradient_black.png) repeat scroll 0 0 / 20px 100% rgba(0,0,0,0);*/
background-color:#fff;}
.page3{background:url(../images/img3-s.jpg) no-repeat;background-color:#e2d5c5;background-position:center 0;background-repeat:no-repeat;background-size:cover;-webkit-background-size:cover;-o-background-size:cover;}
.page4{background:url(../images/texture_50.png) repeat scroll 0 0 / 160px auto,url(../images/gradient_silver.png) repeat scroll 0 0 / 20px 100% rgba(0,0,0,0);background-color:#cecfd3;}
.page5{background:url(../images/gradient_white.png) repeat scroll 0 0 / 20px 100% rgba(0,0,0,0);background-color:#f4f4f4;}
.inner{position:relative;width:1100px;margin:0 auto;}
.dowebok-hd{position:fixed;z-index:1000;width:100%;height:64px;background:url(../images/hd_bg.jpg) 0 0 repeat-x;}
.dowebok-hd h1{float:left;width:156px;height:26px;margin-top:20px;}
.dowebok-hd h1 a{display:block;width:156px;height:26px;text-indent:-9999px;background-image:url(../images/logo.png);}
.dowebok-hd .nav{float:right;list-style-type:none;}
.dowebok-hd .nav li{float:left;margin-left:5px;}
.dowebok-hd .nav a{float:left;padding:0 10px;line-height:64px;color:#fff;text-decoration:none;}
.dowebok-hd .nav a:hover{height:62px;border-bottom:2px solid #4cb803;}
.page1 .txt{position:absolute;left:50%;top:50%;margin:-100px 0 0 -490px;width:433px;height:310px;}
.page1 .txt h2{width:450px;height:145px;margin-bottom:20px;text-indent:-9999px;background-image:url(../images/hero_title.png);}
.page1 p{width:340px;}
.page2 .txt{position:absolute;right:0px;bottom:15%;width:680px;margin-right:120px;top:10%;}
.page2 .page2_img1{text-align:right;margin-top:30px;display:none;}
.page2 #page2_txt{display:none;}
.page2 .txt .h2{margin:0 auto;height:90px;line-height:90px;color:#7c7c7d;font-size:56px;font-weight:100;text-align:right;display:none;}
.page2 .txt .h2_list{line-height:45px;color:#7c7c7d;font-size:22px;font-weight:100;text-align:right;margin-top:30px;display:none;}
.page2 .img2-b{position:absolute;left:0px;top:0px;height:100%}
.page3 .txt{position:absolute;right:0px;bottom:15%;width:680px;margin-right:120px;top:10%;}
.page3 .page3_img1{text-align:right;margin-top:30px;display:none;}
.page3 #page3_txt{display:none;}
.page3 .txt .h3{margin:0 auto;height:90px;line-height:90px;color:#fff;font-size:56px;font-weight:100;text-align:right;display:none;}
.page3 .txt .h3_list{line-height:45px;color:#fff;font-size:22px;font-weight:100;text-align:right;margin-top:30px;display:none;}
.page4 .txt{position:absolute;left:50%;top:50%;width:980px;height:114px;margin-left:-191px;margin-top:-184px;}
.page4 h2{width:545px;height:114px;margin:0 auto 5px;text-indent:-9999px;background-image:url(../images/ios_title.png);}
.page4 p{width:500px;margin-left:220px;line-height:1.6316;font-size:19px;}
.page5 img{position:absolute;left:50%;top:50%;margin-left:-1374px;margin-top:-352px;}
.page5 .txt{position:absolute;left:50%;top:0;width:980px;margin-left:-490px;margin-top:120px;}
.page5 h2{height:113px;margin-bottom:5px;text-indent:-9999px;background-image:url(../images/cases_title.png);}
.page5 p{width:610px;margin-left:220px;line-height:1.6316;font-size:19px;text-align:center;}
.page6{background:url(../images/cd.jpg) no-repeat;background-size:cover;-webkit-background-size:cover;-o-background-size:cover;}
.page6 .txt{position:absolute;right:0px;bottom:15%;width:480px;margin-right:120px;top:10%;}
.page6 .page6_img1{text-align:left;margin-top:30px;display:none;}
.page6 #page6_txt{display:none;color:#707070;}
.page6 .txt .h6{margin:0 auto;height:90px;line-height:90px;color:#7c7c7d;font-size:56px;font-weight:100;text-align:left;display:none;}
.page6 .txt .h6_list{line-height:45px;color:#7c7c7d;font-size:22px;font-weight:100;text-align:left;margin-top:30px;display:none;}
.page7{background:url(../images/cz.jpg) no-repeat;background-size:cover;background-position:right;-webkit-background-size:cover;-o-background-size:cover;}
.page7 .txt{position:absolute;left:50%;top:0;width:480px;margin-left:-490px;margin-top:120px;}
.page7 .page7_img1{text-align:left;margin-top:30px;display:none;}
.page7 #page7_txt{display:none;color:#707070;}
.page7 .txt .h7{margin:0 auto;height:90px;line-height:90px;color:#7c7c7d;font-size:32px;font-weight:100;text-align:left;display:none;}
.page7 .txt .h7_list{line-height:32px;color:#7c7c7d;font-size:18px;font-weight:100;text-align:left;margin-top:30px;display:none;}
.page7 .img7-b{position:absolute;right:0px;top:0px;height:100%}
.responsive-height-lt790 .page .txt p{font-size:16px;line-height:1.6875;}
.responsive-height-lt790 .page1 .txt{margin-top:-100px;}
.responsive-height-lt790 .page2 .txt{bottom:10%;}
.responsive-height-lt790 .page3 .txt{margin-top:0;}
.responsive-height-lt790 .page4 .txt{margin-left:-270px;margin-top:-135px;}
.responsive-height-lt790 .page5 img{margin-left:-777px;margin-top:-178px;}
.responsive-height-lt790 .page5 .txt{margin-top:30px;}
.responsive-height-lt790 .page6 .txt{margin-top:30px;}
.w1920-h1080{width:100%;height:100%;max-width:1920px;max-height:1080px;}
.photo{margin:0 auto;text-align:left;max-width:none;max-height:none;}
.photo ul{overflow:hidden;width:201%;height:100%;}
.photo li{position:relative;float:left;width:12.5%;height:100%;transition:all .5s ease;overflow:hidden;cursor:pointer;}
.photo-mask{position:absolute;z-index:1;width:100%;height:100%;background:#000;opacity:.5;filter:alpha(opacity=50);}
.photo-text{position:absolute;left:0;bottom:12%;width:100%;height:45px;margin:0PX;line-height:45px;color:#FFF;text-align:center;font-size:30PX;}
.photo li.one{background:url(../images/pag4_1.jpg) 0 center no-repeat;background-size:cover;}
.photo li.two{background:url(../images/pag4_2.jpg) 25% center no-repeat;background-size:cover;}
.photo li.three{background:url(../images/pag4_3.jpg) 50% center no-repeat;background-size:cover;}
.photo li.four{background:url(../images/pag4_4.jpg) 75% center no-repeat;background-size:cover;}
分享到QQ
分享到微博
微信扫一扫
