淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1985|回复: 17
收起左侧

分享一个百叶窗的效果

[复制链接]
  • TA的每日心情
    抱抱
    昨天 21:06
  • 签到天数: 337 天

    连续签到: 20 天

    [LV.8]自成一派

    6

    主题

    38

    帖子

    7万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    71430

    最佳新人

    发表于 2015-12-19 20:37:43 | 显示全部楼层 |阅读模式
    刚学的~~~
    1. <!--第1个开始-->
    2. <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','contentCls':'content_01','navCls':'nav_01','easing':'easeOutStrong','autoplay':true,'pauseOnHover':false}" style="width:75px; height:400px; overflow:hidden; float:left;" >
    3.   <ul class="content_01">
    4.     <li style="width:75px; height:400px; background:url(https://img.alicdn.com/imgextra/i3/432712954/TB28mVEiFXXXXblXXXXXXXXXXXX_!!432712954.jpg) 0 0"></li>
    5.     <li style="width:75px; height:400px; background:url(https://img.alicdn.com/imgextra/i3/432712954/TB2OIFeiFXXXXbVXpXXXXXXXXXX_!!432712954.gif) 0 0"></li>
    6.   </ul>
    7. </div>
    8. <!--第1个结束-->

    9. <!--第2个开始-->
    10. <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','contentCls':'content_01','navCls':'nav_01','easing':'easeOutStrong','autoplay':true,'pauseOnHover':false}" style="width:75px; height:400px; overflow:hidden; float:left;" >
    11.   <ul class="content_01">
    12.     <li style="width:75px; height:400px; background:url(https://img.alicdn.com/imgextra/i3/432712954/TB28mVEiFXXXXblXXXXXXXXXXXX_!!432712954.jpg) -75px 0"></li>
    13.     <li style="width:75px; height:400px; background:url(https://img.alicdn.com/imgextra/i3/432712954/TB2OIFeiFXXXXbVXpXXXXXXXXXX_!!432712954.gif) -75px 0"></li>
    14.   </ul>
    15. </div>
    16. <!--第2个结束-->

    17. <!--第3个开始-->
    18. <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','contentCls':'content_01','navCls':'nav_01','easing':'easeOutStrong','autoplay':true,'pauseOnHover':false}" style="width:75px; height:400px; overflow:hidden; float:left;" >
    19.   <ul class="content_01">
    20.     <li style="width:75px; height:400px; background:url(https://img.alicdn.com/imgextra/i3/432712954/TB28mVEiFXXXXblXXXXXXXXXXXX_!!432712954.jpg) -150px 0"></li>
    21.     <li style="width:75px; height:400px; background:url(https://img.alicdn.com/imgextra/i3/432712954/TB2OIFeiFXXXXbVXpXXXXXXXXXX_!!432712954.gif) -150px 0"></li>
    22.   </ul>
    23. </div>
    24. <!--第3个结束-->

    25. <!--第4个开始-->
    26. <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','contentCls':'content_01','navCls':'nav_01','easing':'easeOutStrong','autoplay':true,'pauseOnHover':false}" style="width:75px; height:400px; overflow:hidden; float:left;" >
    27.   <ul class="content_01">
    28.     <li style="width:75px; height:400px; background:url(https://img.alicdn.com/imgextra/i3/432712954/TB28mVEiFXXXXblXXXXXXXXXXXX_!!432712954.jpg) -225px 0"></li>
    29.     <li style="width:75px; height:400px; background:url(https://img.alicdn.com/imgextra/i3/432712954/TB2OIFeiFXXXXbVXpXXXXXXXXXX_!!432712954.gif) -225px 0"></li>
    30.   </ul>
    31. </div>
    32. <!--第4个结束-->

    33. <!--第5个开始-->
    34. <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','contentCls':'content_01','navCls':'nav_01','easing':'easeOutStrong','autoplay':true,'pauseOnHover':false}" style="width:75px; height:400px; overflow:hidden; float:left;" >
    35.   <ul class="content_01">
    36.     <li style="width:75px; height:400px; background:url(https://img.alicdn.com/imgextra/i3/432712954/TB28mVEiFXXXXblXXXXXXXXXXXX_!!432712954.jpg) -300px 0"></li>
    37.     <li style="width:75px; height:400px; background:url(https://img.alicdn.com/imgextra/i3/432712954/TB2OIFeiFXXXXbVXpXXXXXXXXXX_!!432712954.gif) -300px 0"></li>
    38.   </ul>
    39. </div>
    40. <!--第5个结束-->

    41. <!--第6个开始-->
    42. <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','contentCls':'content_01','navCls':'nav_01','easing':'easeOutStrong','autoplay':true,'pauseOnHover':false}" style="width:75px; height:400px; overflow:hidden; float:left;" >
    43.   <ul class="content_01">
    44.     <li style="width:75px; height:400px; background:url(https://img.alicdn.com/imgextra/i3/432712954/TB28mVEiFXXXXblXXXXXXXXXXXX_!!432712954.jpg) -375px 0"></li>
    45.     <li style="width:75px; height:400px; background:url(https://img.alicdn.com/imgextra/i3/432712954/TB2OIFeiFXXXXbVXpXXXXXXXXXX_!!432712954.gif) -375px 0"></li>
    46.   </ul>
    47. </div>
    48. <!--第6个结束-->

    49. <!--第7个开始-->
    50. <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','contentCls':'content_01','navCls':'nav_01','easing':'easeOutStrong','autoplay':true,'pauseOnHover':false}" style="width:75px; height:400px; overflow:hidden; float:left;" >
    51.   <ul class="content_01">
    52.     <li style="width:75px; height:400px; background:url(https://img.alicdn.com/imgextra/i3/432712954/TB28mVEiFXXXXblXXXXXXXXXXXX_!!432712954.jpg) -450px 0"></li>
    53.     <li style="width:75px; height:400px; background:url(https://img.alicdn.com/imgextra/i3/432712954/TB2OIFeiFXXXXbVXpXXXXXXXXXX_!!432712954.gif) -450px 0"></li>
    54.   </ul>
    55. </div>
    56. <!--第7个结束-->

    57. <!--第8个开始-->
    58. <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','contentCls':'content_01','navCls':'nav_01','easing':'easeOutStrong','autoplay':true,'pauseOnHover':false}" style="width:75px; height:400px; overflow:hidden; float:left;" >
    59.   <ul class="content_01">
    60.     <li style="width:75px; height:400px; background:url(https://img.alicdn.com/imgextra/i3/432712954/TB28mVEiFXXXXblXXXXXXXXXXXX_!!432712954.jpg) -525px 0"></li>
    61.     <li style="width:75px; height:400px; background:url(https://img.alicdn.com/imgextra/i3/432712954/TB2OIFeiFXXXXbVXpXXXXXXXXXX_!!432712954.gif) -525px 0"></li>
    62.   </ul>
    63. </div>
    64. <!--第8个结束-->

    65. <!--第9个开始-->
    66. <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','contentCls':'content_01','navCls':'nav_01','easing':'easeOutStrong','autoplay':true,'pauseOnHover':false}" style="width:75px; height:400px; overflow:hidden; float:left;" >
    67.   <ul class="content_01">
    68.     <li style="width:75px; height:400px; background:url(https://img.alicdn.com/imgextra/i3/432712954/TB28mVEiFXXXXblXXXXXXXXXXXX_!!432712954.jpg) -600px 0"></li>
    69.     <li style="width:75px; height:400px; background:url(https://img.alicdn.com/imgextra/i3/432712954/TB2OIFeiFXXXXbVXpXXXXXXXXXX_!!432712954.gif) -600px 0"></li>
    70.   </ul>
    71. </div>
    72. <!--第9个结束-->

    73. <!--第10个开始-->
    74. <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','contentCls':'content_01','navCls':'nav_01','easing':'easeOutStrong','autoplay':true,'pauseOnHover':false}" style="width:75px; height:400px; overflow:hidden; float:left;" >
    75.   <ul class="content_01">
    76.     <li style="width:75px; height:400px; background:url(https://img.alicdn.com/imgextra/i3/432712954/TB28mVEiFXXXXblXXXXXXXXXXXX_!!432712954.jpg) -675px 0"></li>
    77.     <li style="width:75px; height:400px; background:url(https://img.alicdn.com/imgextra/i3/432712954/TB2OIFeiFXXXXbVXpXXXXXXXXXX_!!432712954.gif) -675px 0"></li>
    78.   </ul>
    79. </div>
    80. <!--第10个结束-->

    复制代码



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


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

  • TA的每日心情
    吐舌头
    2016-11-10 13:55
  • 签到天数: 251 天

    连续签到: 1 天

    [LV.8]自成一派

    3

    主题

    346

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    53969

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

    发表于 2015-12-19 20:39:40 | 显示全部楼层
    有效果看吗
    PS美工交流群  283995557
  • TA的每日心情
    抱抱
    昨天 21:06
  • 签到天数: 337 天

    连续签到: 20 天

    [LV.8]自成一派

    6

    主题

    38

    帖子

    7万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    71430

    最佳新人

     楼主| 发表于 2015-12-19 21:07:07 | 显示全部楼层



    补个效果图

    效果图.gif

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


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

    该用户从未签到

    0

    主题

    1

    帖子

    544

    积分

    新手上路

    阅读权限: 10

    Rank: 1

    积分
    544

    发表于 2015-12-19 22:19:07 | 显示全部楼层
    好东西啊,不错,学习了

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


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

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

    连续签到: 1 天

    [LV.8]自成一派

    1

    主题

    183

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    41593

    最佳新人热心会员

    发表于 2015-12-20 00:00:54 | 显示全部楼层
    感谢分享……

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


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

  • TA的每日心情
    臭美
    2016-5-14 09:27
  • 签到天数: 48 天

    连续签到: 1 天

    [LV.5]略有小成

    6

    主题

    692

    帖子

    9246

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    9246

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

    QQ
    发表于 2015-12-20 11:20:31 | 显示全部楼层
    B  来    B来    B 来
    在一片苍茫的马勒戈壁上,生活着一群快乐滴草泥马。
  • TA的每日心情
    臭美
    2016-9-30 10:50
  • 签到天数: 110 天

    连续签到: 1 天

    [LV.6]渐入佳境

    1

    主题

    66

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    12960

    发表于 2015-12-20 13:33:12 | 显示全部楼层
    谢谢分享

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


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

  • TA的每日心情
    思考
    2016-8-3 14:04
  • 签到天数: 28 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    3

    主题

    47

    帖子

    5819

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    5819

    最佳新人

    发表于 2015-12-20 13:45:12 | 显示全部楼层
    谢谢分享

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


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

  • TA的每日心情
    抱抱
    昨天 08:38
  • 签到天数: 678 天

    连续签到: 5 天

    [LV.9]已臻大成

    26

    主题

    2631

    帖子

    18万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    185678

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

    QQ
    发表于 2015-12-20 14:29:17 | 显示全部楼层
    谢谢分享
    QQ交流群  107102001
  • TA的每日心情

    前天 10:09
  • 签到天数: 207 天

    连续签到: 1 天

    [LV.7]炉火纯青

    31

    主题

    1310

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    37809

    热心会员最佳新人

    QQ
    发表于 2015-12-20 17:34:40 | 显示全部楼层
    谢谢楼主,楼主必定千秋万代,永世长存
    当断不断,必受其乱
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2016-12-9 02:16 , Processed in 0.141322 second(s), 34 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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