淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1041|回复: 8
收起左侧

[美工相关] 求助类似这种鼠标滑过的卡盘效果代码

[复制链接]

该用户从未签到

1

主题

3

帖子

215

积分

新手上路

阅读权限: 10

Rank: 1

积分
215

发表于 2016-6-12 11:57:58 | 显示全部楼层 |阅读模式
011.JPG
就是鼠标不用点击,鼠标放在上面相关类目时下方图片滑动出现对应的产品

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


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

  • TA的每日心情
    加油
    前天 09:20
  • 签到天数: 106 天

    连续签到: 2 天

    [LV.6]渐入佳境

    1

    主题

    142

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    17194

    发表于 2016-6-12 13:20:59 | 显示全部楼层
    我也想  楼下大神请告诉一下

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


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

  • TA的每日心情
    抱抱
    6 天前
  • 签到天数: 160 天

    连续签到: 1 天

    [LV.7]炉火纯青

    27

    主题

    919

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    25627

    热心会员最佳新人灌水之王

    发表于 2016-6-12 13:38:27 | 显示全部楼层
    我也想  楼下大神请告诉一下
    其实我只是一枚小小的小白  大神不必在意啦~~
  • TA的每日心情
    思考
    2016-10-10 12:16
  • 签到天数: 89 天

    连续签到: 1 天

    [LV.6]渐入佳境

    33

    主题

    356

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    29948

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

    QQ
    发表于 2016-6-12 13:43:32 | 显示全部楼层
    http://open.taobao.com/doc2/detail.htm?articleId=102084&docType=1&treeId=8#s7

    不知道这里面有没有
    其实我也有个淘宝店戳这里

    该用户从未签到

    1

    主题

    3

    帖子

    215

    积分

    新手上路

    阅读权限: 10

    Rank: 1

    积分
    215

     楼主| 发表于 2016-6-12 21:08:59 | 显示全部楼层
    hanuey 发表于 2016-6-12 13:43
    http://open.taobao.com/doc2/detail.htm?articleId=102084&docType=1&treeId=8#s7

    不知道这里面有没有

    谢谢,但不是

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


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

  • TA的每日心情
    加油
    昨天 16:33
  • 签到天数: 48 天

    连续签到: 2 天

    [LV.5]略有小成

    6

    主题

    137

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    16263

    天猫美工

    发表于 2016-6-13 09:20:45 | 显示全部楼层
    坐等楼下大神回答  

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


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

  • TA的每日心情
    抱抱
    2016-6-15 18:56
  • 签到天数: 11 天

    连续签到: 1 天

    [LV.3]武林新秀

    10

    主题

    175

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    11556

    发表于 2016-6-13 10:06:44 | 显示全部楼层
    我只有这种,不懂就进来问吧,152498058,论坛3群.
    1. <!-- banner自定义-卡盘 -->
    2. <div class="J_TWidget" data-widget-type="Slide" data-widget-config="{'contentCls': 'banner-con','navCls': 'banner-nav','effect': 'scrolly','easing':'easeOutStrong','viewSize':[图片区域宽度],'activeTriggerCls': 'hidden'}" style="width:图片区域宽度+300px;height:300px;overflow: hidden;">
    3.     <!-- 卡盘图片=>图片宽度自定义,高度300px,数量5张 -->
    4.     <div style="float: left;position:relative;width:图片区域宽度;height:300px;">
    5.         <ul class="banner-con">
    6.             <li style="width:图片宽度;height:300px;">
    7.                 <a href="#" target="_blank">
    8.                     <img src="图片地址" width="图片宽度" height="300">
    9.                 </a>
    10.             </li>
    11.             <li style="width:图片宽度;height:300px;">
    12.                 <a href="#" target="_blank">
    13.                     <img src="图片地址" width="图片宽度" height="300">
    14.                 </a>
    15.             </li>
    16.             <li style="width:图片宽度;height:300px;">
    17.                 <a href="#" target="_blank">
    18.                     <img src="图片地址" width="图片宽度" height="300">
    19.                 </a>
    20.             </li>
    21.             <li style="width:图片宽度;height:300px;">
    22.                 <a href="#" target="_blank">
    23.                     <img src="图片地址" width="图片宽度" height="300">
    24.                 </a>
    25.             </li>
    26.             <li style="width:图片宽度;height:300px;">
    27.                 <a href="#" target="_blank">
    28.                     <img src="图片地址" width="图片宽度" height="300">
    29.                 </a>
    30.             </li>
    31.         </ul>
    32.     </div>
    33.     <!-- 激活状态的导航=>默认颜色#ff460e -->
    34.     <div style="float: right;cursor: pointer;text-align: center;">
    35.         <ul>
    36.                 <!-- 第1激活导航 -->
    37.             <li style="display:block;width:300px;height:60px;background: #ff460e;color: #fff;">
    38.                 <div style="float:left;width:20%;line-height:60px;font-size: 36px;font-style: italic;">1</div>
    39.                 <div style="float:left;height:46px;width:80%;text-align: left;padding-top: 13px;">
    40.                     <span style="width:100%;height:20px;display:block;font-size: 18px;">分类1目录名称标题</span>
    41.                     <span style='height:15px;text-transform: uppercase;font-size: 12px;'>category translation</span>
    42.                 </div>
    43.             </li>
    44.             <!-- 第2激活导航 -->
    45.             <li style="display:block;width:300px;height:60px;background: #ff460e;color: #fff;">
    46.                 <div style="float:left;width:20%;line-height:60px;font-size: 36px;font-style: italic;">2</div>
    47.                 <div style="float:left;height:46px;width:80%;text-align: left;padding-top: 13px;">
    48.                     <span style="width:100%;height:20px;display:block;font-size: 18px;">分类2目录名称标题</span>
    49.                     <span style='height:15px;text-transform: uppercase;font-size: 12px;'>category translation</span>
    50.                 </div>
    51.             </li>
    52.             <!-- 第3激活导航 -->
    53.             <li style="display:block;width:300px;height:60px;background: #ff460e;color: #fff;">
    54.                 <div style="float:left;width:20%;line-height:60px;font-size: 36px;font-style: italic;">3</div>
    55.                 <div style="float:left;height:46px;width:80%;text-align: left;padding-top: 13px;">
    56.                     <span style="width:100%;height:20px;display:block;font-size: 18px;">分类3目录名称标题</span>
    57.                     <span style='height:15px;text-transform: uppercase;font-size: 12px;'>category translation</span>
    58.                 </div>
    59.             </li>
    60.             <!-- 第4激活导航 -->
    61.             <li style="display:block;width:300px;height:60px;background: #ff460e;color: #fff;">
    62.                 <div style="float:left;width:20%;line-height:60px;font-size: 36px;font-style: italic;">4</div>
    63.                 <div style="float:left;height:46px;width:80%;text-align: left;padding-top: 13px;">
    64.                     <span style="width:100%;height:20px;display:block;font-size: 18px;">分类4目录名称标题</span>
    65.                     <span style='height:15px;text-transform: uppercase;font-size: 12px;'>category translation</span>
    66.                 </div>
    67.             </li>
    68.             <!-- 第5激活导航 -->
    69.             <li style="display:block;width:300px;height:60px;background: #ff460e;color: #fff;">
    70.                 <div style="float:left;width:20%;line-height:60px;font-size: 36px;font-style: italic;">5</div>
    71.                 <div style="float:left;height:46px;width:80%;text-align: left;padding-top: 13px;">
    72.                     <span style="width:100%;height:20px;display:block;font-size: 18px;">分类5目录名称标题</span>
    73.                     <span style='height:15px;text-transform: uppercase;font-size: 12px;'>category translation</span>
    74.                 </div>
    75.             </li>
    76.         </ul>
    77.     </div>
    78.     <!-- 未激活状态的导航=>默认颜色#b3bfc7 -->
    79.     <div class="footer-more-trigger" style="left:图片区域宽度;top:0;border:none;padding:0;cursor: pointer;text-align: center;">
    80.         <ul class="banner-nav">
    81.                 <!-- 第1未激活导航 -->
    82.             <li class="hidden" style="display:block;width:300px;height:60px;background: #b3bfc7;color: #fff;">
    83.                 <div style="float:left;width:20%;line-height:60px;font-size: 36px;font-style: italic;">1</div>
    84.                 <div style="float:left;height:46px;width:80%;text-align: left;border-bottom: 1px solid #d1d1d1;padding-top: 13px;">
    85.                     <span style="width:100%;height:20px;display:block;font-size: 18px;">分类1目录名称标题</span>
    86.                     <span style='height:15px;text-transform: uppercase;font-size: 12px;'>category translation</span>
    87.                 </div>
    88.             </li>
    89.             <!-- 第2未激活导航 -->
    90.             <li style="display:block;width:300px;height:60px;background: #b3bfc7;color: #fff;">
    91.                 <div style="float:left;width:20%;line-height:60px;font-size: 36px;font-style: italic;">2</div>
    92.                 <div style="float:left;height:46px;width:80%;text-align: left;border-bottom: 1px solid #d1d1d1;padding-top: 13px;">
    93.                     <span style="width:100%;height:20px;display:block;font-size: 18px;">分类2目录名称标题</span>
    94.                     <span style='height:15px;text-transform: uppercase;font-size: 12px;'>category translation</span>
    95.                 </div>
    96.             </li>
    97.             <!-- 第3未激活导航 -->
    98.             <li style="display:block;width:300px;height:60px;background: #b3bfc7;color: #fff;">
    99.                 <div style="float:left;width:20%;line-height:60px;font-size: 36px;font-style: italic;">3</div>
    100.                 <div style="float:left;height:46px;width:80%;text-align: left;border-bottom: 1px solid #d1d1d1;padding-top: 13px;">
    101.                     <span style="width:100%;height:20px;display:block;font-size: 18px;">分类3目录名称标题</span>
    102.                     <span style='height:15px;text-transform: uppercase;font-size: 12px;'>category translation</span>
    103.                 </div>
    104.             </li>
    105.             <!-- 第4未激活导航 -->
    106.             <li style="display:block;width:300px;height:60px;background: #b3bfc7;color: #fff;">
    107.                 <div style="float:left;width:20%;line-height:60px;font-size: 36px;font-style: italic;">4</div>
    108.                 <div style="float:left;height:46px;width:80%;text-align: left;border-bottom: 1px solid #d1d1d1;padding-top: 13px;">
    109.                     <span style="width:100%;height:20px;display:block;font-size: 18px;">分类4目录名称标题</span>
    110.                     <span style='height:15px;text-transform: uppercase;font-size: 12px;'>category translation</span>
    111.                 </div>
    112.             </li>
    113.             <!-- 第5未激活导航 -->
    114.             <li style="display:block;width:300px;height:60px;background: #b3bfc7;color: #fff;">
    115.                 <div style="float:left;width:20%;line-height:60px;font-size: 36px;font-style: italic;">5</div>
    116.                 <div style="float:left;height:46px;width:80%;text-align: left;border-bottom: 1px solid #d1d1d1;padding-top: 13px;">
    117.                     <span style="width:100%;height:20px;display:block;font-size: 18px;">分类5目录名称标题</span>
    118.                     <span style='height:15px;text-transform: uppercase;font-size: 12px;'>category translation</span>
    119.                 </div>
    120.             </li>
    121.         </ul>
    122.     </div>
    123. </div>
    复制代码

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


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

  • TA的每日心情
    加油
    前天 09:18
  • 签到天数: 203 天

    连续签到: 1 天

    [LV.7]炉火纯青

    23

    主题

    571

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    37296

    最佳新人热心会员

    发表于 2016-6-14 08:37:38 | 显示全部楼层
    在线布局的里面应该都有的

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


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

    该用户从未签到

    1

    主题

    3

    帖子

    215

    积分

    新手上路

    阅读权限: 10

    Rank: 1

    积分
    215

     楼主| 发表于 2016-6-14 09:37:57 | 显示全部楼层
    漫步云端 发表于 2016-6-14 08:37
    在线布局的里面应该都有的

    亲,麻烦您说清楚点,谢谢

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-10 05:27 , Processed in 0.119117 second(s), 23 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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