利用jQuery实现仿天猫页面楼层跳转代码



12 47 16



特效描述:利用jQuery实现 仿天猫 页面楼层 跳转代码,利用jQuery实现仿天猫页面楼层跳转代码

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/floor.js"></script>

2. HTML代码

<!--右侧固定导航-->
<ul class="fixedmeau">
    <li class="active"><i>1F</i><span>服饰</span></li>
    <li><i>2F</i><span>美妆</span></li>
    <li><i>3F</i><span>手机</span></li>
    <li><i>4F</i><span>家电</span></li>
    <li><i>5F</i><span>数码</span></li>
    <li><i>6F</i><span>运动</span></li>
    <li><i>7F</i><span>居家</span></li>
    <li><i>8F</i><span>母婴</span></li>
    <li><i>9F</i><span>食品</span></li>
    <li><i>10F</i><span>图书</span></li>
    <li><i>11F</i><span>服务</span></li>
</ul>
<!--返回顶部-->
<div class="totop"><span>▲</span>Top</div>
<!--头部-->
<div class="header_box">
    <div class="header">头部</div>
    <div class="meau">菜单</div>
</div>
<!--模块-->
<div class="louceng_box">
    <div class="louceng">
        <div class="title">1.服饰 <span>FUSHI</span></div>
        <div class="con">服饰</div>
    </div>
    <div class="louceng">
        <div class="title">2.美妆 <span>MEIZHUANG</span></div>
        <div class="con">美妆</div>
    </div>
    <div class="louceng">
        <div class="title">3.手机 <span>SHOUJI</span></div>
        <div class="con">手机</div>
    </div>
    <div class="louceng">
        <div class="title">4.家电 <span>JIADIAN</span></div>
        <div class="con">家电</div>
    </div>
    <div class="louceng">
        <div class="title">5.数码 <span>SHUMA</span></div>
        <div class="con">数码</div>
    </div>
    <div class="louceng">
        <div class="title">6.运动 <span>YUNDONG</span></div>
        <div class="con">运动</div>
    </div>
    <div class="louceng">
        <div class="title">7.居家 <span>JUJIA</span></div>
        <div class="con">居家</div>
    </div>
    <div class="louceng">
        <div class="title">8.母婴 <span>MUYIN</span></div>
        <div class="con">母婴</div>
    </div>
    <div class="louceng">
        <div class="title">9.食品 <span>SHIPIN</span></div>
        <div class="con">食品</div>
    </div>
    <div class="louceng">
        <div class="title">10.图书 <span>TUSHU</span></div>
        <div class="con">图书</div>
    </div>
    <div class="louceng">
        <div class="title">11.服务 <span>FUWU</span></div>
        <div class="con">服务</div>
    </div>
</div>
<script type="text/javascript">
    /*
     totop  //返回顶部按钮
     fixedevery   // 左侧固定导航的每一项
     louceng  //模块的每一项
     header   //头部
     */
    $(function(){
        var obj = new floor('.totop','.fixedmeau>li','.louceng_box>.louceng','.header_box');
        obj.init()
    })
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 滚动切换 滚动条切换 滑动选项卡 滑动切换 自动滚动图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 其他 文字滚动 文字无缝滚动 文字间歇滚动 文字切换 文字选项卡 跳转

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到