js手机滚屏效果

最新推荐文章于 2021-12-17 17:12:47 发布

weixin_30271335

最新推荐文章于 2021-12-17 17:12:47 发布

阅读量125

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangjinke/p/4849834.html

本文详细介绍了如何使用Zepto.js库实现移动端全屏滚动效果，包括设置视口、引入样式和脚本、构建基本HTML结构、编写启动代码及应用必要的CSS样式。并提供了API文档链接和转载来源。

原文地址：https://github.com/yanhaijing/zepto.fullpage

第一步：基于移动端的浏览体验，在头部添加浏览器渲染的分辨率

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

第二步：引入相关文件

<link rel="stylesheet" href="../src/zepto.fullpage.css"> <script src="js/zepto.min.js"></script> <script src="../src/zepto.fullpage.js"></script>

第三步：编写基本结构html代码

<div class="wp">
    <div class="wp-inner"> <div class="page page1">1</div> <div class="page page2">2</div> <div class="page page3">3</div> <div class="page page4">4</div> </div> </div>

第四步：写入启动代码

<script>
    $('.wp-inner').fullpage();
</script>

第五步：编写必须的css样式

.wp{
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } .page{ font-size: 72px; line-height: 320px; text-align: center; } .page1{ background: red; } .page2{ background: yellow; } .page3{ background: maroon; } .page4{ background: green; }