淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 23746|回复: 148
收起左侧

【渔舟】可关闭的上下抖动聚焦图效果代码

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

    连续签到: 1 天

    [LV.2]登堂入室

    64

    主题

    164

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    53157

    QQ
    发表于 2014-2-27 16:12:19 | 显示全部楼层 |阅读模式
    有图有真相
    抖动.gif


    效果预览地址:http://yijohn.taobao.com/p/show.htm

            这也是很久以前写的一个代码,可自行改编成悬浮旺旺效果,带关闭按钮。
            制作方法仍然是Carousel(旋转木马),具体的思路大家可以分析源码。
            C店可用,天猫店铺请改决定定位的class名。

          
    1. <p> </p>
    2. <div class="footer-more-trigger" style="width:154px; height:10px; border:0; padding:0; top:auto; left:auto; z-index:99;">
    3. <div class="footer-more-trigger" style="width:154px; height:10px; border:0; padding:0; top:-500px; left:20px; z-index:99;">
    4. <div class="J_TWidget" data-widget-type="Tabs" data-widget-config="{'contentCls':'content_yuzhou','navCls':'nav_yuzhou','triggerType':'click'}">
    5.   <ul class="content_yuzhou">
    6.     <li>
    7.       <div class="J_TWidget" data-widget-type="Slide" data-widget-config="{'effect':'scrolly','easing':'none','contentCls':'content','navCls':'nav','circular':false,'duration':0.3,'interval':0.3}">
    8.         <ul class="content">
    9.           <li style="width:154px; height:10px; background:url(http://img02.taobaocdn.com/imgextra/i2/41251343/T2RyMHXXdXXXXXXXXX_!!41251343.png);"><a href="http://yijohn.taobao.com/p/rd108835.htm?spm=0.0.0.0.pC7Dnq" target="_blank" style="width:154px; height:10px; display:block;"></a></li>
    10.           <li style="width:154px; height:159px; background:url(http://img02.taobaocdn.com/imgextra/i2/41251343/T2RyMHXXdXXXXXXXXX_!!41251343.png) 0 -10px;"><a href="http://yijohn.taobao.com/p/rd108835.htm?spm=0.0.0.0.pC7Dnq" target="_blank" style="width:154px; height:159px; display:block;"></a> </li>
    11.         </ul>
    12.         <div class="nav" style="display:none;"></div>
    13.       </div>
    14.     </li>
    15.     <li style="display:none;"></li>
    16.   </ul>
    17.   <ul class="nav_yuzhou">
    18.     <li></li>
    19.     <li class="footer-more-trigger" style="width:24px; height:36px; display:block;border:0; padding:0; top:120px; left:120px; z-index:99; cursor:pointer;"></li>
    20.   </ul>
    21. </div>
    22. </div>
    复制代码





    补充内容 (2014-11-11 19:53):
    渔舟店铺地址 http://shop114199070.taobao.com/
    渔舟装修浮动.png

    【渔舟】特色悬浮代码.zip

    244.52 KB, 下载次数: 702, 下载积分: 美工币 -2

    评分

    参与人数 10美工币 +214 收起 理由
    云鹏 + 10 原创!
    漠然 + 20
    泪奔猪 + 4 乐于助人!
    dscsct + 10 很给力!
    依雅可儿 + 10
    小鬼玩时尚 + 16 很给力!
    xtmdfzy + 20 真神降世!支持一下!
    gxzhou + 100 赞一个!
    gaokuan + 20 感谢分享!
    一天构思 + 4 感谢分享!

    查看全部评分

    本帖被以下淘专辑推荐:

  • TA的每日心情
    大哭
    2014-4-26 23:47
  • 签到天数: 66 天

    连续签到: 1 天

    [LV.6]渐入佳境

    7

    主题

    117

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    38948

    最佳新人热心会员

    发表于 2014-2-27 16:14:31 | 显示全部楼层
    我抢到沙发了

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


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

  • TA的每日心情
    抱抱
    2017-2-8 14:00
  • 签到天数: 125 天

    连续签到: 1 天

    [LV.7]炉火纯青

    21

    主题

    239

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    39754

    最佳新人热心会员

    发表于 2014-2-27 16:21:44 | 显示全部楼层
    很神奇 刚到论坛就看到这么多好代码 支持楼主

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


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

  • TA的每日心情

    2014-11-18 13:22
  • 签到天数: 165 天

    连续签到: 2 天

    [LV.7]炉火纯青

    0

    主题

    125

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    25732

    发表于 2014-2-27 16:23:11 | 显示全部楼层
    向楼主多学习

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


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

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

    连续签到: 1 天

    [LV.6]渐入佳境

    6

    主题

    248

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    37347

    QQ
    发表于 2014-2-27 16:30:58 | 显示全部楼层
    支持大神的代码!
    不是大神,只是偶尔来论坛给大家解答问题!欢迎交友
  • TA的每日心情
    加油
    2017-4-11 10:13
  • 签到天数: 122 天

    连续签到: 2 天

    [LV.7]炉火纯青

    10

    主题

    166

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    31439

    发表于 2014-2-27 16:38:19 | 显示全部楼层
    向渔舟大神学习了!

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


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

  • TA的每日心情
    臭美
    2017-2-24 21:54
  • 签到天数: 264 天

    连续签到: 1 天

    [LV.8]自成一派

    4

    主题

    543

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    63238

    最佳新人热心会员宣传达人

    发表于 2014-2-27 16:48:08 | 显示全部楼层
    很给力,支持,继续,不要停

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


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

  • TA的每日心情
    大哭
    2017-3-7 14:43
  • 签到天数: 416 天

    连续签到: 1 天

    [LV.9]已臻大成

    63

    主题

    355

    帖子

    10万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    101162

    发表于 2014-2-27 16:50:12 | 显示全部楼层
    你这么吊你家里知道吗?
  • TA的每日心情
    加油
    2015-4-3 08:26
  • 签到天数: 203 天

    连续签到: 1 天

    [LV.7]炉火纯青

    0

    主题

    154

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    30181

    发表于 2014-2-27 17:36:59 | 显示全部楼层
    非常不错的效果  膜拜中[膜拜]_| ̄|○ → _|\○_ → _/\○_ → ____○_

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


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

  • TA的每日心情
    无奈
    2014-3-6 09:51
  • 签到天数: 20 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    1

    主题

    46

    帖子

    3852

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3852

    发表于 2014-2-27 18:02:55 | 显示全部楼层
    先收藏,再试,谢楼主!!

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


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

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

    本版积分规则

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

    GMT+8, 2017-4-25 02:11 , Processed in 0.174891 second(s), 38 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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