淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 309|回复: 2
收起左侧

[美工相关] 请大神帮忙改下代码

[复制链接]
  • TA的每日心情
    大哭
    2016-9-1 16:11
  • 签到天数: 6 天

    连续签到: 1 天

    [LV.2]登堂入室

    10

    主题

    43

    帖子

    8288

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    8288

    发表于 2016-6-24 14:21:06 | 显示全部楼层 |阅读模式
    现在代码的效果是鼠标移入模块,所有产品上都会加一层遮罩层,鼠标移入产品后遮罩层消失,其他依旧遮罩,也就是开关灯特效,我想把他改成鼠标移入弹出第二张图片,不要遮罩层了
    1.   <div class="footer-more" style="padding:0; height:1522px; width:950; position:relative;">
    2.     <div style="width:950px;">
    3.       <ul style="width:105%; height:1522px;">
    4.                 <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    5.           <a target="_blank" href="" style="display:block; width:310px; height:373px; background:url(https://img.alicdn.com/imgextra/i4/655889990/TB24CBErVXXXXcqXpXXXXXXXXXX_!!655889990.jpg) no-repeat scroll center center;">
    6.           </a>
    7.         </li>
    8.                 <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    9.           <a target="_blank" href="" style="display:block; width:310px; height:373px; background:url(https://img.alicdn.com/imgextra/i4/655889990/TB21nN0rVXXXXXyXpXXXXXXXXXX_!!655889990.jpg) no-repeat scroll center center;">
    10.           </a>
    11.         </li>
    12.                 <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    13.           <a target="_blank" href="" style="display:block; width:310px; height:373px; background:url(https://img.alicdn.com/imgextra/i1/655889990/TB2aIVPrVXXXXbrXpXXXXXXXXXX_!!655889990.jpg) no-repeat scroll center center;">
    14.           </a>
    15.         </li>
    16.                 <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    17.           <a target="_blank" href="" style="display:block; width:310px; height:373px; background:url(https://img.alicdn.com/imgextra/i2/655889990/TB2ZvOXrVXXXXbrXXXXXXXXXXXX_!!655889990.jpg) no-repeat scroll center center;">
    18.           </a>
    19.         </li>
    20.                 <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    21.           <a target="_blank" href="" style="display:block; width:310px; height:373px; background:url(https://img.alicdn.com/imgextra/i4/655889990/TB2zPtCrVXXXXcJXpXXXXXXXXXX_!!655889990.jpg) no-repeat scroll center center;">
    22.           </a>
    23.         </li>
    24.                 <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    25.           <a target="_blank" href="" style="display:block; width:310px; height:373px; background:url(https://img.alicdn.com/imgextra/i1/655889990/TB21ldZrVXXXXXvXpXXXXXXXXXX_!!655889990.jpg) no-repeat scroll center center;">
    26.           </a>
    27.         </li>
    28.                         <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    29.           <a target="_blank" href="" style="display:block; width:310px; height:373px; background:url(https://img.alicdn.com/imgextra/i3/655889990/TB24eXFrVXXXXcsXpXXXXXXXXXX_!!655889990.jpg) no-repeat scroll center center;">
    30.           </a>
    31.         </li>
    32.                         <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    33.           <a target="_blank" href="" style="display:block; width:310px; height:373px; background:url(https://img.alicdn.com/imgextra/i1/655889990/TB2wThTrVXXXXaOXpXXXXXXXXXX_!!655889990.jpg) no-repeat scroll center center;">
    34.           </a>
    35.         </li>
    36.                         <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    37.           <a target="_blank" href="" style="display:block; width:310px; height:373px; background:url(https://img.alicdn.com/imgextra/i2/655889990/TB2e_FVrVXXXXasXpXXXXXXXXXX_!!655889990.jpg) no-repeat scroll center center;">
    38.           </a>
    39.         </li>
    40.                         <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    41.           <a target="_blank" href="" style="display:block; width:310px; height:373px; background:url(https://img.alicdn.com/imgextra/i2/655889990/TB2YA8WrVXXXXX8XpXXXXXXXXXX_!!655889990.jpg) no-repeat scroll center center;">
    42.           </a>
    43.         </li>
    44.                         <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    45.           <a target="_blank" href="" style="display:block; width:310px; height:373px; background:url(https://img.alicdn.com/imgextra/i3/655889990/TB2EJRurVXXXXXGXFXXXXXXXXXX_!!655889990.jpg) no-repeat scroll center center;">
    46.           </a>
    47.         </li>
    48.                         <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    49.           <a target="_blank" href="" style="display:block; width:310px; height:373px; background:url(https://img.alicdn.com/imgextra/i2/655889990/TB2ad0SrVXXXXa2XpXXXXXXXXXX_!!655889990.jpg) no-repeat scroll center center;">
    50.           </a>
    51.         </li>
    52.          
    53.       </ul>
    54.     </div>
    55.     <div class="footer-more-panel" style=" width:auto; line-height:inherit; padding:0; background:none; border:0; position:absolute; top:0; right:auto; bottom:auto; left:0;">
    56.       <div style="width:950px;">
    57.         <ul style="width:105%; height:1522px;">
    58.                     <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    59.             <a class="ma_M1" target="_blank" href="" style="display:block; width:310px; height:373px; background-color:#303030; display:block; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.4;">
    60.             </a>
    61.             <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    62.               'trigger':'.ma_M1',
    63.               'align':{
    64.                   'node':'.ma_M1',
    65.                   'offset':[0,0],
    66.                   'points':['cc','cc']
    67.                   }
    68.               }">
    69.               <div class="tcx" style="z-index:999; height:373px; width:310px; background:1;filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;">
    70.                 <a target="_blank" ><img src="https://img.alicdn.com/imgextra/i4/655889990/TB24CBErVXXXXcqXpXXXXXXXXXX_!!655889990.jpg"/></a>
    71.               </div>
    72.             </div>
    73.           </li>
    74.                     <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    75.             <a class="ma_M2" target="_blank" href="" style="display:block; width:310px; height:373px; background-color:#303030; display:block; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.4;">
    76.             </a>
    77.             <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    78.               'trigger':'.ma_M2',
    79.               'align':{
    80.                   'node':'.ma_M2',
    81.                   'offset':[0,0],
    82.                   'points':['cc','cc']
    83.                   }
    84.               }">
    85.               <div class="tcx" style="z-index:999; height:373px; width:310px; background:2;filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;">
    86.                 <a target="_blank" ><img src="https://img.alicdn.com/imgextra/i4/655889990/TB21nN0rVXXXXXyXpXXXXXXXXXX_!!655889990.jpg"/></a>
    87.               </div>
    88.             </div>
    89.           </li>
    90.                     <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    91.             <a class="ma_M3" target="_blank" href="" style="display:block; width:310px; height:373px; background-color:#303030; display:block; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.4;">
    92.             </a>
    93.             <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    94.               'trigger':'.ma_M3',
    95.               'align':{
    96.                   'node':'.ma_M3',
    97.                   'offset':[0,0],
    98.                   'points':['cc','cc']
    99.                   }
    100.               }">
    101.               <div class="tcx" style="z-index:999; height:373px; width:310px; background:3;filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;">
    102.                 <a target="_blank" ><img src="https://img.alicdn.com/imgextra/i1/655889990/TB2aIVPrVXXXXbrXpXXXXXXXXXX_!!655889990.jpg"/></a>
    103.               </div>
    104.             </div>
    105.           </li>
    106.                     <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    107.             <a class="ma_M4" target="_blank" href="" style="display:block; width:310px; height:373px; background-color:#303030; display:block; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.4;">
    108.             </a>
    109.             <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    110.               'trigger':'.ma_M4',
    111.               'align':{
    112.                   'node':'.ma_M4',
    113.                   'offset':[0,0],
    114.                   'points':['cc','cc']
    115.                   }
    116.               }">
    117.               <div class="tcx" style="z-index:999; height:373px; width:310px; background:4;filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;">
    118.                 <a target="_blank" ><img src="https://img.alicdn.com/imgextra/i2/655889990/TB2ZvOXrVXXXXbrXXXXXXXXXXXX_!!655889990.jpg"/></a>
    119.               </div>
    120.             </div>
    121.           </li>
    122.                     <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    123.             <a class="ma_M5" target="_blank" href="" style="display:block; width:310px; height:373px; background-color:#303030; display:block; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.4;">
    124.             </a>
    125.             <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    126.               'trigger':'.ma_M5',
    127.               'align':{
    128.                   'node':'.ma_M5',
    129.                   'offset':[0,0],
    130.                   'points':['cc','cc']
    131.                   }
    132.               }">
    133.               <div class="tcx" style="z-index:999; height:373px; width:310px; background:5;filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;">
    134.                 <a target="_blank" ><img src="https://img.alicdn.com/imgextra/i4/655889990/TB2zPtCrVXXXXcJXpXXXXXXXXXX_!!655889990.jpg"/></a>
    135.               </div>
    136.             </div>
    137.           </li>
    138.                     <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    139.             <a class="ma_M6" target="_blank" href="" style="display:block; width:310px; height:373px; background-color:#303030; display:block; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.4;">
    140.             </a>
    141.             <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    142.               'trigger':'.ma_M6',
    143.               'align':{
    144.                   'node':'.ma_M6',
    145.                   'offset':[0,0],
    146.                   'points':['cc','cc']
    147.                   }
    148.               }">
    149.               <div class="tcx" style="z-index:999; height:373px; width:310px; background:6;filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;">
    150.                 <a target="_blank" ><img src="https://img.alicdn.com/imgextra/i1/655889990/TB21ldZrVXXXXXvXpXXXXXXXXXX_!!655889990.jpg"/></a>
    151.               </div>
    152.             </div>
    153.           </li>
    154.                               <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    155.             <a class="ma_M7" target="_blank" href="" style="display:block; width:310px; height:373px; background-color:#303030; display:block; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.4;">
    156.             </a>
    157.             <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    158.               'trigger':'.ma_M7',
    159.               'align':{
    160.                   'node':'.ma_M7',
    161.                   'offset':[0,0],
    162.                   'points':['cc','cc']
    163.                   }
    164.               }">
    165.               <div class="tcx" style="z-index:999; height:373px; width:310px; background:6;filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;">
    166.                 <a target="_blank" ><img src="https://img.alicdn.com/imgextra/i3/655889990/TB24eXFrVXXXXcsXpXXXXXXXXXX_!!655889990.jpg"/></a>
    167.               </div>
    168.             </div>
    169.           </li>
    170.                              <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    171.             <a class="ma_M8" target="_blank" href="" style="display:block; width:310px; height:373px; background-color:#303030; display:block; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.4;">
    172.             </a>
    173.             <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    174.               'trigger':'.ma_M8',
    175.               'align':{
    176.                   'node':'.ma_M8',
    177.                   'offset':[0,0],
    178.                   'points':['cc','cc']
    179.                   }
    180.               }">
    181.               <div class="tcx" style="z-index:999; height:373px; width:310px; background:6;filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;">
    182.                 <a target="_blank" ><img src="https://img.alicdn.com/imgextra/i1/655889990/TB2wThTrVXXXXaOXpXXXXXXXXXX_!!655889990.jpg"/></a>
    183.               </div>
    184.             </div>
    185.           </li>
    186.                             <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    187.             <a class="ma_M9" target="_blank" href="" style="display:block; width:310px; height:373px; background-color:#303030; display:block; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.4;">
    188.             </a>
    189.             <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    190.               'trigger':'.ma_M9',
    191.               'align':{
    192.                   'node':'.ma_M9',
    193.                   'offset':[0,0],
    194.                   'points':['cc','cc']
    195.                   }
    196.               }">
    197.               <div class="tcx" style="z-index:999; height:373px; width:310px; background:6;filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;">
    198.                 <a target="_blank" ><img src="https://img.alicdn.com/imgextra/i2/655889990/TB2e_FVrVXXXXasXpXXXXXXXXXX_!!655889990.jpg"/></a>
    199.               </div>
    200.             </div>
    201.           </li>
    202.                             <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    203.             <a class="ma_M10" target="_blank" href="" style="display:block; width:310px; height:373px; background-color:#303030; display:block; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.4;">
    204.             </a>
    205.             <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    206.               'trigger':'.ma_M10',
    207.               'align':{
    208.                   'node':'.ma_M10',
    209.                   'offset':[0,0],
    210.                   'points':['cc','cc']
    211.                   }
    212.               }">
    213.               <div class="tcx" style="z-index:999; height:373px; width:310px; background:6;filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;">
    214.                 <a target="_blank" ><img src="https://img.alicdn.com/imgextra/i2/655889990/TB2YA8WrVXXXXX8XpXXXXXXXXXX_!!655889990.jpg"/></a>
    215.               </div>
    216.             </div>
    217.           </li>
    218.                            <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    219.             <a class="ma_M11" target="_blank" href="" style="display:block; width:310px; height:373px; background-color:#303030; display:block; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.4;">
    220.             </a>
    221.             <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    222.               'trigger':'.ma_M11',
    223.               'align':{
    224.                   'node':'.ma_M11',
    225.                   'offset':[0,0],
    226.                   'points':['cc','cc']
    227.                   }
    228.               }">
    229.               <div class="tcx" style="z-index:999; height:373px; width:310px; background:6;filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;">
    230.                 <a target="_blank" ><img src="https://img.alicdn.com/imgextra/i3/655889990/TB2EJRurVXXXXXGXFXXXXXXXXXX_!!655889990.jpg"/></a>
    231.               </div>
    232.             </div>
    233.           </li>
    234.                            <li style="width:310px; height:373px;float:left;margin-right:10px; margin-bottom:10px;">
    235.             <a class="ma_M12" target="_blank" href="" style="display:block; width:310px; height:373px; background-color:#303030; display:block; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.4;">
    236.             </a>
    237.             <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    238.               'trigger':'.ma_M12',
    239.               'align':{
    240.                   'node':'.ma_M12',
    241.                   'offset':[0,0],
    242.                   'points':['cc','cc']
    243.                   }
    244.               }">
    245.               <div class="tcx" style="z-index:999; height:373px; width:310px; background:6;filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;">
    246.                 <a target="_blank" ><img src="https://img.alicdn.com/imgextra/i2/655889990/TB2ad0SrVXXXXa2XpXXXXXXXXXX_!!655889990.jpg"/></a>
    247.               </div>
    248.             </div>
    249.           </li>
    250.             
    251.         </ul>
    252.       </div>
    253.     </div>
    254.   </div>
    255. </div>

    复制代码



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


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

  • TA的每日心情

    昨天 09:38
  • 签到天数: 205 天

    连续签到: 1 天

    [LV.7]炉火纯青

    31

    主题

    1310

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    37336

    热心会员最佳新人

    QQ
    发表于 2016-6-24 14:32:02 | 显示全部楼层
    那你得先做两张图啊,撸主
    当断不断,必受其乱
  • TA的每日心情

    昨天 09:38
  • 签到天数: 205 天

    连续签到: 1 天

    [LV.7]炉火纯青

    31

    主题

    1310

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    37336

    热心会员最佳新人

    QQ
    发表于 2016-6-24 14:41:35 | 显示全部楼层
    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>无标题文档</title>
    6. </head>
    7. <div data-title="QQ3317902533" class="shiyan_tanchu_iQx151" style="width:310px; height:373px;float:left; ">
    8. <img src="https://img.alicdn.com/imgextra/i4/655889990/TB24CBErVXXXXcqXpXXXXXXXXXX_!!655889990.jpg" width="310" height="373">
    9. </div>
    10. <div class="J_TWidget" data-widget-type="Popup" data-widget-config="{'trigger':'.shiyan_tanchu_iQx151','align':{'node':'.shiyan_tanchu_iQx151','points':['cc','cc'],'offset':[0,0]}}" style="display:none;">
    11. <img src="https://img.alicdn.com/imgextra/i4/655889990/TB21nN0rVXXXXXyXpXXXXXXXXXX_!!655889990.jpg">
    12. </div>
    13. <body>
    14. </body>
    15. </html>
    复制代码





    是这样否
    当断不断,必受其乱
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2016-12-4 03:52 , Processed in 0.114464 second(s), 14 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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