用法简介:
jquery制作搜狐快站页面效果,支持滑动鼠标滚轮导航内容跟着切换。
文件引用:
- <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
- <script type=javascript" src="js/jquery-ui-1.10.3.min.js"></script>
- <script type= src="js/jquery.fullPage.js"></script>
- <script type=>
- $(document).ready(function() {
- $.fn.fullpage({
- slidesColor: ['#fff', '#fff', '#fff', '#fff', '#fff'],
- anchors: ['page1', 'page2', 'page3', 'page4', 'page5'],
- menu: '#menu'
- });
- });
- </script>
页面结构:
- <div id="side">
- <div class="inner">
- <div class="hgroup">
- <h1><a href="http://www.aseoe.com/">搜狐快站a>h1>
- <h2>专业的移动建站平台h2>
- div>
- <a class="start" href="http://www.aseoe.com/">开始建站a>
- div>
- <ul id="menu">
- <li class="active" data-menuanchor="page1"><a class="a1" href="#page1" title="快速创建移动站点">快速创建移动站点a>li>
- <li data-menuanchor="page2"><a class="a2" href="#page2" title="丰富的模板">丰富的模板a>li>
- <li data-menuanchor="page3"><a class="a3" href="#page3" title="强大的功能组件">强大的功能组件a>li>
- <li data-menuanchor="page4"><a class="a4" href="#page4" title="多种屏幕预览">多种屏幕预览a>li>
- <li data-menuanchor="page5"><a class="a5" href="#page5" title="全网高速访问">全网高速访问a>li>
- ul>
- div>
- <div class="section">
- <div class="imgbox"><img src="images/1.jpg" alt="快速创建移动站点">div>
- div>
- <div class="section">
- <div class="imgbox"><img src="images/2.jpg" alt="丰富的模板">div>
- div>
- <div class="section">
- <div class="imgbox"><img src="images/3.jpg" alt="强大的功能组件">div>
- div>
- <div class="section">
- <div class="imgbox"><img src="images/4.jpg" alt="多种屏幕预览">div>
- div>
- <div class="section">
- <div class="imgbox"><img src="images/5.jpg" alt="全网高速访问">div>
- div>
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-22-122-1.html
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-22-122-1.html