基于jQuery实现天猫滚动折叠导航特效



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

178 708 237



特效描述:基于jQuery实现 天猫滚动 折叠导航。基于jQuery实现天猫滚动折叠导航特效

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/jquery.tmailsider.js"></script>

3. HTML代码

<style type="text/css">
.menu .items ul li .on{
	-webkit-transform: perspective(700px) translateY(0px) translateZ(0px) rotateX(0deg);
	-moz-transform: perspective(700px) translateY(0px) translateZ(0px) rotateX(0deg);
	-ms-transform: perspective(700px) translateY(0px) translateZ(0px) rotateX(0deg);
	-o-transform: perspective(700px) translateY(0px) translateZ(0px) rotateX(0deg);
	transform: perspective(700px) translateY(0px) translateZ(0px) rotateX(0deg);
	-webkit-transition:all 600ms ease-in-out 0s;
	-moz-transition:all 600ms ease-in-out 0s;
	-ms-transition:all 600ms ease-in-out 0s;
	-o-transition:all 600ms ease-in-out 0s;
	transition:all 600ms ease-in-out 0s;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden;
	-webkit-transform-origin: 50% 100% 0;
	-moz-transform-origin: 50% 100% 0;
	-ms-transform-origin: 50% 100% 0;
	-o-transform-origin: 50% 100% 0;
	transform-origin: 50% 100% 0;
	line-height:25px;
	height:25px;
}
.menu .items ul li .scroll {
	-webkit-transform: perspective(700px) translateY(0px) translateZ(-21px) rotateX(-90deg);
	-moz-transform: perspective(700px) translateY(0px) translateZ(-21px) rotateX(-90deg);
	-ms-transform: perspective(700px) translateY(0px) translateZ(-21px) rotateX(-90deg);
	-o-transform: perspective(700px) translateY(0px) translateZ(-21px) rotateX(-90deg);
	box-shadow: 0 2px 2px #AAAAAA;
	height:0px;
}
</style>
<div class="top">
    <div class="middle">
        <div class="logo">
        	<img src="images/logo.png" title="天猫tmall.com.com-上天猫,就够了" />
        </div>
    </div>
</div>
<div class="wrap">
<div class="main">main</div>
<div id="menu" class="menu">
    <h1 class="title">
        <a>所有商品分类</a>
        <s class="btn_group bright">
            <a class="bleft" title="扩展视图"></a>
            <a class="bright" title="精简视图"></a>
        </s>
    </h1>
    <div class="items">
        <ul>
            <li class="list-item0">
                <h3>服装/内衣/配件</h3>
                <p class="on">
                    <a href="#">女装</a>
                    <a href="#">男装</a>
                    <a href="#">内衣</a>
                    <a href="#">羽绒</a>
                    <a href="#">呢大衣</a>
                </p>
                <p class="on">
                    <a href="#">毛衣</a>
                    <a href="#">保暖</a>
                    <a href="#">睡衣</a>
                    <a href="#">男羽绒</a>
                    <a href="#">男毛衣</a>
                </p>
            </li>
            <li class="list-item1 alt">
              <h3>鞋/箱包</h3>
                <p class="on">
                    <a href="#">女鞋</a>
                    <a href="#">男鞋</a>
                    <a href="#">雪地靴</a>
                    <a href="#">靴子</a>
                    <a href="#">男靴</a>
                </p>
                <p class="on">
                    <a href="#">箱包</a>
                    <a href="#">女包</a>
                    <a href="#">男包</a>
                    <a href="#">拉杆箱</a>
                    <a href="#">钱包</a>
                </p>
          </li>
            <li class="list-item2">
              <h3>珠宝饰品/手表眼睛</h3>
                <p class="on">
                    <a href="#">珠宝</a>
                    <a href="#">足金</a>
                    <a href="#">钻戒</a>
                    <a href="#">玉镯</a>
                    <a href="#">珍珠</a>
                </p>
                <p class="on">
                    <a href="#">手表</a>
                    <a href="#">饰品</a>
                    <a href="#">毛衣链</a>
                    <a href="#">手链</a>
                    <a href="#">瑞士军刀</a>
                </p>
          </li>
            <li class="list-item3 alt">
              <h3>化妆品</h3>
                <p class="on">
                    <a href="#">护肤</a>
                    <a href="#">彩妆</a>
                    <a href="#">假发</a>
                    <a href="#">香水</a>
                    <a href="#">男士护肤</a>
                </p>
                <p class="on">
                    <a href="#">套装</a>
                    <a href="#">面膜</a>
                    <a href="#">洁面</a>
                    <a href="#">眼霜</a>
                    <a href="#">BB霜</a>
                    <a href="#">爽肤水</a>
                </p>
          </li>
            <li class="list-item4">
              <h3>运动户外</h3>
                <p class="on">
                    <a href="#">运动鞋</a>
                    <a href="#">运动服</a>
                    <a href="#">户外</a>
                    <a href="#">用品</a>
                    <a href="#">板鞋</a>
                </p>
                <p class="on">
                    <a href="#">跑步鞋</a>
                    <a href="#">羽绒服</a>
                    <a href="#">冲锋衣</a>
                    <a href="#">跑步机</a>
                </p>
          </li>
            <li class="list-item5 alt">
              <h3>手机数码</h3>
                <p class="on">
                    <a href="#">手机</a>
                    <a href="#">相机</a>
                    <a href="#">笔记本</a>
                    <a href="#">平板</a>
                    <a href="#">硬件</a>
                </p>
                <p class="on">
                    <a href="#">配件</a>
                    <a href="#">视听</a>
                    <a href="#">移动存储</a>
                    <a href="#">台式机</a>
                </p>
          </li>
            <li class="list-item6">
              <h3>家用电器</h3>
                <p class="on">
                    <a href="#">大家电</a>
                    <a href="#">影音</a>
                    <a href="#">电视</a>
                    <a href="#">耳机</a>
                    <a href="#">厨房</a>
                </p>
                <p class="on">
                    <a href="#">生活电器</a>
                    <a href="#">取暖器</a>
                    <a href="#">个人护理/保健</a>
                </p>
          </li>
            <li class="list-item7 alt">
              <h3>家具建材</h3>
                <p class="on">
                    <a href="#">灯具</a>
                    <a href="#">卫浴</a>
                    <a href="#">油漆</a>
                    <a href="#">开关</a>
                    <a href="#">地板</a>
                    <a href="#">墙纸</a>
                </p>
                <p class="on">
                    <a href="#">沙发</a>
                    <a href="#">床</a>
                    <a href="#">衣柜</a>
                    <a href="#">床垫</a>
                    <a href="#">架类</a>
                    <a href="#">工具</a>
                </p>
          </li>
            <li class="list-item8">
              <h3>家纺/居家</h3>
                <p class="on">
                    <a href="#">四件套</a>
                    <a href="#">蚕丝被</a>
                    <a href="#">冬被</a>
                    <a href="#">枕头</a>
                    <a href="#">家饰</a>
                </p>
                <p class="on">
                    <a href="#">厨房</a>
                    <a href="#">杯子</a>
                    <a href="#">清洁</a>
                    <a href="#">收纳</a>
                    <a href="#">宠物</a>
                    <a href="#">居家</a>
                </p>
          </li>
            <li class="list-item9 alt">
              <h3>母婴玩具</h3>
                <p class="on">
                    <a href="#">奶粉</a>
                    <a href="#">尿裤</a>
                    <a href="#">童装</a>
                    <a href="#">孕产</a>
                    <a href="#">玩具</a>
                    <a href="#">车床</a>
                </p>
                <p class="on">	
                    <a href="#">辅食</a>
                    <a href="#">用品</a>
                    <a href="#">童鞋</a>
                    <a href="#">月子</a>
                    <a href="#">大人玩乐</a>
                </p>
          </li>
            <li class="list-item10">
              <h3>食品</h3>
                <p class="on">
                    <a href="#">零食</a>
                    <a href="#">坚果</a>
                    <a href="#">茶叶</a>
                    <a href="#">冲饮</a>
                    <a href="#">粮油</a>
                    <a href="#">生鲜</a>
                </p>
                <p class="on">
                    <a href="#">酒水</a>
                    <a href="#">白酒</a>
                    <a href="#">葡萄酒</a>
                    <a href="#">巧克力</a>
                    <a href="#">进口</a>
                </p>
          </li>
            <li class="list-item11 alt">
              <h3>医药保健</h3>
                <p class="on">
                    <a href="#">保健</a>
                    <a href="#">滋补</a>
                    <a href="#">养生</a>
                    <a href="#">食疗</a>
                    <a href="#">提高免疫</a>
                </p>
                <p class="on">
                    <a href="#">药品</a>
                    <a href="#">血压</a>
                    <a href="#">美瞳</a>
                    <a href="#">计生</a>
                    <a href="#">体检</a>
                </p>
          </li>
            <li class="list-item12">
              <h3>汽车配件</h3>
                <p class="on">
                    <a href="#">汽车</a>
                    <a href="#">汽车用品</a>
                    <a href="#">坐垫</a>
                    <a href="#">座套</a>
                </p>
                <p class="on">
                    <a href="#">脚垫</a>
                    <a href="#">GPS</a>
                    <a href="#">儿童安全座椅</a>
                    <a href="#">改装</a>
                </p>
          </li>
            <li class="list-item13 alt">
              <h3>图书音像</h3>
                <p class="on">
                    <a href="#">考试</a>
                    <a href="#">儿童</a>
                    <a href="#">小说</a>
                    <a href="#">外语</a>
                    <a href="#">社科</a>
                    <a href="#">艺术</a>
                </p>
                <p class="on">
                    <a href="#">养生</a>
                    <a href="#">文学</a>
                    <a href="#">动漫</a>
                    <a href="#">杂志</a>
                    <a href="#">心理</a>
                    <a href="#">管理</a>
                </p>
          </li>
            <li class="list-item14">
              <h3>文化娱乐</h3>
                <p class="on">
                    <a href="#">电子凭证</a>
                    <a href="#">小猫提货</a>
                    <a href="#">乐器</a>
                    <a href="#">旅游</a>
                </p>
                <p class="on">
                    <a href="#">网店软件</a>
                    <a href="#">古董字画</a>
                    <a href="#">个性定制</a>
                </p>
          </li>
            <li class="list-item15 alt">
              <h3>手机/网游点卡</h3>
          </li>
      </ul>
  </div>		
    <div class="box">
        <div class="hide">1、服装/内衣/配件</div>
        <div class="hide">2、鞋/箱包</div>
        <div class="hide">3、珠宝饰品/手表眼睛</div>
        <div class="hide">4、化妆品</div>
        <div class="hide">5、运动户外</div>
        <div class="hide">6、手机数码</div>
        <div class="hide">7、家用电器</div>
        <div class="hide">8、家具建材</div>
        <div class="hide">9、家纺/居家</div>
        <div class="hide">10、母婴玩具</div>
        <div class="hide">11、食品</div>
        <div class="hide">12、医药保健</div>
        <div class="hide">13、汽车配件</div>
        <div class="hide">14、图书音像</div>
        <div class="hide">15、文化娱乐</div>
        <div class="hide">16、手机、点卡</div>
    </div>		
</div>
</div>
<script type="text/javascript">
$(function(){
	$('#menu').sliders();		
})
//此段代码可以注视起来
/*********start fuck ie**********/
if(window.navigator.userAgent.indexOf('MSIE 6.0')!==-1){
 alert('fuck IE')
}
/*********end fuck ie**********/
</script>
<div style="text-align:center;clear:both">
</div>



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



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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