<!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>onepage-scroll制作iPhone 5s页面演示_模板在线</title>
<link rel="stylesheet" href="css/onepage-scroll.css">
<style>
*{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 "Lucida Grande","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/gradient_gold.png) repeat scroll 0 0 / 20px 100% rgba(0, 0, 0, 0);background-color:#e2d5c5;}
.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:#5f5f61;}
.page3{background:url(images/texture_50.png) repeat scroll 0 0 / 160px auto, url(images/gradient_gold_reverse.png) repeat scroll 0 0 / 20px 100% rgba(0, 0, 0, 0);background-color:#e2d5c5;}
.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;}
.mainNav{width:980px;height:36px;margin:18px auto;border-radius:5px;background:url(images/globalheader.png) 0 0 repeat-x;}
.mainNav ul{display:table;float:left;width:845px;table-layout:fixed;}
.mainNav ul li{display:table-cell;height:36px;overflow:hidden;}
.mainNav li a{display:block;line-height:36px;font-size:12px;text-align:center;color:#fff;}
.mainNav li:nth-child(1){border-radius:5px 0 0 5px;}
.mainNav li a:hover{background-color:#333;}
.subNav{width:980px;margin:0 auto;padding-bottom:10px;border-bottom:1px solid #d1c6b3;}
.subNav h2{float:left;width:140px;height:30px;text-indent:-9999px;background-image:url(images/producheader_productname.png);}
.subNav ul{float:right;padding-top:8px;}
.subNav li{float:left;font-size:12px;margin:0 8px 0 24px;}
.subNav a{float:left;line-height:25px;color:#333;}
.subNav .buy{width:72px;height:25px;text-indent:-9999px;background-image:url(images/buynows.png);}
.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;}
.page1 img{position:absolute;left:50%;top:187px;margin-left:-105px;}
.page2 .txt{position:absolute;left:50%;bottom:15%;width:980px;margin-left:-490px;}
.page2 .txt h2{width:980px;margin:0 auto;height:61px;background-image:url(images/forward_title.png);}
.page2 .txt p{width:630px;margin:0 auto;line-height:1.6316;font-size:19px;text-align:center;color:#fff;}
.page2 .txt span{white-space:nowrap;}
.page2 img{position:absolute;left:50%;top:50%;margin-left:-773px;margin-top:-756px;}
.page3 .txt{position:absolute;left:50%;top:50%;width:980px;margin-left:-490px;margin-top:130px;font-size:16px;line-height:1.6875;text-align:center;}
.page3 .txt h2{width:980px;height:114px;margin-bottom:5px;text-indent:-9999px;background-image:url(images/smart_title.png);}
.page3 img{position:absolute;left:50%;top:50%;margin-left:-542px;margin-top:-2838px;}
.page4 img{position:absolute;left:50%;top:50%;margin-left:-594px;margin-top:-900px;}
.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;}
.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 .page2 img{margin-left:-596px;margin-top:-399px;}
.responsive-height-lt790 .page3 .txt{margin-top:0;}
.responsive-height-lt790 .page3 img{margin-left:-407px;margin-top:-473px;}
.responsive-height-lt790 .page4 img{margin-left:-475px;margin-top:-465px;}
.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;}
</style>
</head>
<body class="loading">
<div class="main" id="main">
<div class="page page1">
<div class="mainNav f-cb">
<ul>
<li><a href="http://www.dowebok.com/">Apple</a></li>
<li><a href="http://www.dowebok.com/118.html">在线商店</a></li>
<li><a href="javascript:">Mac</a></li>
<li><a href="javascript:">iPod</a></li>
<li><a href="javascript:">iPhone</a></li>
<li><a href="javascript:">iPad</a></li>
<li><a href="javascript:">iTunes</a></li>
<li><a href="javascript:">技术支持</a></li>
</ul>
<div class="search"></div>
</div>
<div class="subNav f-cb">
<h2>iPhone 5S</h2>
<ul>
<li><a href="http://www.dowebok.com/">功能</a></li>
<li><a href="javascript:">设计</a></li>
<li><a href="javascript:">内置 App</a></li>
<li><a href="javascript:">App Store</a></li>
<li><a href="javascript:">视频</a></li>
<li><a href="javascript:">技术规格</a></li>
<li><a class="buy" href="javascript:">立即购买 iPhone 5s</a></li>
</ul>
</div>
<div class="txt">
<h2>iPhone 5s。你比你想象的更强大。</h2>
<p>你拥有一种力量，来开创，来塑造，来分享自己的生活。这种力量可让你将日常之事处理得非同凡响，并让非同凡响成为日常之事。有了 iPhone 5s，你比你想象的更强大。</p>
</div>
<img class="responsiveImg" date-small="images/img1-s.png" date-big="images/img1-b.png" src="images/img1-b.png" alt="iPhone 5s。你比你想象的更强大。">
</div>
<div class="page page2">
<div class="txt">
<h2></h2>
<p>iPhone 5s 敢于构想，缜于思量，更精于工艺。它创造了技术上的可能，更<span>缔造了技术为人所用的典范</span>。它不仅是顺理成章的下一代，更<span>是本该如此的新一代。</span></p>
</div>
<img class="responsiveImg" date-small="images/img2-s.png" date-big="images/img2-b.png" src="images/img2-b.png" alt="iPhone 5s">
</div>
<div class="page page3">
<div class="txt">
<h2>众多尖端科技，在此凝聚。</h2>
<p>iPhone 5 一开先河，将众多令人赞叹的技术融入纤薄轻巧的设计之中。<br>iPhone 5s 更进一步，带来了 Touch ID 指纹识别传感器、64 位架构的全新 A7 芯<br>片、更加出色的 iSight 摄像头和超快的无线网络连接。</p>
</div>
<img class="responsiveImg" date-small="images/img3-s.png" date-big="images/img3-b.png" src="images/img3-b.png" alt="iPhone 5s">
</div>
<div class="page page4">
<div class="txt">
<
jQuery全屏页面滚动效果苹果官网页面上下滚动效果代码.zip
版权申诉
114 浏览量
2021-12-02
13:23:55
上传
评论
收藏 4.24MB ZIP 举报
jQuery全屏页面滚动效果苹果官网页面上下滚动效果代码.zip （43个子文件） 
jQuery全屏页面滚动效果苹果官网页面上下滚动效果代码 css 
onepage-scroll.css 2KB
index5.html 1KB index4.html 1KB images 
img5-b.png 573KB forward_title.png 5KB img2-b.png 502KB smart_title.png 13KB gradient_gold.png 149KB ios_title.png 13KB img5-s.png 189KB hero_title.png 7KB img1-b.png 583KB img1-s.png 172KB texture_20.png 19KB gradient_gold_reverse.png 150KB buynows.png 11KB img3-s.png 87KB img4-s.png 127KB img3-b.png 784KB img4-b.png 408KB producheader_productname.png 2KB gradient_black.png 86KB gradient_silver.png 136KB gradient_white.png 39KB globalheader.png 206B img2-s.png 156KB
loading.gif 723B cases_title.png 16KB texture_50.png 20KB
1.jpg 57KB index9.html 2KB index10.html 10KB index.html 3KB js jquery-1.9.0.min.js 91KB modernizr.custom.07427.js 8KB jquery.onepage-scroll.js 15KB jquery.onepage-scroll.min.js 9KB jQuery.resizeEnd.min.js 1KB index2.html 1KB index6.html 1KB index7.html 1KB index8.html 1KB index3.html 1KB资源评论
