淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 4077|回复: 44
收起左侧

【渔舟】课程实例——widget嵌套制作鼠标跟随效果

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

    连续签到: 1 天

    [LV.2]登堂入室

    61

    主题

    154

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51879

    QQ
    发表于 2015-7-27 19:15:09 | 显示全部楼层 |阅读模式
    本帖最后由 渔舟 于 2015-7-27 19:16 编辑

    先来看一下效果视频。


    实例预览:http://shop114199070.taobao.com/

    有心的同学应该不难发现,这个跟我在2013年写的【渔舟】动感页头导航效果代码 的思路是一样,这一次改进来一下,从水平和垂直两个方向来轮播,控制柄的部分倒置,即可实file:///f:/软件安装目录/360安全浏览器/360se6/User Data/temp/145436ak4yzolx4144hzls.gif现。


    源码如下:
    1. <div class="footer-more" style="width:950px; height:600px; border:0; padding:0; background:url(https://img.alicdn.com/imgextra/i2/2272660937/TB2iVdEeXXXXXXbXXXXXXXXXXXX_!!2272660937.jpg);">
    2. <div class="J_TWidget footer-more-panel" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backOut','contentCls':'content_yuzhou_main','navCls':'nav_yuzhou_main','autoplay':true,'activeTriggerCls':'hidden','delay':0}" style="width:950px; height:600px; position:relative; border:0; padding:0; bottom:0; right:0; background:none;">
    3.   <div style="width:950px; height:600px; overflow:hidden;">
    4.     <div class="content_yuzhou_main">
    5.     <div style="width:950px; height:300px;"></div>
    6.       <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','easing':'backOut','contentCls':'content_yuzhou','navCls':'nav_yuzhou','delay':0}" style="width:950px; height:300px;">
    7.         <ul class="content_yuzhou" style="width:999999px;">
    8.           <li style="width:190px; height:300px; float:left;"> </li>
    9.           <li style="width:190px; height:300px; float:left;"> </li>
    10.           <li style="width:190px; height:300px; float:left;"> </li>
    11.           <li style="width:190px; height:300px; float:left;"> </li>
    12.           <li style="width:184px; height:294px; float:left; border:3px solid #f00;"> </li>
    13.         </ul>
    14.         <ul class="nav_yuzhou" style="position:relative;">
    15.           <li style="width:190px; height:300px; float:right; background:url(https://img.alicdn.com/imgextra/i3/2272660937/TB2zClGdFXXXXbcXpXXXXXXXXXX_!!2272660937.gif);"></li>
    16.           <li style="width:190px; height:300px; float:right; background:url(https://img.alicdn.com/imgextra/i3/2272660937/TB2zClGdFXXXXbcXpXXXXXXXXXX_!!2272660937.gif);"></li>
    17.           <li style="width:190px; height:300px; float:right; background:url(https://img.alicdn.com/imgextra/i3/2272660937/TB2zClGdFXXXXbcXpXXXXXXXXXX_!!2272660937.gif);"></li>
    18.           <li style="width:190px; height:300px; float:right; background:url(https://img.alicdn.com/imgextra/i3/2272660937/TB2zClGdFXXXXbcXpXXXXXXXXXX_!!2272660937.gif);"></li>
    19.           <li style="width:190px; height:300px; float:right; background:url(https://img.alicdn.com/imgextra/i3/2272660937/TB2zClGdFXXXXbcXpXXXXXXXXXX_!!2272660937.gif);"></li>
    20.         </ul>
    21.       </div>
    22.    
    23.     </div>
    24.   <ul class="nav_yuzhou_main">
    25.     <li class="footer-more-trigger" style="width:950px; height:300px; border:0; padding:0; background:url(https://img.alicdn.com/imgextra/i3/2272660937/TB2zClGdFXXXXbcXpXXXXXXXXXX_!!2272660937.gif); top:300px; left:0;"></li>
    26.     <li class="footer-more-trigger" style="width:950px; height:300px; border:0; padding:0; background:url(https://img.alicdn.com/imgextra/i3/2272660937/TB2zClGdFXXXXbcXpXXXXXXXXXX_!!2272660937.gif); top:0; left:0;"></li>
    27.   </ul>
    28.   </div>
    29. </div>
    30. </div>
    复制代码


    渔舟原创,转载请注明出处,谢谢!



    评分

    参与人数 3美工币 +140 收起 理由
    NewBalance + 20
    非攻兼爱 + 20 很给力!
    Rain + 100 赞一个!

    查看全部评分

  • TA的每日心情

    2015-9-29 17:06
  • 签到天数: 87 天

    连续签到: 1 天

    [LV.6]渐入佳境

    26

    主题

    339

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    52932

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

    发表于 2015-7-27 19:16:43 | 显示全部楼层
    你的贴竟然没人顶,哎,我来吧
  • TA的每日心情

    2015-6-9 23:56
  • 签到天数: 18 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    1

    主题

    52

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    29545

    发表于 2015-7-27 19:38:35 | 显示全部楼层
    围观大神!!!

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


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

  • TA的每日心情
    无奈
    2016-11-21 19:37
  • 签到天数: 289 天

    连续签到: 2 天

    [LV.8]自成一派

    53

    主题

    2463

    帖子

    8万

    积分

    超级版主

    阅读权限: 150

    超级大菜鸟

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    积分
    88609

    最佳新人热心会员宣传达人推广达人活跃会员优秀版主

    发表于 2015-7-27 19:50:16 | 显示全部楼层
    赞一下
  • TA的每日心情

    2016-11-20 16:01
  • 签到天数: 99 天

    连续签到: 1 天

    [LV.6]渐入佳境

    7

    主题

    222

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    24577

    最佳新人热心会员

    QQ
    发表于 2015-7-27 20:18:34 | 显示全部楼层
    活捉大神一只
    淘宝代码问题直接加QQ:343063418
  • TA的每日心情
    心跳
    昨天 10:47
  • 签到天数: 553 天

    连续签到: 1 天

    [LV.9]已臻大成

    0

    主题

    125

    帖子

    8万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    80197

    发表于 2015-7-27 20:53:05 | 显示全部楼层
    大神啊,膜拜

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


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

  • TA的每日心情
    不爽
    2013-8-19 20:42
  • 签到天数: 8 天

    连续签到: 1 天

    [LV.3]武林新秀

    43

    主题

    2260

    帖子

    11万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    116895

    活跃会员热心会员

    发表于 2015-7-27 21:43:27 | 显示全部楼层
    用不上,纯帮顶
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2016-12-3 02:06 , Processed in 0.135092 second(s), 25 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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