fullpage.js自定义导航

最新推荐文章于 2021-06-11 18:54:09 发布

草灯

最新推荐文章于 2021-06-11 18:54:09 发布

阅读量3.9k

点赞数

分类专栏： web前端文章标签：前端开发 fullpage.js

本文链接：https://blog.csdn.net/eadio/article/details/50012091

版权

web前端专栏收录该内容

63 篇文章 0 订阅

订阅专栏

我们都知道怎么使用fullpage.js。主要是下面的命令来控制导航的

$(function(){
    $('#fullpage').fullpage({
        //默认navigation: false //不显示项目导航 通过下面这句可以控制将导航加入到页面上
         'navigation': true,
    })
})

但是，如果我们想要自己定义导航呢？不使用他提供的一些css属性，自己写好html和css基本样式，通过滚动显示页码？搜索大量资料，看到以下博客，通过该方法确实可以实现的，即使不指定css3动画翻页也可以。【在火狐、ie7-9、谷歌、360下调试】360的兼容模式不行。

演示地址： http://runjs.cn/detail/x1jdppsz

点击演示屏右下角的全屏查看，可以更直观的查看效果，点击查看源码可以查看我demo是怎么实现的

原博客地址：http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201481504334743/

具体做法如下：

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
	
    <link href="style/jquery.fullPage.css" rel="stylesheet" type="text/css" />
    <link href="style/base.css" rel="stylesheet" type="text/css" />
	<link href="style/index.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.fullPage.min.js"></script>
</head>

<body>
	
<div id="superContainer">
	<div class="fp-section" style=" background:#069;"></div>
    <div class="fp-section" style=" background:#099"></div>
    <div class="fp-section" style=" background:#963;"></div>
    <div class="fp-section" style=" background:#633;"></div>
</div>
<div id="menu" class="right">
	<ul>
    	<li data-menuanchor="page1">
        	<a href="#page1"></a> 
        </li>
        <li data-menuanchor="page2">
        	<a href="#page2"></a> 
        </li>
        <li data-menuanchor="page3">
        	<a href="#page3"></a>       
        </li>
        <li data-menuanchor="page4">
        	<a href="#page4"></a> 
        </li>
    </ul>
</div>

</body>
</html>

<script>	
$(function(){
    $('#superContainer').fullpage({
	slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
        anchors: ['page1', 'page2', 'page3', 'page4'],
        css3: false,
        menu: "#menu"
	});
});
</script>

@charset "utf-8";
/* CSS Document */


.wrapper{ width:660px; height:200px; margin:0 auto; padding-top:60px; position:relative; }
.wrapper div{ width:200px; height:200px; line-height:200px; font-size:24px; color:#fff; text-align:center; }

.bor02:hover{ width:300px; height:300px; transform:rotate(360deg); background:#099; left:150px; top:30px;}

#menu{ position: fixed; top: 50%; margin-top: -32px;}
#menu.right{ right: 10px;}
#menu ul li{ width: 10px; height: 10px; background: #ccc; margin:10px; border-radius: 10px;}
#menu li.active{ background:#000; }

当然，首先是要下载fullpage.js插件，引入到自己的项目里头。

草灯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
fullpage.js自定义导航

我们都知道怎么使用fullpage.js。主要是下面的命令来控制导航的$(function(){ $('#fullpage').fullpage({ //默认navigation: false //不显示项目导航通过下面这句可以控制将导航加入到页面上 'navigation': true, })}) 但是，如果我们想要自己
复制链接

扫一扫