淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[装修相关] 【求助】一个很特别的弹出

[复制链接]
  • TA的每日心情
    加油
    2015-11-13 16:25
  • 签到天数: 37 天

    连续签到: 1 天

    [LV.5]略有小成

    9

    主题

    296

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    17060

    最佳新人热心会员

    发表于 2015-3-29 22:21:54 | 显示全部楼层 |阅读模式
    请问这家店铺的弹出是如何做到的,C店能用吗?
    http://laudation.tmall.com/



    001.jpg
    大牛说:视觉营销不仅仅是美工的事,还有更多是市场和运营的事!美工只是实现者。。。
  • TA的每日心情

    昨天 21:03
  • 签到天数: 65 天

    连续签到: 1 天

    [LV.6]渐入佳境

    17

    主题

    309

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    20550

    最佳新人

    发表于 2015-3-29 22:50:53 | 显示全部楼层
    确实很不错    要是有源码了  分享下

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


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

  • TA的每日心情
    大哭
    2015-11-15 15:32
  • 签到天数: 194 天

    连续签到: 1 天

    [LV.7]炉火纯青

    43

    主题

    710

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    61128

    热心会员最佳新人活跃会员

    QQ
    发表于 2015-3-30 08:40:56 | 显示全部楼层
    1. <div class="tb-module tshop-um tshop-um-s1" style="">
    2.   <div class="s1" style="margin-left:0px;height:500px;width:990px;">
    3.     <div class="shop-custom abs" style="height:500px;width:1920px;left:-465px;top:0px;">
    4.       <div class="item" style="height:500px;width:1920px;">
    5.         <div class="zui_area"><img src="http://img03.taobaocdn.com/imgextra/i3/1688338334/TB2jx50cXXXXXbVXXXXXXXXXXXX_!!1688338334.jpg" usemap="#Map_s1_32_1" style="vertical-align:top;"/>
    6.           <map name="Map_s1_32_1">
    7.           </map>
    8.           <a class="J_TWidget zui s1_32_pop_0 htrans-show htrans-mr-1 trans-duration-04s" style="top:0px;left:0px;width:1920px;height:500px;background:url([img]http://img04.taobaocdn.com/imgextra/i4/1688338334/TB2HWKPcXXXXXaTXpXXXXXXXXXX_!!1688338334.png[/img]) no-repeat;"  target="_blank"></a>
    9.                   <a class="J_TWidget zui s1_32_pop_1 htrans-show htrans-mr-1 trans-duration-03s" style="top:0px;left:0px;width:1920px;height:500px;background:url([img]http://img02.taobaocdn.com/imgextra/i2/1688338334/TB2YNO2cXXXXXbaXXXXXXXXXXXX_!!1688338334.png[/img]) no-repeat;"></a>
    10.                   <a class="J_TWidget zui s1_32_pop_2 htrans-show htrans-mr-1 trans-duration-02s" style="top:0px;left:0px;width:1920px;height:500px;background:url([img]http://img03.taobaocdn.com/imgextra/i3/1688338334/TB2h6e5cXXXXXX0XXXXXXXXXXXX_!!1688338334.png[/img]) no-repeat;"></a>
    11.                   <a class="J_TWidget zui s1_32_pop_3 htrans-show htrans-mr-1 trans-duration-01s" style="top:0px;left:0px;width:1920px;height:500px;background:url([img]http://img02.taobaocdn.com/imgextra/i2/1688338334/TB2KFa3cXXXXXbiXXXXXXXXXXXX_!!1688338334.png[/img]) no-repeat;"></a>
    12.                   <a class="J_TWidget zui s1_32_pop_4 trans-duration-04s trans-duration-03s trans-duration-02s trans-duration-01s" style="top:0px;left:-33px;width:1920px;height:500px;background:url([img]http://img01.taobaocdn.com/imgextra/i1/1688338334/TB2owq3cXXXXXaRXXXXXXXXXXXX_!!1688338334.png[/img]) no-repeat;"></a>
    13.                   <a class="J_TWidget zui s1_32_pop_5" style="top:119px;left:350px;width:449px;height:253px;background:url([img]http://img01.taobaocdn.com/imgextra/i1/1688338334/TB2rs1PcXXXXXatXpXXXXXXXXXX_!!1688338334.png[/img]) no-repeat;"></a>
    14.                   </div>
    15.       </div>
    16.     </div>
    17.   </div>
    18. </div>


    19. <style>
    20. {position:relative;overflow:hidden;width:100%;height:100%;}
    21. .tshop-um-s1 .s1{position:relative;}
    22. .tshop-um-s1 .zui_area{position:relative;width:100%;height:100%;}
    23. .tshop-um-s1 .zui{background:url([img]http://img.taobao.com/L1/142/415459036/assets/images/background/t.gif[/img]);position:absolute;text-decoration:none;}
    24. .tshop-um-s1 a img.on{display:block;}
    25. .tshop-um-s1 .abs{position:absolute;}
    26. .tshop-um-s1 a.trans-mr img,.tshop-um-s1 img.trans-mr{margin-left:-100%;-moz-transition:all 1s ease-in;-webkit-transition:all 1s ease-in;-o-transition:all 1s ease-in;transition:all 1s ease-in;}
    27. .tshop-um-s1 a.trans-mr:hover img,{margin-left:0px;}
    28. .tshop-um-s1 .zui_area .zui{-moz-transition:all 1s ease-in;-webkit-transition:all 1s ease-in;-o-transition:all 1s ease-in;transition:all 1s ease-in;}
    29. .tshop-um-s1 .zui_area .htrans-show{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
    30. .tshop-um-s1 .zui_area:hover .htrans-show{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}
    31. .tshop-um-s1 .zui_area .htrans-mr-1{margin-left:100%;}
    32. .tshop-um-s1 .zui_area:hover .htrans-mr-1{margin:0px;}
    33. .tshop-um-s1 .zui_area .trans-duration-04s{transition-duration:0.4s;-moz-transition-duration:0.4s;-webkit-transition-duration:0.4s;-o-transition-duration:0.4s;}
    34. .tshop-um-s1 .zui_area .trans-duration-03s{transition-duration:0.3s;-moz-transition-duration:0.3s;-webkit-transition-duration:0.3s;-o-transition-duration:0.3s;}
    35. .tshop-um-s1 .zui_area .trans-duration-02s{transition-duration:0.2s;-moz-transition-duration:0.2s;-webkit-transition-duration:0.2s;-o-transition-duration:0.2s;}
    36. .tshop-um-s1 .zui_area .trans-duration-01s{transition-duration:0.1s;-moz-transition-duration:0.1s;-webkit-transition-duration:0.1s;-o-transition-duration:0.1s;}
    37. .zui{background:url([img]http://img.taobao.com/L1/142/415459036/assets/images/background/t.gif[/img]);position:absolute;text-decoration:none;}
    38. </style>
    复制代码

  • TA的每日心情
    加油
    2015-11-13 16:25
  • 签到天数: 37 天

    连续签到: 1 天

    [LV.5]略有小成

    9

    主题

    296

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    17060

    最佳新人热心会员

     楼主| 发表于 2015-3-30 11:01:10 | 显示全部楼层

    测试过了,你这个代码不能用的

    大牛说:视觉营销不仅仅是美工的事,还有更多是市场和运营的事!美工只是实现者。。。
  • TA的每日心情
    思考
    2016-11-4 15:28
  • 签到天数: 138 天

    连续签到: 1 天

    [LV.7]炉火纯青

    2

    主题

    39

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    37355

    发表于 2015-3-30 11:08:18 | 显示全部楼层
    这个店铺使用了醉语言的模板,买了它的模板就能用。

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


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

  • TA的每日心情
    大哭
    2015-11-15 15:32
  • 签到天数: 194 天

    连续签到: 1 天

    [LV.7]炉火纯青

    43

    主题

    710

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    61128

    热心会员最佳新人活跃会员

    QQ
    发表于 2015-3-30 11:41:56 | 显示全部楼层
    卟熙設計 发表于 2015-3-30 11:01
    测试过了,你这个代码不能用的

    能不能用,不是让你直接去套,懂得人可以用

  • TA的每日心情
    求抱抱
    2015-11-18 10:20
  • 签到天数: 95 天

    连续签到: 1 天

    [LV.6]渐入佳境

    6

    主题

    461

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    33855

    最佳新人

    QQ
    发表于 2015-3-30 12:44:14 | 显示全部楼层
    一个transition过渡时间加上hover想想写出来头都大,坐等大饼掉下来
    说了你又不听,听又不懂,懂又不做,做又做错,错又不认,认又不改,改又不服,服又不说。你说你这么任性,我拿你肿么办……
  • TA的每日心情
    委屈
    2016-7-12 14:35
  • 签到天数: 57 天

    连续签到: 1 天

    [LV.5]略有小成

    1

    主题

    40

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    14860

    最佳新人

    QQ
    发表于 2015-4-1 23:58:48 | 显示全部楼层
    本帖最后由 贼眉鼠眼 于 2015-4-2 00:01 编辑

    亲测。可用,拿走了,谢谢哈


    ddvvv.jpg

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


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

  • TA的每日心情
    大哭
    2015-11-15 15:32
  • 签到天数: 194 天

    连续签到: 1 天

    [LV.7]炉火纯青

    43

    主题

    710

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    61128

    热心会员最佳新人活跃会员

    QQ
    发表于 2015-4-2 08:11:51 | 显示全部楼层
    本帖最后由 晕菜小包子 于 2015-4-2 08:13 编辑
    贼眉鼠眼 发表于 2015-4-1 23:58
    亲测。可用,拿走了,谢谢哈

    把所有\[img]和\[\img]去掉,还有第二个left:-460px修改一下就可以了,就是一个定位和怎么引用CSS的问题,这个自己去解决



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

    本版积分规则

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

    GMT+8, 2016-12-9 13:52 , Processed in 0.147726 second(s), 22 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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