淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 3017|回复: 20
收起左侧

动感图片切换

[复制链接]
  • TA的每日心情

    2016-11-16 15:40
  • 签到天数: 99 天

    连续签到: 2 天

    [LV.6]渐入佳境

    16

    主题

    336

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43960

    发表于 2015-6-9 15:17:41 | 显示全部楼层 |阅读模式
    1. <!-- 全屏代码 -->
    2. <div style="height:580px;"><!-- 包裹内容消除溢出,因为第三个div向上偏移20px故实际大小500减去20px -->
    3. <div class="footer-more-trigger" style="border:0px;left:auto;padding:0px;top:auto;"><!-- 让下个div以此div进行居中定位 -->
    4. <div class="footer-more-trigger" style="border:0px;padding:0px;top:-20px;width:1920px;left:-485px;height:600px;">
    5. <!--动感切换开始-->
    6. <div style="height:240px;width:990px;margin:auto;">
    7.      <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'activeTriggerCls':'item-text','easing':'easeBoth','effect':'scrollx','navCls':'ling-nav','contentCls':'ling-cnt','activeIndex':3,'autoplay':false}" style="position:relative;">
    8.              <ul class="ling-cnt" style="display:none;"><li></li></ul>
    9.              <div class="ling-nav search-wrap-cloud" style="width:990px;height:240px;background: url(http://img01.taobaocdn.com/imgextra/i1/2528527229/TB2QzFadXXXXXXoXpXXXXXXXXXX_!!2528527229.jpg);">
    10.                  <a  target="_blank" style="width:240px;height:240px;display:block;float:left;margin-right:10px;padding:0px;background-image:url(http://img01.taobaocdn.com/imgextra/i1/2528527229/TB21nhVdXXXXXbnXXXXXXXXXXXX_!!2528527229.png);transition:all cubic-bezier(.1,.1,.15,1) 2s;">
    11.                  </a>
    12.                  <a href="#" target="_blank" style="width:240px;height:240px;display:block;float:left;margin-right:10px;padding:0px;background-image:url(http://img01.taobaocdn.com/imgextra/i1/2528527229/TB2B4FjdXXXXXahXXXXXXXXXXXX_!!2528527229.png);transition:all cubic-bezier(.1,.01,.15,1) 2s;">
    13.                  </a>
    14.                  <a href="#" target="_blank" style="width:240px;height:240px;display:block;float:left;margin-right:10px;padding:0px;background-image:url(http://img01.taobaocdn.com/imgextra/i1/2528527229/TB2B4FjdXXXXXahXXXXXXXXXXXX_!!2528527229.png);transition:all cubic-bezier(.1,.01,.15,1) 2s;">
    15.                  </a>
    16.                  <a href="#" target="_blank" style="width:240px;height:240px;display:block;float:left;padding:0px;background-image:url(http://img01.taobaocdn.com/imgextra/i1/2528527229/TB2B4FjdXXXXXahXXXXXXXXXXXX_!!2528527229.png);transition:all cubic-bezier(.1,.01,.15,1) 2s;">
    17.                  </a>
    18.              </div>
    19.      </div>
    20. </div>
    21. <!--动感切换代码结束-->
    22. </div>
    23. </div>
    24. </div>
    25. <!-- 全屏代码结束 -->
    复制代码
    可通过CSS3 2D 转换对图片弹出方向进行改变

    动感换图.gif

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


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

  • TA的每日心情
    加油
    2016-2-19 10:16
  • 签到天数: 112 天

    连续签到: 1 天

    [LV.6]渐入佳境

    3

    主题

    410

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    23943

    最佳新人热心会员

    QQ
    发表于 2015-6-9 15:59:37 | 显示全部楼层
    效果不错,图片是多大尺寸的啊,可以更改大小吗?
    我就看看不说话
  • TA的每日心情

    2016-11-16 15:40
  • 签到天数: 99 天

    连续签到: 2 天

    [LV.6]渐入佳境

    16

    主题

    336

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43960

     楼主| 发表于 2015-6-9 16:02:04 | 显示全部楼层
    黑漆马骨洞 发表于 2015-6-9 15:59
    效果不错,图片是多大尺寸的啊,可以更改大小吗?

    可以,大小可以随意修改,先把原图片看下再作图

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


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

  • TA的每日心情
    加油
    2016-10-1 13:23
  • 签到天数: 51 天

    连续签到: 1 天

    [LV.5]略有小成

    2

    主题

    101

    帖子

    6802

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    6802

    最佳新人

    发表于 2015-6-9 16:11:31 | 显示全部楼层
    刚学会了这个

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


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

  • TA的每日心情
    委屈
    2015-6-10 11:23
  • 签到天数: 97 天

    连续签到: 1 天

    [LV.6]渐入佳境

    8

    主题

    226

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    23377

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

    QQ
    发表于 2015-6-10 12:11:35 | 显示全部楼层
    这是天猫还是淘宝的,怎么我天猫试了不行?

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


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

  • TA的每日心情

    2016-11-16 15:40
  • 签到天数: 99 天

    连续签到: 2 天

    [LV.6]渐入佳境

    16

    主题

    336

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43960

     楼主| 发表于 2015-6-10 13:27:33 | 显示全部楼层
    高级菜鸟 发表于 2015-6-10 12:11
    这是天猫还是淘宝的,怎么我天猫试了不行?

    这是淘宝的 ,天猫的把footer-more-trigger换成sn-simple-logo

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


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

  • TA的每日心情
    臭美
    2016-8-31 13:49
  • 签到天数: 274 天

    连续签到: 1 天

    [LV.8]自成一派

    23

    主题

    393

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    32053

    发表于 2015-6-25 14:54:45 | 显示全部楼层
    路过,加点墨水

    小煒小站 http://www.lliwenwei.net/ 打打小广告
  • TA的每日心情
    臭美
    2015-8-24 14:26
  • 签到天数: 5 天

    连续签到: 1 天

    [LV.2]登堂入室

    0

    主题

    11

    帖子

    595

    积分

    新手上路

    阅读权限: 10

    Rank: 1

    积分
    595

    发表于 2015-7-6 20:32:58 | 显示全部楼层
    涨知识了。。。

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


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

  • TA的每日心情
    臭美
    2015-8-24 14:26
  • 签到天数: 5 天

    连续签到: 1 天

    [LV.2]登堂入室

    0

    主题

    11

    帖子

    595

    积分

    新手上路

    阅读权限: 10

    Rank: 1

    积分
    595

    发表于 2015-7-6 20:47:37 | 显示全部楼层
    在DW软件中,粘贴在那个位置啊,我很策的。谢谢

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


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

  • TA的每日心情

    2016-11-16 15:40
  • 签到天数: 99 天

    连续签到: 2 天

    [LV.6]渐入佳境

    16

    主题

    336

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43960

     楼主| 发表于 2015-7-7 09:44:13 | 显示全部楼层
    慾小四 发表于 2015-7-6 20:47
    在DW软件中,粘贴在那个位置啊,我很策的。谢谢

    body标签内,放上淘宝才有效

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-9 15:49 , Processed in 0.140917 second(s), 23 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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