时间:2021-07-01 10:21:17 帮助过:36人阅读
再介绍之前先看一看运行效果图:
引入核心库,pagefull的依赖任何JS库,所以只需引入它本身就可以了
写入html
//请在head区加入以下代码,移动端使用data-step可以让你在不切屏的情况下更换动画
写入CSS,不熟悉CSS3的朋友请回去补下,这里不做解析了,CSS可以根据项目的需求自由的定义。
html { -ms-touch-action: none; /* 阻止windows Phone 的默认触摸事件 */ } body, div, p { margin: 0; padding: 0; } ul { list-style: none; } body { width: 100%; *cursor: default; overflow: hidden; font: 16px/1.5 "Microsoft YaHei",Helvetica,STHeiti STXihei,Microsoft JhengHei,Arial; } #pageContain { overflow: hidden; } .page { display: none; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; } .contain { width: 100%; height: 100%; display: none; position: relative; z-index: 0; } .current .contain,.slide .contain { display: block; } .current { display: block; z-index: 1; } .slide { display: block; z-index: 2; } .swipe { display: block; z-index: 3; transition-duration: 0ms !important; -webkit-transition-duration: 0ms !important; } .page1 { background: #37c1e3; } .page2 { background: #009922; } .page3 { background: #992211; } .page4 { background: #ff00ff; } .page5 { background: #00ff00; } .page6 { background: #22ffff; } #navBar { z-index: 3; position: absolute; top: 10%; right: 3%; } #navBar .active { background: #ccc; } #navBar li { cursor: pointer; margin-bottom: 10px; transition: all .7s ease; border-radius: 50%; line-height: 40px; text-align: center; width: 40px; height: 40px; } p { width: 200px; height: 100px; color:#fff; text-align: center; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -50px; opacity: 1; transition: all .8s ease; transform-origin: 50% 50%; } .step1 p { transform: translate(0, -50px); -webkit-transform: translate(0, -50px); } .step2 p { opacity: 0; transform: scale(2); -webkit-transform: scale(2); } .step3 p { transform: scale(1); -webkit-transform: scale(1) opacity: 1; } .step4 p { -webkit-transform: rotate(360deg) translate(0,-200px) scale(.3); transform: rotate(360deg) translate(0,-200px) scale(.3); opacity: 0; }
写入JS,实现效果
详细参数设置
id String – 外层包裹id
slideTime Integer (default:800) – 每页切换时间(毫秒)
effect Object (default:{}) – 效果参数
mode String (default:'') – 转换模式 'wheel,touch,nav:navBar' 表示 '滚轮,触摸,导航条:导航条id'
callback Function – 滑动结束后的回调函数
接口
Fullpage也提供了一些借口供使用此插件的开发者调用:
prev() 直接滑向上一页
next() 直接滑入下一页
thisPage() 返回当前的页码
go(num) 直接滑到第num页
以上就是关于实现类似网易邮箱全屏滚动的效果,希望大家可以制作一个适合于自己网站的全屏滚动效果。