淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 41601|回复: 202
收起左侧

【渔舟】动感页头导航效果代码

  [复制链接]
  • TA的每日心情
    抱抱
    2016-12-1 09:10
  • 签到天数: 4 天

    连续签到: 1 天

    [LV.2]登堂入室

    64

    主题

    164

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    53157

    QQ
    发表于 2014-2-27 15:03:17 | 显示全部楼层 |阅读模式
    有图有真相:
    动感导航.gif

    效果展示地址:http://yijohn.taobao.com/p/show.htm

           浏览了一下帖子,发现很多人把我之前店铺的代码发了上来,能够给大家提供学习参考的内容,感到十分欣慰。
          上图的这个效果是很久以前做的,主要的思路还是利用轮播效果,这里用到的一点小技巧就是需要将轮播的content和nav部分倒置,然后就可以呈现出这种效果。 目前这个效果只能用于C店,如果需要用到天猫店铺,只需要更换绝对定位的class名即可,也就是把footer-more-trigger换成mallNav-others即可。
          关于轮播部分的制作,我在之前的课程中也讲过很多遍了。 大家可以下载下面的视频学习。
          http://pan.baidu.com/share/link? ... 7&uk=3761244315

          好了,废话不多说了,直接上代码吧。

    1. <div style="height:100px;">
    2. <div class="footer-more-trigger" style="width:950px; height:100px; border:0; padding:0; top:auto; left:auto;">
    3. <div class="J_TWidget" data-widget-type="Slide" data-widget-config="{'effect':'none','autoplay':false,'contentCls':'content_yuzhou01','navCls':'nav_yuzhou01','activeTriggerCls':'tshop-pbsm-shop-nav-ch'}">
    4.   <ul class="nav_yuzhou01">
    5.     <li style="display:none;"></li>
    6.     <li>
    7.       <!--具体内容-->
    8.       <div style="height:50px; padding-top:25px; padding-bottom:25px; background-color:#111111;">
    9.         <div class="J_TWidget" data-widget-type="Slide" data-widget-config="{'effect':'scrollx','easing':'easeOutStrong','delay':0,'contentCls':'content_yuzhou','navCls':'nav_yuzhou','autoplay':false,'duration':0.4}">
    10.           <ul class="nav_yuzhou" style="width:950px; height:50px; background-color:#212121;">
    11.             <li style="width:100px; height:50px; background:url(\"\") right center no-repeat; float:right; margin-right:50px;"><a class="title_yuzhou" style="display:block; width:100%; height:100%; line-height:50px; color:#eeeeee; text-align:center;"><span>收藏</span></a></li>
    12.             <li style="width:100px; height:50px; background:url(\"\") right center no-repeat; float:right;"><a class="title_yuzhou" style="display:block; width:100%; height:100%; line-height:50px; color:#eeeeee; text-align:center;"><span>特效</span></a></li>
    13.             <li style="width:100px; height:50px; background:url(\"\") right center no-repeat; float:right;"><a class="title_yuzhou" style="display:block; width:100%; height:100%; line-height:50px; color:#eeeeee; text-align:center;"><span>音乐</span></a></li>
    14.             <li style="width:100px; height:50px; background:url(\"\") right center no-repeat; float:right;"><a class="title_yuzhou" style="display:block; width:100%; height:100%; line-height:50px; color:#eeeeee; text-align:center;"><span>图片</span></a></li>
    15.             <li style="width:100px; height:50px; background:url(\"\") right center no-repeat; float:right;"><a class="title_yuzhou" style="display:block; width:100%; height:100%; line-height:50px; color:#eeeeee; text-align:center;"><span>模板</span></a></li>
    16.             <li style="width:100px; height:50px; background:url(\"\") right center no-repeat; float:right;"><a class="title_yuzhou" style="display:block; width:100%; height:100%; line-height:50px; color:#eeeeee; text-align:center;"><span>代码</span></a></li>
    17.             <li style="width:100px; height:50px; background:url(\"\") right center no-repeat; float:right;"><a class="title_yuzhou" style="display:block; width:100%; height:100%; line-height:50px; color:#eeeeee; text-align:center;"><span>素材</span></a></li>
    18.             <li style="width:100px; height:50px; background:url(\"\") right center no-repeat; float:right;"><a class="title_yuzhou" style="display:block; width:100%; height:100%; line-height:50px; color:#eeeeee; text-align:center;"><span>软件</span></a></li>
    19.             <li style="width:100px; height:50px; background:url(\"\") right center no-repeat; float:right;"><a class="title_yuzhou" style="display:block; width:100%; height:100%; line-height:50px; color:#eeeeee; text-align:center;"><span>首页</span></a></li>
    20.           </ul>
    21.           <ul class="content_yuzhou" style="height:16px; top:0; left:0;">
    22.             <li style="width:100px; height:16px; float:left;"></li>
    23.             <li style="width:100px; height:16px; float:left;"></li>
    24.             <li style="width:100px; height:16px; float:left;"></li>
    25.             <li style="width:100px; height:16px; float:left;"></li>
    26.             <li style="width:100px; height:16px; float:left;"></li>
    27.             <li style="width:100px; height:16px; float:left;"></li>
    28.             <li style="width:100px; height:16px; float:left;"></li>
    29.             <li style="width:100px; height:16px; float:left;"></li>
    30.             <li style="width:100px; height:16px; float:left; background:url(\"\") center center no-repeat;"></li>
    31.           </ul>
    32.         </div>
    33.       </div>
    34.       <!--//具体内容 end-->
    35.     </li>
    36.   </ul>
    37. </div>
    38. </div>
    39. </div>



    评分

    参与人数 18美工币 +425 收起 理由
    naice + 10 赞一个!请问怎么改成天猫用的, 完全不懂代.
    小王八 + 20 改了很久,还是不会用。。。好难过.
    夜猫猫猫 + 10 乐于助人!
    安静Always + 4 很给力!
    独守空城 + 20 赞一个!
    终身伴旅箱包馆 + 2 很给力!
    泪奔猪 + 4 乐于助人!
    bdk236 + 20 很给力!
    youngerweb + 20 你好像酷酷的感觉
    zhengjun + 20 赞一个!
    小鬼玩时尚 + 20 --------强
    Rain + 100 大叔 太强了
    gxzhou + 100 不愧是大师,感谢您的分享!
    Lusen + 20 给老师赞一个!
    X_in + 20 感谢分享!
    名字被误解 + 10 网盘地址失效了
    脑袋满满 + 20 代码的指导师...总是默默的看你的视频,第.
    什么名字 + 5

    查看全部评分

    本帖被以下淘专辑推荐:

  • TA的每日心情
    抱抱
    2016-12-1 09:10
  • 签到天数: 4 天

    连续签到: 1 天

    [LV.2]登堂入室

    64

    主题

    164

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    53157

    QQ
     楼主| 发表于 2014-2-27 15:15:30 | 显示全部楼层
    粑粑 发表于 2014-2-27 15:12
    我记得这个分享过2次了,楼主是发第三次了哦~

    这个是我大概一年前写的,可能是别人复制我店铺的代码发的吧。
    回复 支持 2 反对 1

    使用道具 举报

  • TA的每日心情
    吐舌头
    2015-4-18 20:42
  • 签到天数: 16 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    3

    主题

    123

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    11829

    最佳新人

    发表于 2014-2-27 15:09:32 | 显示全部楼层
    沙发啊 我能离大神这么接近,我也值得了! 老师你太棒了!

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    思考
    2017-3-13 14:52
  • 签到天数: 68 天

    连续签到: 1 天

    [LV.6]渐入佳境

    7

    主题

    173

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    35821

    发表于 2014-2-27 15:11:30 | 显示全部楼层
    渔舟果然牛!支持ing ,想知道大神的所有教学视频在哪呢 可以告知呢么?

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    加油
    2015-12-9 09:49
  • 签到天数: 139 天

    连续签到: 1 天

    [LV.7]炉火纯青

    0

    主题

    233

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    26779

    发表于 2014-2-27 15:12:07 | 显示全部楼层
    我记得这个分享过2次了,楼主是发第三次了哦~
    高级打杂一枚,喜欢跟技术宅做朋友~
  • TA的每日心情
    思考
    2017-3-13 14:52
  • 签到天数: 68 天

    连续签到: 1 天

    [LV.6]渐入佳境

    7

    主题

    173

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    35821

    发表于 2014-2-27 15:12:19 | 显示全部楼层
    网盘挂了...

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    抱抱
    2016-12-1 09:10
  • 签到天数: 4 天

    连续签到: 1 天

    [LV.2]登堂入室

    64

    主题

    164

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    53157

    QQ
     楼主| 发表于 2014-2-27 15:14:33 | 显示全部楼层

    直接百度搜索“渔舟教室”,里面有,网盘链接好像被屏蔽了。
  • TA的每日心情
    抱抱
    2016-12-1 09:10
  • 签到天数: 4 天

    连续签到: 1 天

    [LV.2]登堂入室

    64

    主题

    164

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    53157

    QQ
     楼主| 发表于 2014-2-27 15:16:04 | 显示全部楼层
    哈后 发表于 2014-2-27 15:11
    渔舟果然牛!支持ing ,想知道大神的所有教学视频在哪呢 可以告知呢么?
    ...

    直接百度搜索“渔舟教室”,第一个就是哦。
  • TA的每日心情
    加油
    2017-8-9 15:24
  • 签到天数: 379 天

    连续签到: 1 天

    [LV.9]已臻大成

    32

    主题

    1147

    帖子

    7万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    73604

    天猫美工最佳新人热心会员

    QQ
    发表于 2014-2-27 15:23:09 | 显示全部楼层
    是大师本人么?特约嘉宾?

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    抱抱
    2017-2-17 16:42
  • 签到天数: 102 天

    连续签到: 1 天

    [LV.6]渐入佳境

    6

    主题

    254

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    40357

    QQ
    发表于 2014-2-27 15:26:40 | 显示全部楼层
    大神居然来这个论坛了?常驻 吗?

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|Archiver|手机版|坛主个人微信公众号|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2017-10-23 23:00 , Processed in 0.178368 second(s), 44 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表