淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

【渔舟】对于widget控制鼠标经过效果的改进

[复制链接]
  • TA的每日心情
    抱抱
    5 天前
  • 签到天数: 4 天

    连续签到: 1 天

    [LV.2]登堂入室

    62

    主题

    156

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    52083

    QQ
    发表于 2015-7-6 09:48:42 | 显示全部楼层 |阅读模式
    本帖最后由 渔舟 于 2015-7-6 09:49 编辑
    渔舟依然是本着 互助、交流、学习、探讨、分享 的精神,与大家一起交流学习,共同进步。
    分享的代码仅供参考。
    02.jpg       

    01.gif

          这一帖是对 【渔舟】无需CSS权限仿七格格鼠标经过效果代码 的改进。非常感谢@Sasuke 和 @Aising 给出的批评和意见。       其实上一贴主要是给大家提供的一种思路——利用widget来制作类似hover的效果,虽然这种方法对于自定义css的hover来说有点相形见绌,但是对于“从多个角度看问题”来说,还是大有裨益的。
           对于提到的调用多个宝贝的时候,因为widget太多,可能会崩溃的情况,其实大可放心。因为我们可以将多个宝贝放在同一个widget下,也就是说,我们其实只需要一个widget,就可以添加二三十个宝贝甚至更多。我在这里添加了90个宝贝测试,大家可以打开看看电脑是否会卡死。测试地址:http://shop114199070.taobao.com/p/rd795593.htm

          代码如下(有点长,大家分析一两个列表项即可):
    1. <div class="J_TWidget" data-widget-type="Slide" data-widget-config="{'navCls':'yz','activeTriggerCls':'xm-musicplayer','interval':0.01}" style="width:1100px; margin:0 auto; font-family:微软雅黑; font-size:12px; text-align:center; line-height:38px; ">
    2.   <div style="height:3px;"></div>
    3.   <ul class="yz">
    4.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img04.taobaocdn.com/imgextra/i4/2272660937/TB2vIFYbFXXXXXKXpXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    5.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">77的店欧美风快时尚</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    6.     </li>
    7.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img03.taobaocdn.com/imgextra/i3/2272660937/TB2eOh2bFXXXXaNXXXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    8.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">artka官方旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    9.     </li>
    10.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img01.taobaocdn.com/imgextra/i1/2272660937/TB2TQlYbFXXXXXoXpXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    11.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">evaouxiu旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    12.     </li>
    13.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img04.taobaocdn.com/imgextra/i4/2272660937/TB2uR8ZbFXXXXcYXXXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    14.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">fairy官方旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    15.     </li>
    16.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img04.taobaocdn.com/imgextra/i4/2272660937/TB2EE8VbFXXXXazXpXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    17.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">fiarady花丛丽影旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    18.     </li>
    19.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img02.taobaocdn.com/imgextra/i2/2272660937/TB2AulSbFXXXXbBXpXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    20.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">ifbyeva旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    21.     </li>
    22.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img04.taobaocdn.com/imgextra/i4/2272660937/TB2RyJ0bFXXXXcrXXXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    23.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">jorya官方旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    24.     </li>
    25.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img03.taobaocdn.com/imgextra/i3/2272660937/TB2RWt0bFXXXXcxXXXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    26.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">maxmartin玛玛绨旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    27.     </li>
    28.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img04.taobaocdn.com/imgextra/i4/2272660937/TB2n7NUbFXXXXbqXpXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    29.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">oece旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    30.     </li>
    31.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img01.taobaocdn.com/imgextra/i1/2272660937/TB2FNtWbFXXXXaiXpXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    32.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">osa品牌服饰旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    33.     </li>
    34.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img03.taobaocdn.com/imgextra/i3/2272660937/TB24b87bFXXXXXzXXXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    35.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">pass旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    36.     </li>
    37.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img01.taobaocdn.com/imgextra/i1/2272660937/TB2HalVbFXXXXblXpXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    38.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">recluse旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    39.     </li>
    40.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img01.taobaocdn.com/imgextra/i1/2272660937/TB2_it7bFXXXXXoXXXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    41.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">sedate旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    42.     </li>
    43.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img03.taobaocdn.com/imgextra/i3/2272660937/TB2e.l1bFXXXXb6XXXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    44.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">sllsky服饰旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    45.     </li>
    46.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img03.taobaocdn.com/imgextra/i3/2272660937/TB2hGt0bFXXXXcGXXXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    47.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">swise旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    48.     </li>
    49.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img04.taobaocdn.com/imgextra/i4/2272660937/TB2mqxWbFXXXXa1XpXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    50.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">udot右道旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    51.     </li>
    52.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img04.taobaocdn.com/imgextra/i4/2272660937/TB23qR8bFXXXXXnXXXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    53.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">ving旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    54.     </li>
    55.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img04.taobaocdn.com/imgextra/i4/2272660937/TB2zP0WbFXXXXagXpXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    56.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">yerad娅丽达服饰旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    57.     </li>
    58.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img01.taobaocdn.com/imgextra/i1/2272660937/TB2Pt03bFXXXXbHXXXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    59.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">艾蓓怡旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    60.     </li>
    61.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img01.taobaocdn.com/imgextra/i1/2272660937/TB2jFpYbFXXXXalXpXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    62.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">艾莱依官方旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    63.     </li>
    64.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img01.taobaocdn.com/imgextra/i1/2272660937/TB2C6N4bFXXXXbiXXXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    65.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">初语服饰配件旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    66.     </li>
    67.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img02.taobaocdn.com/imgextra/i2/2272660937/TB2KQBWbFXXXXauXpXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    68.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">初语旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    69.     </li>
    70.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img01.taobaocdn.com/imgextra/i1/2272660937/TB2QqNRbFXXXXXXXFXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    71.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">初语自营店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    72.     </li>
    73.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img01.taobaocdn.com/imgextra/i1/2272660937/TB28507bFXXXXXQXXXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    74.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">读你服饰旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    75.     </li>
    76.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img02.taobaocdn.com/imgextra/i2/2272660937/TB2_kXWbFXXXXafXpXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    77.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">朵拉芭娜服饰旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    78.     </li>
    79.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img01.taobaocdn.com/imgextra/i1/2272660937/TB2DEx5bFXXXXaKXXXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    80.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">范奎恩官方旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    81.     </li>
    82.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img03.taobaocdn.com/imgextra/i3/2272660937/TB2L6p6bFXXXXalXXXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    83.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">非鱼服饰旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    84.     </li>
    85.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img03.taobaocdn.com/imgextra/i3/2272660937/TB2NZR7bFXXXXX4XXXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    86.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">韩都衣舍旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    87.     </li>
    88.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img02.taobaocdn.com/imgextra/i2/2272660937/TB2fjt7bFXXXXXMXXXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    89.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">红迪丝旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    90.     </li>
    91.     <li style="width:200px; height:200px; display:block; position:relative; overflow:hidden;border:5px solid #fff; box-shadow:0 0 1px #aaa;left:0; z-index:2; background-image:url(http://img01.taobaocdn.com/imgextra/i1/2272660937/TB2iQ0ZbFXXXXcVXXXXXXXXXXXX_!!2272660937.jpg); float:left; margin:0 10px 20px 0;">
    92.       <div class="xm-bookmark search-menu" style="width:200px; height:238px; border:0; left:0; background:none;transition: all 0.7s;-moz-transition: all 0.7s;-webkit-transition: all 0.7s;-o-transition: all 0.7s;"> <a  target="_blank" style="width:200px; height:38px; margin-top:200px; background:rgba(0,0,0,0.75); display:block;color:#fff; text-decoration:none;"><span style="border-right:1px dotted #fff; padding-right:10px;">红豆居家官方旗舰店</span><span style="color:#FFCC00; padding-left:10px;">查看</span></a> </div>
    93.     </li>
    94.    
    95.   </ul>
    96. </div>
    复制代码


          代码仅供参考学习。 欢迎大家给出宝贝的意见和建议。





    评分

    参与人数 4美工币 +40 收起 理由
    xingshuman + 20 很给力!
    snrtmnmnyk + 1 感谢分享!
    leike + 18 赞一个!
    风卷 + 1 很给力!

    查看全部评分

  • TA的每日心情
    臭美
    2016-8-29 09:18
  • 签到天数: 298 天

    连续签到: 1 天

    [LV.8]自成一派

    29

    主题

    939

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    61033

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

    QQ
    发表于 2015-7-6 09:50:35 | 显示全部楼层
    哈哈  顶 沙发沙发 先顶后看

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


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

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

    连续签到: 1 天

    [LV.3]武林新秀

    43

    主题

    2260

    帖子

    11万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    116895

    活跃会员热心会员

    发表于 2015-7-6 09:50:45 | 显示全部楼层
    前排占广告位 卖瓜子
  • TA的每日心情
    不爽
    2013-8-19 20:42
  • 签到天数: 8 天

    连续签到: 1 天

    [LV.3]武林新秀

    43

    主题

    2260

    帖子

    11万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    116895

    活跃会员热心会员

    发表于 2015-7-6 09:51:30 | 显示全部楼层
    我去   沙发被抢了  太无耻了
  • TA的每日心情
    臭美
    2016-10-28 10:21
  • 签到天数: 145 天

    连续签到: 1 天

    [LV.7]炉火纯青

    22

    主题

    111

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    37940

    天猫美工最佳新人

    发表于 2015-7-6 09:53:01 | 显示全部楼层
    我怎么打开连接看到的效果不和你的一样 直接是弹出 没效果

    点评

    IE9以及以下的浏览器,不支持transition属性。 可使用360浏览器(极速模式)、搜狗浏览器(高速模式)、火狐浏览器、谷歌浏览器、opera浏览器、Safari...  发表于 2015-7-6 10:07

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


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

  • TA的每日心情
    吐舌头
    2014-6-18 20:31
  • 签到天数: 6 天

    连续签到: 1 天

    [LV.2]登堂入室

    6

    主题

    150

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    45169

    最佳新人

    发表于 2015-7-6 09:57:39 | 显示全部楼层
    占个楼,支持下大神
    打了个酱油。。。
  • TA的每日心情
    思考
    2016-9-11 15:54
  • 签到天数: 206 天

    连续签到: 1 天

    [LV.7]炉火纯青

    24

    主题

    1028

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    32979

    淘宝钻级店美工最佳新人热心会员

    QQ
    发表于 2015-7-6 10:15:57 | 显示全部楼层
    占个楼,支持下大神
    即使睁开眼睛也看不见,我的心在黑暗中——林疋火昱
  • TA的每日心情
    抱抱
    2015-9-2 17:42
  • 签到天数: 45 天

    连续签到: 1 天

    [LV.5]略有小成

    24

    主题

    245

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    42841

    发表于 2015-7-6 10:20:37 | 显示全部楼层
    这个必须要有安装音乐才可以实现?

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


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

  • TA的每日心情
    臭美
    2016-10-28 10:21
  • 签到天数: 145 天

    连续签到: 1 天

    [LV.7]炉火纯青

    22

    主题

    111

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    37940

    天猫美工最佳新人

    发表于 2015-7-6 10:30:27 | 显示全部楼层
    sunchenxi 发表于 2015-7-6 09:53
    我怎么打开连接看到的效果不和你的一样 直接是弹出 没效果

    我就是用的谷歌

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


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

  • TA的每日心情
    臭美
    4 小时前
  • 签到天数: 750 天

    连续签到: 2 天

    [LV.10]功行圆满

    2

    主题

    276

    帖子

    14万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    148473

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

    发表于 2015-7-6 10:33:15 | 显示全部楼层
    我之前也用这个方法做了一些效果,不过用的是轮播,没你这个简单方便,还是你这个代码少好点,借鉴了

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-6 13:57 , Processed in 0.165285 second(s), 27 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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