jquery制作搜狐快站页面效果

来源 : 作者 : admin时间 : 2014-02-20 11:42:26 人气指数 :

导语用法简介:jquery制作搜狐快站页面效果，支持滑动鼠标滚轮导航内容跟着切换。文件引用:<scripttype= "text javascript "src= "js jquery-1 8 3 min js ">< script>

用法简介:

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>