淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 18299|回复: 83
收起左侧

我要发个精品贴 防天猫首页 鼠标经过移动

  [复制链接]
  • TA的每日心情
    臭美
    前天 20:58
  • 签到天数: 162 天

    连续签到: 2 天

    [LV.7]炉火纯青

    17

    主题

    350

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    30998

    最佳新人热心会员宣传达人

    发表于 2015-6-24 21:08:07 | 显示全部楼层 |阅读模式
    本帖最后由 哥喝多也醉 于 2015-6-24 21:15 编辑

    类似于 天猫首页的效果,美而不炫....放在店铺首页会很棒...

    之前峰生水起之林 大神也发过这个效果, 他用的是css , 如今 css破解已不能被广泛使用了,所以给大家来送福利!原帖连接

    此代码不需要css权限, 会代码的自行动手更换图片地址,如有不会,在帖子后发言


    效果图



    45456.gif


    1. <div  style="height:422px;">
    2.     <div class="most-footer footer-more-trigger" style="left:50%;width:996px;height:422px;right:auto;top:auto;padding:0;border:none;left:auto;z-index:1;background-color: transparent; ">
    3.       
    4. <div style=" width:996px; height:422px; background-color:#e5e5e5; overflow:hidden;">
    5. <div style="width:399px; height:422px; float:left; overflow:hidden;"><img src="http://img02.taobaocdn.com/imgextra/i2/892145670/TB2c21ZdpXXXXbYXXXXXXXXXXXX_!!892145670.jpg"/></div>
    6. <div style="width:198px; height:255px; float:left; background-color:#fff; margin-left:1px;overflow:hidden; ">
    7. <a class="tmsg_button_close-app" style=" position:relative; float:left; background-image:url(http://img03.taobaocdn.com/imgextra/i3/892145670/TB2JG9TdpXXXXXiXpXXXXXXXXXX_!!892145670.jpg);width:198px;height:255px; overflow:hidden;  right:auto; left:1px; top:0;  transition:all cubic-bezier(1,2,0.43,1) 0.3s;" href="#"></a>
    8. </div>
    9. <div style="width:198px; height:255px; float:left; background-color:#fff; margin-left:1px;overflow:hidden; "><a class="tmsg_button_close-app" style=" position:relative; float:left; background-image:url(http://img03.taobaocdn.com/imgextra/i3/892145670/TB2JG9TdpXXXXXiXpXXXXXXXXXX_!!892145670.jpg);background-repeat:no-repeat;width:198px;height:255px; overflow:hidden;  right:auto; left:1px; top:0;  transition:all cubic-bezier(1,2,0.43,1) 0.3s;" href="#"></a></div>

    10. <div style="width:198px; height:255px; float:left; background-color:#fff; margin-left:1px;overflow:hidden; "><a class="tmsg_button_close-app" style=" position:relative; float:left; background-image:url(http://img03.taobaocdn.com/imgextra/i3/892145670/TB2JG9TdpXXXXXiXpXXXXXXXXXX_!!892145670.jpg);background-repeat:no-repeat;width:198px;height:255px; overflow:hidden;  right:auto; left:1px; top:0;  transition:all cubic-bezier(1,2,0.43,1) 0.3s;"href="#"></a></div>

    11. <div style="width:198px; height:255px; float:left; background-color:#fff; margin-left:1px; margin-top:1px;overflow:hidden;  "><a class="tmsg_button_close-app" style=" position:relative; float:left; background-image:url(http://img03.taobaocdn.com/imgextra/i3/892145670/TB2JG9TdpXXXXXiXpXXXXXXXXXX_!!892145670.jpg);background-repeat:no-repeat;width:198px;height:255px; overflow:hidden;  right:auto; left:1px; top:0;  transition:all cubic-bezier(1,2,0.43,1) 0.3s;"href="#"></a></div>
    12. <div style="width:198px; height:255px; float:left; background-color:#fff; margin-left:1px; margin-top:1px;overflow:hidden;  "><a class="tmsg_button_close-app" style=" position:relative; float:left; background-image:url(http://img03.taobaocdn.com/imgextra/i3/892145670/TB2JG9TdpXXXXXiXpXXXXXXXXXX_!!892145670.jpg);background-repeat:no-repeat;width:198px;height:255px; overflow:hidden;  right:auto; left:1px; top:0;  transition:all cubic-bezier(1,2,0.43,1) 0.3s;"href="#"></a></div>
    13. <div style="width:198px; height:255px; float:left; background-color:#fff; margin-left:1px; margin-top:1px;overflow:hidden;  "><a class="tmsg_button_close-app" style=" position:relative; float:left; background-image:url(http://img03.taobaocdn.com/imgextra/i3/892145670/TB2JG9TdpXXXXXiXpXXXXXXXXXX_!!892145670.jpg);background-repeat:no-repeat;width:198px;height:255px; overflow:hidden;  right:auto; left:1px; top:0;  transition:all cubic-bezier(1,2,0.43,1) 0.3s;"href="#"></a></div>
    14. </div>
    15. </div>
    16.     </div>
    17. </div>
    复制代码



    附加说明: 图片请遵循尺寸大小, 避免出现挪位,  居中问题 请自行调整边距;

    .tmsg_button_close-app {
        background-position: 0 -57px;
        height: 15px;
        position: absolute;
        right: 15px;
        top: 15px;
        width: 15px;
    }
    .tmsg_button_close-app:hover {
        background-position: -16px -57px;
    }
    由于属性   background-position: 0 -57px; 背景图像向上偏移了57px;  所以在图像顶部增加57px的空白,确保图片显示正常...

    属于调用官方样式, 效果有限,唯一好处是: 一般不容易失效



    评分

    参与人数 10美工币 +333 收起 理由
    请叫我金豆 + 2 很给力!
    snrtmnmnyk + 1 赞一个!
    花步 + 20 很给力!
    wymacs + 20
    小鬼玩时尚 + 20 很给力!
    Rain + 100 赞一个!
    龍的傳人 + 20 赞一个!
    leike + 30 赞一个!
    峰生水起之林 + 100 赞一个!少少给一百大洋
    风一样的男子丿 + 20 很给力!

    查看全部评分

    本帖被以下淘专辑推荐:

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


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

  • TA的每日心情
    臭美
    前天 20:58
  • 签到天数: 162 天

    连续签到: 2 天

    [LV.7]炉火纯青

    17

    主题

    350

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    30998

    最佳新人热心会员宣传达人

     楼主| 发表于 2015-6-24 21:10:13 | 显示全部楼层
    能成为精品帖不?

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


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

    回复 支持 1 反对 0

    使用道具 举报

  • TA的每日心情
    抱抱
    2016-10-24 13:16
  • 签到天数: 795 天

    连续签到: 1 天

    [LV.10]功行圆满

    69

    主题

    1567

    帖子

    12万

    积分

    高级会员

    阅读权限: 50

    我是没压力、    我喂自己袋盐!

    Rank: 8Rank: 8

    积分
    121027

    最佳新人天猫美工热心会员宣传达人淘宝钻级店美工淘宝皇冠店美工推广达人淘宝金冠店美工活跃会员优秀版主

    QQ
    发表于 2015-6-24 21:10:38 | 显示全部楼层
    谢谢楼主的分享!这个绝对要顶!!!
  • TA的每日心情
    臭美
    前天 20:58
  • 签到天数: 162 天

    连续签到: 2 天

    [LV.7]炉火纯青

    17

    主题

    350

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    30998

    最佳新人热心会员宣传达人

     楼主| 发表于 2015-6-24 21:12:31 | 显示全部楼层
    魅亚力 发表于 2015-6-24 21:10
    谢谢楼主的分享!这个绝对要顶!!!

    欢迎 魅亚力 版主

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


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

  • TA的每日心情
    抱抱
    2016-11-11 17:26
  • 签到天数: 658 天

    连续签到: 2 天

    [LV.9]已臻大成

    5

    主题

    245

    帖子

    11万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    115211

    最佳新人热心会员

    发表于 2015-6-24 21:51:38 | 显示全部楼层
    顶起来,应该可以
    红旗村 http://www.mvjin.taobao.com
  • TA的每日心情
    抱抱
    2016-10-11 10:55
  • 签到天数: 435 天

    连续签到: 1 天

    [LV.9]已臻大成

    11

    主题

    1299

    帖子

    9万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    90856

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

    发表于 2015-6-24 22:46:51 | 显示全部楼层
    先占个位置

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


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

  • TA的每日心情
    加油
    2016-10-17 16:29
  • 签到天数: 327 天

    连续签到: 1 天

    [LV.8]自成一派

    6

    主题

    370

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    63610

    最佳新人热心会员

    发表于 2015-6-24 23:13:10 | 显示全部楼层
    代码小白来学习

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


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

  • TA的每日心情
    大哭
    2016-8-29 09:43
  • 签到天数: 352 天

    连续签到: 1 天

    [LV.8]自成一派

    7

    主题

    300

    帖子

    7万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    72061

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

    QQ
    发表于 2015-6-25 07:46:22 | 显示全部楼层
    小白收藏学习了
    人生的道路需要不断学习与进取!
  • TA的每日心情
    吐舌头
    2016-7-13 09:16
  • 签到天数: 49 天

    连续签到: 1 天

    [LV.5]略有小成

    10

    主题

    69

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    12843

    QQ
    发表于 2015-6-25 07:54:13 | 显示全部楼层
    顶到怀孕为止

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


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

  • TA的每日心情
    臭美
    2016-11-17 13:26
  • 签到天数: 614 天

    连续签到: 1 天

    [LV.9]已臻大成

    15

    主题

    2199

    帖子

    14万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    147935

    淘宝钻级店美工天猫美工淘宝皇冠店美工最佳新人热心会员宣传达人活跃会员优秀版主

    发表于 2015-6-25 08:39:35 | 显示全部楼层
    谢谢楼主的分享!这个绝对要顶!!!
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2016-12-4 22:24 , Processed in 0.129031 second(s), 34 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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