淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 3955|回复: 43
收起左侧

【自家制】仿天猫首页弹出效果

[复制链接]
  • TA的每日心情
    臭美
    2016-8-31 13:49
  • 签到天数: 274 天

    连续签到: 1 天

    [LV.8]自成一派

    23

    主题

    393

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    32053

    发表于 2015-6-25 13:40:09 | 显示全部楼层 |阅读模式
    本帖最后由 我是小小煒 于 2015-6-25 15:44 编辑

    4.jpg
    【仿天猫首页弹出效果】天猫首页年中大促弹出代码;
    感谢【乳酸君】淘宝首页悬浮high翻6月,可点击开关的代码分享
    简略的二次修改;店铺效果:http://babytrendqx.tmall.com/p/rd704240.htm
    1. <!--整体高度-->

    2. <div style="height:522px;">
    3.   <!--样式框架-->
    4.   <div class="sn-simple-logo" style="width: auto; height: auto; border:0; padding:0; top:auto; left:50%;">
    5.     <div class="sn-simple-logo" style="width:1200px; height:522px; border:0; padding:0; top:auto; left:-520px;">
    6.       <!--样式框架代码-->
    7.       <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','easing':'easeBothStrong','contentCls':'zsj_content','navCls':'zsj_nav','prevBtnCls':'zsj_prev','nextBtnCls':'zsj_next','triggerType':'click','activeTriggerCls':'hidden','viewSize':[-1200],'interval':2,'delay':0.1,'duration':1,'autoplay':false}" style=" height:522px; width:1200px;position:relative">
    8.         <!--内容框架-->
    9.         <div class="sn-simple-logo" style="padding:0;border:0;width:1200px;height:520px;top: auto;left:40px; bottom:0;display:block;overflow: hidden;z-index:10">
    10.           <div class="sn-simple-logo" style="padding:0;border:0;width:1200px;height:520px;top:0;left:-1200px;display:block;overflow: visible;">
    11.             <!--内容调用-->
    12.             <ul class="zsj_content" style="height:520px;">
    13.               <!--内容1-->
    14.               <li style="display:block;float:left;height:520px; width:1200px; background:#ec1c44;">
    15.                 <div style="height:520px; width:1200px; float: left;position:relative; overflow:hidden;" data-title="以下为②右侧内容部分">
    16.                   <div style="height:85px; width:100%; float:left; background:url(http://img04.taobaocdn.com/imgextra/i4/2257444741/TB2ZIaRdpXXXXb9XpXXXXXXXXXX_!!2257444741.jpg) no-repeat center;" data-title="横幅内容"></div>
    17.                   <!--内容2-->
    18.                   <ul class="xm-musicplayer" style="height:370px; width:100%; display:block; float:left; padding: 15px 0px 0 10px; border-top:0; z-index:10;" data-title="大导航部分">
    19.                     <li class="xm-img" style="height:410px; width:370px; float:left; padding: 2px 1px; margin-top:0; border:0; background-color:transparent;transition:0.2s; -o-transition:0.2s; -ms-transition:0.2s;-webkit-transition:0.2s;"><img src="http://img.alicdn.com/tps/i2/TB1DlCRIpXXXXXQXFXX2msDNVXX-370-410.jpg" width="370" height="410"></li>
    20.                     <li class="xm-img" style="height:410px; width:370px; float:left; padding: 2px 1px; margin-top:0; border:0; background-color:transparent;transition:0.2s; -o-transition:0.2s; -ms-transition:0.2s;-webkit-transition:0.2s;"><img src="http://img.alicdn.com/tps/i2/TB1DlCRIpXXXXXQXFXX2msDNVXX-370-410.jpg" width="370" height="410"></li>
    21.                     <li class="xm-img" style="height:410px; width:370px; float:left; padding: 2px 1px; margin-top:0; border:0; background-color:transparent;transition:0.2s; -o-transition:0.2s; -ms-transition:0.2s;-webkit-transition:0.2s;"><img src="http://img.alicdn.com/tps/i2/TB1DlCRIpXXXXXQXFXX2msDNVXX-370-410.jpg" width="370" height="410"></li>
    22.                   </ul>
    23.                   <!--内容3-->
    24.                   <div class="zsj_prev sn-simple-logo ui-brand-btn-ex-align-left" style="height:522px; width:85px; left:auto; top:0; right:0;margin:0; border:0; padding:0;background:none; z-index:99" data-title="右侧的按钮区域即上一页"> <span style="height:105px;width:32px;background:url(http://img02.taobaocdn.com/imgextra/i2/2257444741/TB2Tgm4dpXXXXc9XXXXXXXXXXXX_!!2257444741.png) no-repeat;"></span> </div>
    25.                   <!--内容3-->
    26.                 </div>
    27.               </li>
    28.               <!--内容1-->
    29.             </ul>
    30.           </div>
    31.         </div>
    32.         <!--内容框架2-->
    33.         <div class="sn-simple-logo" style="padding:0;border:0;width:85px;height:522px;top: auto;left:0; bottom:0;display:block;overflow: hidden; z-index:99" data-title="以下③左侧开关部分">
    34.           <ul class="zsj_nav" style="height:522px; width:85px;cursor: pointer; background:url(http://img02.taobaocdn.com/imgextra/i2/2257444741/TB2Tgm4dpXXXXc9XXXXXXXXXXXX_!!2257444741.png) no-repeat; position:relative; overflow:hidden;" data-title="背景图片">
    35.             <li class="hidden" style="height:522px; width:85px; float:left;" data-title="静态图片"><img src="http://img02.taobaocdn.com/imgextra/i2/2257444741/TB2Tgm4dpXXXXc9XXXXXXXXXXXX_!!2257444741.png" alt=" 疯狂6月.png"/> </li>
    36.             <li style="height:522px; width:85px; float:left;" data-title="动态图片"><img src="http://img02.taobaocdn.com/imgextra/i2/2257444741/TB2Tgm4dpXXXXc9XXXXXXXXXXXX_!!2257444741.png" alt=" 疯狂6月.gif"/> </li>
    37.           </ul>
    38.         </div>
    39.         <!--内容框架2-->
    40.         <div class="zsj_next" style="height:1px; width:1px; display:none;" data-title="下一页">  </div>
    41.       </div>
    42.       <!--样式框架代码-->
    43.     </div>
    44.   </div>
    45.   <!--样式框架-->
    46. </div>
    47. <!--整体高度-->
    复制代码


    评分

    参与人数 1美工币 +100 收起 理由
    Rain + 100 赞一个!

    查看全部评分

    小煒小站 http://www.lliwenwei.net/ 打打小广告
  • TA的每日心情

    2016-1-17 11:55
  • 签到天数: 98 天

    连续签到: 1 天

    [LV.6]渐入佳境

    2

    主题

    209

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    20084

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

    QQ
    发表于 2015-7-3 11:08:05 | 显示全部楼层
    好厉害的样子
    山本无忧,因雪白头;水本无愁,因风起皱。
  • TA的每日心情
    臭美
    2016-8-31 13:49
  • 签到天数: 274 天

    连续签到: 1 天

    [LV.8]自成一派

    23

    主题

    393

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    32053

     楼主| 发表于 2015-7-1 15:41:44 | 显示全部楼层

    我也是什么都不会的~

    小煒小站 http://www.lliwenwei.net/ 打打小广告
  • TA的每日心情
    加油
    2016-1-28 13:48
  • 签到天数: 61 天

    连续签到: 1 天

    [LV.6]渐入佳境

    7

    主题

    65

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    14075

    最佳新人

    发表于 2015-7-1 14:27:17 | 显示全部楼层
    好牛逼的说

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


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

  • TA的每日心情

    2015-7-22 11:36
  • 签到天数: 5 天

    连续签到: 1 天

    [LV.2]登堂入室

    0

    主题

    19

    帖子

    1402

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    1402

    发表于 2015-7-1 13:50:47 | 显示全部楼层
    不错 谢谢

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


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

  • TA的每日心情
    加油
    2015-6-27 13:52
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初学乍练

    1

    主题

    11

    帖子

    844

    积分

    新手上路

    阅读权限: 10

    Rank: 1

    积分
    844

    发表于 2015-6-27 23:24:08 | 显示全部楼层
    回复啦看代码~

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


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

  • TA的每日心情
    吐舌头
    昨天 17:27
  • 签到天数: 175 天

    连续签到: 1 天

    [LV.7]炉火纯青

    20

    主题

    304

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    24966

    QQ
    发表于 2015-6-26 17:16:00 | 显示全部楼层
    不明觉厉

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


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

  • TA的每日心情

    2016-10-26 14:13
  • 签到天数: 325 天

    连续签到: 1 天

    [LV.8]自成一派

    15

    主题

    816

    帖子

    9万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    93422

    宣传达人

    QQ
    发表于 2015-6-26 16:33:19 | 显示全部楼层
    能悬浮就好了,等下跟公司反映,再把悬浮封严实点

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


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

  • TA的每日心情

    2016-10-26 14:13
  • 签到天数: 325 天

    连续签到: 1 天

    [LV.8]自成一派

    15

    主题

    816

    帖子

    9万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    93422

    宣传达人

    QQ
    发表于 2015-6-26 16:30:57 | 显示全部楼层
    这么叼?什么时候封呢

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


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

  • TA的每日心情

    2016-11-8 16:25
  • 签到天数: 174 天

    连续签到: 1 天

    [LV.7]炉火纯青

    15

    主题

    492

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    29003

    发表于 2015-6-26 10:20:31 | 显示全部楼层
    挺好,挺好
    在错误的道路上停止也是一种进步,加油!
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2016-12-6 00:46 , Processed in 0.147356 second(s), 26 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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