淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 5193|回复: 26
收起左侧

【乳酸君】仿京东-左滑展示效果

[复制链接]
  • TA的每日心情
    臭美
    前天 15:06
  • 签到天数: 751 天

    连续签到: 3 天

    [LV.10]功行圆满

    2

    主题

    276

    帖子

    14万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    148668

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

    发表于 2015-2-2 09:13:51 | 显示全部楼层 |阅读模式
    本帖最后由 乳酸君 于 2015-2-2 09:41 编辑

    全称:仿京东-左滑开关灯展示效果
    首次发帖,不足之处还请谅解
    原始效果图:店铺网址就不上了,看图片也差不多了,图片是GIF录制,连贯性不是很好。(不用在意这些细节)


    简化代码后效果图:简化后的标题是图片


      此效果模仿并结合自京东的首页【生活的橱窗】和服饰配饰下的【特价商品】两个板块效果。
      
    思路及原理:
      采用Widget规范 的Carousel - 旋转木马,也就是轮播,鼠标经过的时候添加控件的原理来实现,引用的是官方class。
      虽然不能达到hover的完美效果,但是也能达到90%,而且会有轮播功能,觉得反而塞翁失马了,呵呵。(有人会觉得似曾相识,不用在意这些细节。此方法可以拓展出更多功能,有兴趣的可以研究研究)

    优点其缺点:
      优点:无需css权限,即可基本达到css效果;
      缺点:需要开通免费店铺音乐服务;引用的是官方class,具有不确定因素;需要发布才能看见全部效果(目前此缺点可以忽略)
    灵感与方法来源:张神、杜神,taobaoux.com……(真不用在意这些细节)

    兼容性:

    浏览器
    兼容性测试
    IE5
    IE6
    IE7
    IE8
    IE9
    IE10
    IE11
    火狐
    谷歌
    欧朋
    PNG透明
    ×
    ×
    CSS3属性
    动画与过渡
    ×
    ×
    ×
    ×
    ×
    理想状态
    ×
    ×
    ×
    ×
    ×



    -----------------------------------高手可以忽略这个部分……---------------------------------

    解读:
    模块基本大小:1200px × 400px
    左侧轮播部分:
    小图模块框架:宽180px高200px;
    大图模块框架:宽180px高400px;
    图片制作:小图模块图片大小:宽220px高200px;大图模块图片大小:宽220px高400px。
      ┗图片的宽度比模块宽了40px,这40px就是向左滑动的距离。滑动位置的多少根据图片超出多少来定。(例如可以把图片做一张宽180px+180px=360px的,左边180px为一个内容,右边180px为另一个内容,就可以达到左右换图效果)。
    图片替换:此部分动画是利用背景制作,替换的时候找到对应位置,复制图片网址替换即可;标题则找到对应位置,直接复制图片代码替换即可

    右侧展示部分:
    上半部小图模块框架:宽150px高50px;
    下半部大图模块框架:宽300px高250px;
    图片制作:图片大小按框架大小制作即可。
    图片替换:此部分为图片替换的时候找到对应位置,直接复制图片代码替换即可

    ----------------------------------------小弟献丑了-------------------------------------------------

    简化后代码:此为C店代码,天猫请自行适配
    1. <div style="height:400px;">
    2.     <div class="footer-more-trigger most-footer" style="width:1200px; height:400px; background:none; border:0; padding:0; top:auto; left:auto;">
    3.         <div class="footer-more-trigger most-footer" style="width:1200px; height:400px; background:none; border:0; padding:0; top:auto; left:-125px;">
    4.             <div class="xm-musicplayer" style=" width:1200px; height:400px;background:#000;position:relative; border-top:0;font-family: microsoft yahei;font-size:18px;">
    5.                 <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{
    6.                      'activeTriggerCls':'item-text',
    7.                      'easing':'easeOutStrong',
    8.                      'navCls':'zsj_nav',
    9.                      'delay':0.1,
    10.                      'contentCls':'zsj_content',
    11.                      'interval':2,
    12.                      'autoplay':true
    13.                      }">
    14.                     <div class="zsj_nav search-wrap-cloud" style="width:900px; height:400px; display:block;float: left;">
    15.                         <a style="display:none;">0 </a>
    16.                         <a href="#" target="_blank" class="footer-more-trigger most-footer xm-img" style="display:block;float:left;height:200px;width:180px;left:0;top:auto;border:0;padding:0;margin:0;background-image:url(http://img01.taobaocdn.com/imgextra/i1/230752094/TB2EaoAbFXXXXXPXXXXXXXXXXXX_!!230752094.jpg);transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;"><img src="http://img01.taobaocdn.com/imgextra/i1/230752094/TB2mlIsbFXXXXbFXXXXXXXXXXXX_!!230752094.png" alt=" 仿京东-标题用_A" />
    17.                         </a>
    18.                         <a href="#" target="_blank" class="footer-more-trigger most-footer xm-img" style="display:block;float:left;height:200px;width:180px;left:0;top:200px;border:0;padding:0;margin:0;background-image:url(http://img01.taobaocdn.com/imgextra/i1/230752094/TB2c4wobFXXXXXTXpXXXXXXXXXX_!!230752094.jpg);transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;"><img src="http://img03.taobaocdn.com/imgextra/i3/230752094/TB2kBwzbFXXXXXPXXXXXXXXXXXX_!!230752094.png" alt=" 仿京东-标题用_B" />
    19.                         </a>
    20.                         <a href="#" target="_blank" class="footer-more-trigger most-footer xm-img" style="display:block;float:left;height:400px;width:180px;left:180px;top:0;border:0;padding:0;margin:0;background-image:url(http://img01.taobaocdn.com/imgextra/i1/230752094/TB2hjQxbFXXXXahXXXXXXXXXXXX_!!230752094.jpg);transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;"><img src="http://img01.taobaocdn.com/imgextra/i1/230752094/TB2xuIYbFXXXXXBXpXXXXXXXXXX_!!230752094.png" alt=" 仿京东-标题用_C"/>
    21.                         </a>
    22.                         <a href="#" target="_blank" class="footer-more-trigger most-footer xm-img" style="display:block;float:left;height:200px;width:180px;left:360px;top:auto;border:0;padding:0;margin:0;background-image:url(http://img01.taobaocdn.com/imgextra/i1/230752094/TB2wbkAbFXXXXX3XXXXXXXXXXXX_!!230752094.jpg);transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;"><img src="http://img02.taobaocdn.com/imgextra/i2/230752094/TB2qzIybFXXXXX.XXXXXXXXXXXX_!!230752094.png" alt=" 仿京东-标题用_D" /></a>
    23.                         <a href="#" target="_blank" class="footer-more-trigger most-footer xm-img" style="display:block;float:left;height:200px;width:180px;left:360px;top:200px;border:0;padding:0;margin:0;background-image:url(http://img02.taobaocdn.com/imgextra/i2/230752094/TB2yYwqbFXXXXcNXXXXXXXXXXXX_!!230752094.jpg);transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;"><img src="http://img01.taobaocdn.com/imgextra/i1/230752094/TB2Bb7sbFXXXXb1XXXXXXXXXXXX_!!230752094.png" alt=" 仿京东-标题用_E" />
    24.                         </a>
    25.                         <a href="#" target="_blank" class="footer-more-trigger most-footer xm-img" style="display:block;float:left;height:400px;width:180px;left:540px;top:0;border:0;padding:0;margin:0;background-image:url(http://img01.taobaocdn.com/imgextra/i1/230752094/TB2XWQubFXXXXa8XXXXXXXXXXXX_!!230752094.jpg);transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;"><img src="http://img02.taobaocdn.com/imgextra/i2/230752094/TB2DJI4bFXXXXbtXXXXXXXXXXXX_!!230752094.png" alt=" 仿京东-标题用_F"/>
    26.                         </a>
    27.                         <a href="#" target="_blank" class="footer-more-trigger most-footer xm-img" style="display:block;float:left;height:200px;width:180px;left:720px;top:auto;border:0;padding:0;margin:0;background-image:url(http://img04.taobaocdn.com/imgextra/i4/230752094/TB2JBwybFXXXXXiXXXXXXXXXXXX_!!230752094.jpg);transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;"><img src="http://img02.taobaocdn.com/imgextra/i2/230752094/TB2y9QzbFXXXXXPXXXXXXXXXXXX_!!230752094.png" alt=" 仿京东-标题用_G" />
    28.                         </a>
    29.                         <a href="#" target="_blank" class="footer-more-trigger most-footer xm-img" style="display:block;float:left;height:200px;width:180px;left:720px;top:200px;border:0;padding:0;margin:0;background-image:url(http://img02.taobaocdn.com/imgextra/i2/230752094/TB2D2AAbFXXXXXmXXXXXXXXXXXX_!!230752094.jpg);transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;"><img src="http://img02.taobaocdn.com/imgextra/i2/230752094/TB22_szbFXXXXX4XXXXXXXXXXXX_!!230752094.png" alt=" 仿京东-标题用_H" />
    30.                         </a>
    31.                     </div>
    32.                     <ul class="zsj_content" style="display:none">
    33.                         <li>1</li>
    34.                         <li>2</li>
    35.                         <li>3</li>
    36.                         <li>4</li>
    37.                         <li>5</li>
    38.                         <li>6</li>
    39.                         <li>7</li>
    40.                         <li>8</li>
    41.                         <li>9</li>
    42.                     </ul>
    43.                 </div>
    44.                 <div style="height:400px; width:300px; float:left;position:relative;">
    45.                     <ul class="footer-more-trigger most-footer" style="width:300px; height:150px; background:none; display:block; border:0; padding:0; top:0px; left:0px;">
    46.                         <li class="xm-img" style=" float:left; height:50px; width:150px; border:0; margin:0;transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;">
    47.                             <img src="http://img04.taobaocdn.com/imgextra/i4/230752094/TB22lgJbFXXXXbkXpXXXXXXXXXX_!!230752094.jpg" alt=" 这是"/>
    48.                         </li>
    49.                         <li class="xm-img" style=" float:left; height:50px; width:150px; border:0; margin:0;transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;">
    50.                             <img src="http://img04.taobaocdn.com/imgextra/i4/230752094/TB21LUQbFXXXXXeXpXXXXXXXXXX_!!230752094.jpg" alt=" 一个"/>
    51.                         </li>
    52.                         <li class="xm-img" style=" float:left; height:50px; width:150px; border:0; margin:0;transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;">
    53.                             <img src="http://img02.taobaocdn.com/imgextra/i2/230752094/TB28jwMbFXXXXacXpXXXXXXXXXX_!!230752094.jpg" alt=" 关于"/>
    54.                         </li>
    55.                         <li class="xm-img" style=" float:left; height:50px; width:150px; border:0; margin:0;transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;">
    56.                             <img src="http://img02.taobaocdn.com/imgextra/i2/230752094/TB2MocMbFXXXXXPXpXXXXXXXXXX_!!230752094.jpg" alt=" 逗逼"/>
    57.                         </li>
    58.                         <li class="xm-img" style=" float:left; height:50px; width:150px; border:0; margin:0;transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;">
    59.                             <img src="http://img04.taobaocdn.com/imgextra/i4/230752094/TB2hXZLbFXXXXbhXpXXXXXXXXXX_!!230752094.jpg" alt=" 的"/>
    60.                         </li>
    61.                         <li class="xm-img" style=" float:left; height:50px; width:150px; border:0; margin:0;transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s;-webkit-transition:0.4s;">
    62.                             <img src="http://img01.taobaocdn.com/imgextra/i1/230752094/TB2vUsLbFXXXXaDXpXXXXXXXXXX_!!230752094.jpg" alt=" 故事"/>
    63.                         </li>
    64.                     </ul>
    65.                     <div class="footer-more-trigger most-footer" style="width:300px; height:250px; border:0; padding:0; top:150px; left:0px; background:URL(http://img01.taobaocdn.com/imgextra/i1/230752094/TB2vPZMbFXXXXapXpXXXXXXXXXX_!!230752094.jpg)">
    66.                         <div class="footer-more" style="width:140px; height:50px; float:none;margin:100px auto; padding:0;">
    67.                             <a href="#" target="_blank"><img src="http://img02.taobaocdn.com/imgextra/i2/230752094/TB2hpEVbFXXXXbWXXXXXXXXXXXX_!!230752094.png" alt=" 立即逗逼"/></a>
    68.                             <div class="footer-more-panel" style="width:140px; height:50px; border:0; padding:0; background:none; bottom:auto; right:auto; top:0; left:0;">
    69.                                 <img src="http://img04.taobaocdn.com/imgextra/i4/230752094/TB2kRQUbFXXXXbVXXXXXXXXXXXX_!!230752094.png" alt=" 更多逗逼."/>
    70.                             </div>
    71.                         </div>
    72.                     </div>
    73.                 </div>
    74.             </div>
    75.         </div>
    76.     </div>
    77. </div>
    复制代码
    吾乃逗逼大帝乳酸君,首次发原创贴,欢迎各位大神指点不足之处……












    评分

    参与人数 7美工币 +300 收起 理由
    习惯淡忘 + 20 赞一个!
    刘老菜 + 20 原创!
    麒麟 + 20 据说16楼是大神
    尐菜 + 100
    Rain + 100 赞一个!
    开到荼靡花事了 + 20 就喜欢这样的帖子!
    繁华瞬间 + 20 大神!

    查看全部评分

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


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

  • TA的每日心情
    臭美
    前天 15:06
  • 签到天数: 751 天

    连续签到: 3 天

    [LV.10]功行圆满

    2

    主题

    276

    帖子

    14万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    148668

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

     楼主| 发表于 2015-2-2 09:13:52 | 显示全部楼层
    如有错误,欢迎大神们指正!

    点评

    逗逼  发表于 2015-2-3 13:32
    逗逼  发表于 2015-2-3 10:07

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


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

    回复 支持 1 反对 0

    使用道具 举报

  • TA的每日心情
    委屈
    3 天前
  • 签到天数: 145 天

    连续签到: 1 天

    [LV.7]炉火纯青

    18

    主题

    198

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    29297

    QQ
    发表于 2015-2-2 09:20:43 | 显示全部楼层
    妈蛋,大高手啊,羡慕死俺了
  • TA的每日心情

    2016-4-8 17:27
  • 签到天数: 214 天

    连续签到: 1 天

    [LV.7]炉火纯青

    2

    主题

    460

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    44592

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

    发表于 2015-2-2 09:26:06 | 显示全部楼层
    屌屌屌屌

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


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

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

    连续签到: 1 天

    [LV.3]武林新秀

    43

    主题

    2260

    帖子

    11万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    116895

    活跃会员热心会员

    发表于 2015-2-2 10:11:56 | 显示全部楼层
    这个必须点赞,虽然我不用
  • TA的每日心情
    臭美
    2016-8-31 13:49
  • 签到天数: 274 天

    连续签到: 1 天

    [LV.8]自成一派

    23

    主题

    393

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    32053

    发表于 2015-2-2 10:38:59 | 显示全部楼层
    厉害,厉害呀~
    小煒小站 http://www.lliwenwei.net/ 打打小广告
  • TA的每日心情

    昨天 08:37
  • 签到天数: 257 天

    连续签到: 4 天

    [LV.8]自成一派

    15

    主题

    425

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    28912

    最佳新人热心会员

    QQ
    发表于 2015-2-2 10:45:57 | 显示全部楼层
    一看,就知道是一大神,请接受小弟一拜

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


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

  • TA的每日心情

    2015-3-8 18:38
  • 签到天数: 33 天

    连续签到: 1 天

    [LV.5]略有小成

    11

    主题

    343

    帖子

    7249

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    7249

    发表于 2015-2-2 11:09:23 | 显示全部楼层
    大神,你收徒不
  • TA的每日心情
    抱抱
    2015-10-12 15:08
  • 签到天数: 61 天

    连续签到: 1 天

    [LV.6]渐入佳境

    35

    主题

    399

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    29010

    最佳新人热心会员

    发表于 2015-2-2 20:42:12 | 显示全部楼层
    用是能用 , 但被x宝干掉的几率很大 .... 毕竟调官方的东西.
    装修群:230663261

    kehuda.com

    客户达装修助手免费啦!
  • TA的每日心情
    臭美
    前天 15:06
  • 签到天数: 751 天

    连续签到: 3 天

    [LV.10]功行圆满

    2

    主题

    276

    帖子

    14万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    148668

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

     楼主| 发表于 2015-2-3 09:08:10 | 显示全部楼层
    lvzegangHUbei 发表于 2015-2-2 10:45
    一看,就知道是一大神,请接受小弟一拜

    大神不敢当,我只是一个默默无闻的小逗逼而已

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-9 21:54 , Processed in 0.148401 second(s), 36 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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