淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 5040|回复: 34
收起左侧

仿小米手机官网鼠标滑过效果

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

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

    连续签到: 2 天

    [LV.6]渐入佳境

    16

    主题

    336

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43960

    发表于 2015-8-21 19:44:59 | 显示全部楼层 |阅读模式
    本帖最后由 凌剑君 于 2015-8-21 22:32 编辑

    前几天看到小米手机官方的产品滑过效果挺好的,就花了点时间模仿下来了,先看效果:
    仿小米.gif
    主要的是要做弹出的橙色部分,做的时间是竖着的,写上一些文字,保存的时候要保存横着的,就是这样的(黑色区域是透明的)
    bg.png
    我已经尽量说清楚了,大家可以自己研究下代码
    1. <div style="height:320px;">
    2.     <div class="footer-more-trigger" style="border:0px;left:auto;padding:0px;top:auto;">
    3.         <div class="footer-more-trigger" style="border:0px;padding:0px;top:0px;width:1920px;left:-485px;height:340px;background:#F5F5F5;">
    4. <div style="height:340px;width:996px;overflow:hidden;background: #f5f5f5;">
    5. <!-- 包裹 -->
    6. <div class="footer-more-trigger" style="width:996px;height:10px;border:none;left:0px;top:20px;padding:0px;left:462px;">
    7. <!-- 产品列表 -->
    8. <div class="footer-more-trigger" style="width:996px;height:300px;border:none;left:0px;padding:0px;font-family:微软雅黑;top:0px;">
    9.        <!--产品01-->
    10.        <div  style="width:234px;height:300px;display:block;float:left;margin-right:20px;padding:0px;text-align:center;background: #fff;">
    11.        <div style="width:64px;height:20px;margin-left:85px;line-height:20px;text-align:center;font-size: 12px;color:#fff;background:#e53935;">热卖中</div>
    12.        <img src="https://img.alicdn.com/imgextra/i3/2528527229/TB2ZQ_ycVXXXXaoXXXXXXXXXXXX_!!2528527229.jpg" alt="金属卡片" width="180" height="180" />
    13.        <div style="width:234px;height:25px;line-height:25px;color:#333;font-size:14px;">金属拉丝卡片U盘</div>
    14.        <div style="width:234px;height:25px;line-height:25px;color:#ff6700;font-size:14px;">8GB</div>
    15.        <div style="width:234px;height:50px;line-height:30px;color:#b0b0b0;font-size:14px;">可激光、彩印、丝印logo</div>
    16.        </div>
    17.        <!--产品02-->
    18.        <div  style="width:234px;height:300px;display:block;float:left;margin-right:20px;padding:0px;text-align:center;background: #fff;">
    19.        <div style="width:64px;height:20px;margin-left:85px;line-height:20px;text-align:center;font-size: 12px;color:#fff;background:#e53935;">热卖中</div>
    20.        <img src="https://img.alicdn.com/imgextra/i4/2528527229/TB2PXjDcVXXXXXGXXXXXXXXXXXX_!!2528527229.jpg" alt="迷你U盘" width="180" height="180" />
    21.        <div style="width:234px;height:25px;line-height:25px;color:#333;font-size:14px;">迷你旋转商务U盘</div>
    22.        <div style="width:234px;height:24px;line-height:25px;color:#ff6700;font-size:14px;">8GB</div>
    23.        <div style="width:234px;height:50px;line-height:30px;color:#b0b0b0;font-size:14px;;">可激光、丝印</div>
    24.        </div>
    25.        <!--产品03-->
    26.        <div  style="width:234px;height:300px;display:block;float:left;margin-right:20px;padding:0px;text-align:center;background: #fff;">
    27.        <div style="width:64px;height:20px;margin-left:85px;line-height:20px;text-align:center;font-size: 12px;color:#fff;background:#e53935;">热卖中</div>
    28.        <img src="https://img.alicdn.com/imgextra/i1/2528527229/TB2oxTDcVXXXXXqXXXXXXXXXXXX_!!2528527229.jpg" alt="塑料卡片" width="180" height="180" />
    29.        <div style="width:234px;height:25px;line-height:25px;color:#333;font-size:14px;">超薄名片式U盘</div>
    30.        <div style="width:234px;height:25px;line-height:25px;color:#ff6700;font-size:14px;">8GB</div>
    31.        <div style="width:234px;height:50px;line-height:30px;color:#b0b0b0;font-size:14px;">可彩印、丝印</div>
    32.        </div>
    33.        <!--产品04-->
    34.        <div  style="width:234px;height:300px;display:block;float:left;margin-right:0px;padding:0px;text-align:center;background: #fff;">
    35.        <div style="width:64px;height:20px;margin-left:85px;line-height:20px;text-align:center;font-size: 12px;color:#fff;background:#83c44e;">新品</div>
    36.        <img src="https://img.alicdn.com/imgextra/i2/2528527229/TB2UPVTdVXXXXalXXXXXXXXXXXX_!!2528527229.jpg" alt="水晶U盘" width="180" height="180" />
    37.        <div style="width:234px;height:25px;line-height:25px;color:#333;font-size:14px;">创意发光水晶U盘</div>
    38.        <div style="width:234px;height:25px;line-height:25px;color:#ff6700;font-size:14px;">8GB</div>
    39.        <div style="width:234px;height:50px;line-height:30px;color:#b0b0b0;font-size:14px;">可激光、丝印</div>
    40.        </div>
    41. </div>
    42. <!--动感切换开始-->
    43. <div class="footer-more" style="width:996px;height:300px;padding:0px;margin:0px;position:relative;right:0px;bottom:0px;border:none;background:none;overflow:hidden;">
    44.      <div class="J_TWidget footer-more-panel" data-widget-type="Carousel" data-widget-config="{'activeTriggerCls':'item-text','easing':'easeBoth','effect':'scrollx','navCls':'ling-nav','contentCls':'ling-cnt','activeIndex':4,'autoplay':false}" style="position:relative;border:none;bottom:0px;right:0px;padding:0px;background:none;">
    45.              <ul class="ling-cnt" style="display:none;"><li></li></ul>
    46.              <div class="ling-nav search-wrap-cloud" style="width:999999px;height:300px;"><!-- width得足够大 -->
    47.                  <a  target="_blank" style="width:300px;height:234px;display:block;float:left;position:relative;right:33px;top:33px;padding:0px;background-image:url(https://img.alicdn.com/imgextra/i3/2528527229/TB2GxmCeFXXXXaNXpXXXXXXXXXX_!!2528527229.png);transition:all 0.6s;transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);">
    48.                  </a>
    49.                  <a  target="_blank" style="width:300px;height:234px;display:block;float:left;position:relative;right:82px;top:33px;padding:0px;background-image:url(https://img.alicdn.com/imgextra/i3/2528527229/TB2LG9JeFXXXXc_XXXXXXXXXXXX_!!2528527229.png);transition:all 0.6s;transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);">
    50.                  </a>
    51.                  <a  target="_blank" style="width:300px;height:234px;display:block;float:left;position:relative;right:131px;top:33px;padding:0px;background-image:url(https://img.alicdn.com/imgextra/i4/2528527229/TB2xLmAeFXXXXaPXpXXXXXXXXXX_!!2528527229.png);transition:all 0.6s;transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);">
    52.                  </a>
    53.                  <a  target="_blank" style="width:300px;height:234px;display:block;float:left;position:relative;right:180px;top:33px;padding:0px;background-image:url(https://img.alicdn.com/imgextra/i4/2528527229/TB2E_aReFXXXXbtXXXXXXXXXXXX_!!2528527229.png);transition:all 0.6s;transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);">
    54.                  </a>
    55.             </div>
    56.      </div>
    57. </div>
    58. <!-- 效果end -->
    59. </div>
    60. </div>
    61.          </div>
    62.      </div>
    63. </div>
    复制代码




    评分

    参与人数 3美工币 +120 收起 理由
    冰点契约 + 20 乐于助人!
    峰生水起之林 + 80 赞一个!
    熙XI熙 + 20 乐于助人!

    查看全部评分

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


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

  • TA的每日心情

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

    连续签到: 2 天

    [LV.6]渐入佳境

    16

    主题

    336

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43960

     楼主| 发表于 2015-8-21 19:46:42 | 显示全部楼层
    本帖最后由 凌剑君 于 2015-8-26 09:36 编辑


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


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

  • TA的每日心情
    抱抱
    2015-8-28 09:03
  • 签到天数: 75 天

    连续签到: 2 天

    [LV.6]渐入佳境

    4

    主题

    236

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    16452

    发表于 2015-8-21 20:22:17 | 显示全部楼层
    棒棒的         
    哈哈哈哈哈
  • TA的每日心情
    不爽
    2013-8-19 20:42
  • 签到天数: 8 天

    连续签到: 1 天

    [LV.3]武林新秀

    43

    主题

    2260

    帖子

    11万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    116895

    活跃会员热心会员

    发表于 2015-8-21 21:39:05 | 显示全部楼层
    为毛我用淘宝浏览器看,只是一闪,而且字很模糊
  • TA的每日心情

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

    连续签到: 2 天

    [LV.6]渐入佳境

    16

    主题

    336

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43960

     楼主| 发表于 2015-8-21 21:40:54 | 显示全部楼层
    caspy 发表于 2015-8-21 21:39
    为毛我用淘宝浏览器看,只是一闪,而且字很模糊

    那就不知道了,用的轮播,一般来说没什么问题

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


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

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

    连续签到: 1 天

    [LV.3]武林新秀

    43

    主题

    2260

    帖子

    11万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    116895

    活跃会员热心会员

    发表于 2015-8-21 21:42:05 | 显示全部楼层
    那个,为何你的店铺可以这么屌
  • TA的每日心情

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

    连续签到: 2 天

    [LV.6]渐入佳境

    16

    主题

    336

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43960

     楼主| 发表于 2015-8-21 21:45:53 | 显示全部楼层
    caspy 发表于 2015-8-21 21:42
    那个,为何你的店铺可以这么屌

    试验品,还没仔细弄下

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


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

  • TA的每日心情

    2016-3-12 08:40
  • 签到天数: 85 天

    连续签到: 1 天

    [LV.6]渐入佳境

    4

    主题

    141

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    20818

    最佳新人热心会员

    发表于 2015-8-21 22:03:56 | 显示全部楼层
    这个好这个好
    我是快乐的小田田
  • TA的每日心情
    抱抱
    2016-11-16 17:20
  • 签到天数: 281 天

    连续签到: 1 天

    [LV.8]自成一派

    32

    主题

    2817

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    45073

    最佳新人热心会员

    QQ
    发表于 2015-8-22 08:11:12 | 显示全部楼层
    楼主勤奋好学,就这点把我们都给比下去了,已经收藏了!谢了啊!
    最好的我遇见最美的你,可是我们却隔了一整个青春!http://shop111472591.taobao.com
  • TA的每日心情

    2016-11-16 14:23
  • 签到天数: 438 天

    连续签到: 1 天

    [LV.9]已臻大成

    28

    主题

    2010

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    15421

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

    发表于 2015-8-22 08:30:07 | 显示全部楼层

    然而我只是微微一笑,其实我早已看穿一切

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-3 23:44 , Processed in 0.133817 second(s), 26 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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