jquery.fullPage+slick实现响应式全屏滚动图文分页效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery.fullPage+slick实现响应式全屏滚动图文分页效果代码,上下切换+左右切换
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title></title> <!--默认样式--> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <!--响应式框架--> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"> <!--css3动画库--> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.3.5.1.css"> <!--banner大图基础样式--> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/slick.1.8.css"> <!--页面滚动基础样式--> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery.fullPage.2.9.5.css"> <!--导航样式--> <style> body{background-color: #1b1b1b} /*====================导航*********/ .header{ width:100%; position:fixed; top:0; left:0; z-index:999; height:50px; padding: 0 30px; /*background: rgba(28, 35, 39, 0.8);*/ } /*左侧logo*/ .header .left{ width: 12%; } .header .left a img{ height: 40px; margin-top: 6px; } .header .left .img2{ display: none; } /*右侧*/ .header .nav{ -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; height: 100%; float: right; line-height: 50px; display: block; } .header .navbar_nav li{ float:left; position: relative; display: block; } .header .navbar_nav li:after{ content: ""; width: 0; height: 2px; background: orangered; position: absolute; bottom: 0; left: 0; transition: all 0.5s ease 0s; } .header .navbar_nav li:hover:after{ width: 100%; } .header .navbar_nav li a{ text-decoration: none; height: 100%; padding: 0 25px; display: block; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; color: #fff; font-size: 16px; } .header .navbar_nav li:hover a{ color: orangered; } .header .navbar_nav li.dropdown{ display: inherit; position: relative; } .header .navbar_nav li.dropdown .jt{ width: 20px; height: 20px; background: url(i/top.png) no-repeat; background-size: 100% 100%; display: block; } .header .navbar_nav li.dropdown .dropdown_menu{ display: none; position: absolute; top:50px; width: 100%; background: #fff; box-shadow: 0 15px 27px 0 rgba(167,165,165,0.38); width: 120%; left: -10%; } .header .navbar_nav li.dropdown .dropdown_menu a{ font-size: 14px; color: #666; padding: 0 10px; line-height: 40px; text-align: center; background: #fff; margin-bottom: 2px; } .header .navbar_nav li.dropdown:hover .dropdown_menu{ display: block; background: #f3f3f3; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .header .navbar_nav li.dropdown:hover .dropdown_menu a{ color: #666; } .header .navbar_nav li.dropdown:hover .dropdown_menu a:hover{ color: #fff; background: orange; } /*白色背景的头部*/ .header.on{ background: #fff; border-bottom: 1px solid #ccc; } .header.on .left .img1{ display: none; } .header.on .left .img2{ display: block; } .header.on .navbar_nav li a{ color: #333; } .header.on .navbar_nav li:hover a{ color: orangered; } #navToggle{ display: none; } .m_nav{ position: fixed; top: 0px; box-shadow: 0 15px 27px 0 rgba(167,165,165,0.38); width: 100%; height: 100%; background: #fff; transition: all ease 0.5s; -webkit-transition: all ease 0.5s; z-index: 1000; opacity: 1; visibility: visible; margin-top: 0; overflow-y: auto; transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms; top: 0; transform: translateX(100%); } .m_nav.open{ transform: translateX(0); } .m_nav .top{ height: 60px; padding: 20px; box-sizing: border-box; } .m_nav .top .closed{ width: 30px; height: 30px; vertical-align: middle; float:right; cursor: pointer; } .m_nav .logo{ width: 100%; margin:0 auto; } .m_nav .logo img{ height: 50px; display: block; margin:30px auto; } .m_nav .ul{ margin-top: 30px; } .m_nav .ul li{ padding: 0 20px; border-bottom: 1px solid #f5f5f5; transform: translateY(0); -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms; transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms; opacity: 0; } .m_nav.open ..........完整代码请登录后点击上方下载按钮下载查看
网友评论0