<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /><link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.6/jquery.fullpage.min.css" type="text/css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script><!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>--><script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.6/jquery.fullpage.min.js"></script> <title>鼠标划动</title><style> * {margin:0; padding:0; } body {background-color:#333;} .initBody {height:100%; overflow:hidden; position: relative; z-index:100;} ul,li {list-style:none;} a {text-decoration:none; color:red;} .section {background-color:#f1f1f1; font-size: 100px; line-height:200px; text-align: center;} .section_1 {background-color:red} .section_2 {background-color:blue} .section_3 {background-color:green}/* .page {width:15px; position: fixed; right:20px; top:0; color:#fff; z-index: 999;} .page li a {display:block; } .page li span{display:block; width:15px; height:15px; border-radius:50%; background:rgba(255,255,255,.5); background-color: #fff; text-indent:-9999em; margin-top: 5px; cursor: pointer;} .page li.active span {border:1px solid #fff; width:13px; height:13px; background:blue;}*/ .page { position: fixed; right: 20px; top: 40%; z-index: 10; list-style-type: none; } .page li { width: 90px; height: 27px; margin-top: 7px; overflow: hidden;} .page a { display: block; height: 27px; padding-right: 30px; line-height: 27px;/*background:rgba(255,255,255,.5);*/background: url(public/images/dot.png) right -34px no-repeat; color: #fff; text-align: right; text-shadow: 1px 1px 0px #333; text-decoration: none; overflow: hidden;} .page span { display: block; width: 60px; height: 27px; font-size: 12px; text-indent: 200px; opacity: 0.6; filter:alpha(opacity=60); overflow: hidden;} .page a:hover span { text-indent: 0;} .page .active a { background-position: right 0;} .wheel {background-color:#336699;} .wrapper {overflow: hidden;} #box{position: fixed; right:50%; top:0; color:#fff; z-index: 999;font-size: 100px; }</style> <script type="text/javascript"> $(document).ready(function() { $('#fullpage').fullpage({ anchors: ['page1', 'page2', 'page3', 'page4', 'page5'], sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C','#C63D0F', '#1BBC9B', '#7E8F7C'], menu: '.page', loopBottom: false,//滚动到最低部后是否连续滚动到顶部，默认为false loopTop: false,//滚动到最顶部后是否连续滚动到底部，默认为false // setScrollingSpeed:2000, //翻屏滚动速度 slidesNavigation:true, //轮播翻页器显示 // slidesNavPosition:'top', loopHorizontal: true, //轮播图自动滚动 controlArrows:false, //輪播圖左右箭頭 //navigation: true,// navigationPosition: 'right',// navigationTooltips: ['First page', 'Second page', 'Third and last page'], //默认导航值// responsiveWidth: 900, fixedElements:'.pa1ge', //固定在頂部不動 fixedElements:'#box', afterResponsive: function(isResponsive){ } }); setInterval(function(){ //自動輪播速度設置 $.fn.fullpage.moveSlideRight(); }, 3000); }); </script></head><body><ul id="page" class="page"> <li data-menuanchor="page1" class="active"><a href="#page1" title="证券时报网"><span>证券时报网</span></a></li> <li data-menuanchor="page2"><a href="#page2" title="财苑社区"><span>财苑社区</span></a></li> <li data-menuanchor="page3"><a href="#page3" title="爱股快信"><span>爱股快信</span></a></li> <li data-menuanchor="page4"><a href="#page4" title="股票情报"><span>股票情报</span></a></li> <li data-menuanchor="page5"><a href="#page5" title="新股助手"><span>新股助手</span></a></li></ul><div id="box">555555555555</div><div id="fullpage"> <div class="section"> <div class="slide"> <h1>Slide 1</h1> </div> <div class="slide"> <h1>Slide 2</h1> <p>https://alvarotrigo.com/fullPage/examples/autoHeight.html#3rdPage</p> </div> <div class="slide"> <h1>Slide 3</h1> </div> </div> <div class="section">视图二</div> <div class="section">视图三</div> <div class="section">视图四</div> <div class="section">视图五</div> <div class="section fp-auto-height">视图六</div> </div> </body></html>
添加回答
举报
0/150
提交
取消