淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

分享一个然并卵的特效

[复制链接]
  • TA的每日心情
    吐舌头
    2015-4-6 19:54
  • 签到天数: 17 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    29

    主题

    144

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    44366

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

    QQ
    发表于 2015-11-16 14:33:33 | 显示全部楼层 |阅读模式
    123123123123.gif
    效果如图

    代码如下
    1. <!--轮播结构为淡隐0.1秒切换,自动轮播,鼠标上移暂停-->
    2. <div class="J_TWidget" data-widget-config="{'effect':'fade','easing':'none','navCls':'nav-kk','contentCls':'con-kk','activeIndex':4,'circular':true,'duration':0.1,'interval':0.1,'delay':0,'autoplay':true}" data-widget-type="Carousel" style="position:relative;overflow:hidden;float:left;width:120px;height:40px;z-index:12;background:url(http://gdp.alicdn.com/imgextra/i3/353516414/TB2szuZgVXXXXcRXXXXXXXXXXXX_!!353516414.png) no-repeat;">
    3.     <!--上边这里的图是底图-->
    4.         <!--下边这里的图实现变换,变换图片都是同一张-->
    5.         <ul class="con-kk">
    6.       <li style="width:30px;float:left;height:40px;overflow:hidden;background:url(http://gdp.alicdn.com/imgextra/i1/353516414/TB2EfiLgVXXXXb3XpXXXXXXXXXX_!!353516414.png) 0 0 no-repeat;">
    7.          
    8.       </li>
    9.              <!--上边是2-->
    10.       <li style="width:30px;float:left;height:40px;margin-left:30px;overflow:hidden;background:url(http://gdp.alicdn.com/imgextra/i1/353516414/TB2EfiLgVXXXXb3XpXXXXXXXXXX_!!353516414.png) -30px 0 no-repeat;">
    11.          
    12.       </li>
    13.             <!--上边是b,注意图片设置是为背景,设置的是背景左偏30像素同时margin-left:30像素,下面同理-->
    14.       <li style="width:30px;float:left;height:40px;margin-left:60px;overflow:hidden;background:url(http://gdp.alicdn.com/imgextra/i1/353516414/TB2EfiLgVXXXXb3XpXXXXXXXXXX_!!353516414.png) -60px 0 no-repeat;">
    15.          
    16.       </li>
    17.       <li style="width:30px;float:left;height:40px;margin-left:90px;overflow:hidden;background:url(http://gdp.alicdn.com/imgextra/i1/353516414/TB2EfiLgVXXXXb3XpXXXXXXXXXX_!!353516414.png) -90px 0 no-repeat;">
    18.          
    19.       </li>
    20.     </ul>
    21.     <div class="footer-more-trigger most-footer footer-more-trigger" style="left:0;top:0;z-index:15;padding:0;border:0;width:100%;height:100%;display:block;overflow:visible;background:none;">
    22.       <!--这里是nav控制柄,实现鼠标上移轮播停止-->
    23.             <ul class="nav-kk" style="width:120px;height:40px;margin:0px auto;overflow:hidden;">
    24.         <!--下边是控制柄的触点位置-->
    25.                 <li style="float:left;width:30px;height:100%;background-image:none;" class="ks-active">
    26.            
    27.         </li>
    28.         <li style="float:left;width:30px;height:100%;background-image:none;">
    29.            
    30.         </li>
    31.         <li style="float:left;width:30px;height:100%;background-image:none;">
    32.            
    33.         </li>
    34.         <li style="float:left;width:30px;height:100%;background-image:none;">
    35.            
    36.         </li>
    37.       </ul>
    38.     </div>
    39.   </div>
    复制代码



    网盘在这
    http://pan.baidu.com/s/1iH6wu



    话不多说

    再了个见

  • TA的每日心情
    思考
    2016-9-11 15:54
  • 签到天数: 206 天

    连续签到: 1 天

    [LV.7]炉火纯青

    24

    主题

    1028

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    32979

    淘宝钻级店美工最佳新人热心会员

    QQ
    发表于 2015-11-16 14:40:33 | 显示全部楼层
    然并卵   
    即使睁开眼睛也看不见,我的心在黑暗中——林疋火昱
  • TA的每日心情
    抱抱
    2016-10-11 10:55
  • 签到天数: 435 天

    连续签到: 1 天

    [LV.9]已臻大成

    11

    主题

    1299

    帖子

    9万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    90955

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

    发表于 2015-11-16 14:45:37 | 显示全部楼层
    好像很丑的样子

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


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

  • TA的每日心情
    抱抱
    2016-11-16 17:20
  • 签到天数: 281 天

    连续签到: 1 天

    [LV.8]自成一派

    32

    主题

    2817

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    45070

    最佳新人热心会员

    QQ
    发表于 2015-11-16 14:52:36 | 显示全部楼层
    代码长了点,加载会很慢的!
    最好的我遇见最美的你,可是我们却隔了一整个青春!http://shop111472591.taobao.com
  • TA的每日心情
    无奈
    2016-11-5 09:19
  • 签到天数: 141 天

    连续签到: 1 天

    [LV.7]炉火纯青

    2

    主题

    400

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    27079

    发表于 2015-11-16 17:18:36 | 显示全部楼层

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


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

  • TA的每日心情
    无奈
    2016-1-27 13:48
  • 签到天数: 89 天

    连续签到: 1 天

    [LV.6]渐入佳境

    31

    主题

    599

    帖子

    6749

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    6749

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

    发表于 2015-11-16 17:46:32 | 显示全部楼层
    2BKK 我是你的粉丝 我要给你生猴子!!!!!!!!!!!!!!!!!!!!!!!

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


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

  • TA的每日心情
    抱抱
    2016-10-14 17:55
  • 签到天数: 90 天

    连续签到: 1 天

    [LV.6]渐入佳境

    17

    主题

    585

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    23827

    发表于 2015-11-16 21:38:03 | 显示全部楼层
    我艹这么6

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-8 04:27 , Processed in 0.127948 second(s), 21 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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