淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 792|回复: 6
收起左侧

[装修相关] 鼠标划过切换图片问题 !!求教

[复制链接]
  • TA的每日心情
    臭美
    2015-6-10 14:14
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初学乍练

    1

    主题

    6

    帖子

    1344

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    1344

    发表于 2015-6-10 16:00:51 | 显示全部楼层 |阅读模式
    <div class="rel" style="width:1920px;height:556px;">
    <div data-widget-config="{&quot;contentCls&quot;: &quot;wm03&quot;,&quot;navCls&quot;:&quot;wms&quot;,&quot;duration&quot;:0.5,&quot;interval&quot;:5,&quot;autoplay&quot;:true,&quot;effect&quot;: &quot;fade&quot;}" data-widget-type="Carousel" class="J_TWidget">
      <ul class="wm03">
      <li class="ks-switchable-panel-internal1158" style="display: block; opacity: 0; position: absolute; z-index: 1;">
      <img src="http://img03.taobaocdn.com/imgextra/i3/84188816/TB2gAmydXXXXXcEXXXXXXXXXXXX_!!84188816.jpg" usemap="#wen14" border="0" class="img-ks-lazyload">
      <map name="wen14">
      <area coords="430,112,715,609"  target="_blank">
      <area coords="788,106,1104,610"  target="_blank">
       <area coords="1160,107,1498,619"  target="_blank">
        </map>
            </li>
            <li class="ks-switchable-panel-internal1158" style="display: block; opacity: 0; position: absolute; z-index: 1;">
            <img src="http://img01.taobaocdn.com/imgextra/i1/84188816/TB23Ql9dXXXXXbmXpXXXXXXXXXX_!!84188816.jpg" usemap="#wen15" border="0" class="img-ks-lazyload">
             <map name="wen15">
             <area coords="431,128,706,629"  target="_blank">
             <area coords="774,114,1092,579"  target="_blank">
              <area coords="1145,111,1493,569"  target="_blank">
              </map>
               </li>
                <li class="ks-switchable-panel-internal1158" style="display: block; opacity: 0; position: absolute; z-index: 1;">
                    <img src="http://img01.taobaocdn.com/imgextra/i1/84188816/TB2jlyvdXXXXXXSXpXXXXXXXXXX_!!84188816.jpg" usemap="#wen20" border="0" class="img-ks-lazyload">
                    <map name="wen20">
                    <area coords="431,135,701,630"  target="_blank">        <area coords="804,124,1120,628"  target="_blank">
                    <area coords="1161,118,1499,630"  target="_blank">
                    </map>
                    </li>
                    <li class="ks-switchable-panel-internal1158" style="display: block; opacity: 0; position: absolute; z-index: 1;">
                    <img src="http://img04.taobaocdn.com/imgextra/i4/84188816/TB2XOKGdXXXXXXJXXXXXXXXXXXX_!!84188816.jpg" usemap="#wen16" border="0" class="img-ks-lazyload">
                     <map name="wen16">
                     <area coords="431,137,700,629"  target="_blank">
                      <area coords="779,123,1095,627"  target="_blank">
                      <area coords="1161,118,1499,630"  target="_blank">
                      </map>
                       </li>
                       <li class="ks-switchable-panel-internal1158" style="display: block; opacity: 0; position: absolute; z-index: 1;">
                       <img src="http://img01.taobaocdn.com/imgextra/i1/84188816/TB2Cc1CdXXXXXaTXXXXXXXXXXXX_!!84188816.jpg" usemap="#wen17" border="0" class="img-ks-lazyload">
                        <map name="wen17">
                             <area coords="431,127,713,629"  target="_blank">
                             <area coords="792,123,1108,627"  target="_blank">
                              <area coords="1161,118,1499,630"  target="_blank">
                              </map>
                              </li>
                               <li class="ks-switchable-panel-internal1158" style="display: block; opacity: 0; position: absolute; z-index: 1;">
                               <img src="http://img04.taobaocdn.com/imgextra/i4/84188816/TB2NbGrdXXXXXcaXpXXXXXXXXXX_!!84188816.jpg" usemap="#wen18" border="0" class="img-ks-lazyload">
                                <map name="wen18">
                                    <area coords="431,132,745,630"  target="_blank">
                                    <area coords="824,129,1140,633"  target="_blank">
                                    <area coords="1161,118,1499,630"  target="_blank">
                                    </map>
                                    </li>
                                    <li class="ks-switchable-panel-internal1158" style="display: block; opacity: 1; position: absolute; z-index: 9;"><img src="http://img03.taobaocdn.com/imgextra/i3/84188816/TB2qGWudXXXXXaGXpXXXXXXXXXX_!!84188816.jpg" usemap="#wen19" border="0" class="img-ks-lazyload">
                                    <map name="wen19">
                                    <area coords="418,123,698,551"  target="_blank">
                                    <area coords="782,134,1095,547"  target="_blank">
                                    <area coords="1148,118,1487,540"  target="_blank">
                                     </map>
                                     </li>
                                     </ul>
                                     <ul class="wms"> <li class="ks-switchable-trigger-internal1157">
                                     <img src="http://img03.taobaocdn.com/imgextra/i3/84188816/TB2blyldXXXXXb1XXXXXXXXXXXX_!!84188816.png" class="abs img-ks-lazyload" style="width:120px;height:100px;top:11px;left:446px;z-index:99;">
                                     </li>
                                     <li class="ks-switchable-trigger-internal1157"><img src="http://img03.taobaocdn.com/imgextra/i3/84188816/TB2blyldXXXXXb1XXXXXXXXXXXX_!!84188816.png" class="abs img-ks-lazyload" style="width:120px;height:100px;top:11px;left:596px;z-index:99;">
                                     </li> <li class="ks-switchable-trigger-internal1157"><img src="http://img03.taobaocdn.com/imgextra/i3/84188816/TB2blyldXXXXXb1XXXXXXXXXXXX_!!84188816.png" class="abs img-ks-lazyload" style="width:120px;height:100px;top:11px;left:746px;z-index:99;">
                                     </li> <li class="ks-switchable-trigger-internal1157"><img src="http://img03.taobaocdn.com/imgextra/i3/84188816/TB2blyldXXXXXb1XXXXXXXXXXXX_!!84188816.png" class="abs img-ks-lazyload" style="width:120px;height:100px;top:11px;left:896px;z-index:99;">
                                     </li> <li class="ks-switchable-trigger-internal1157"><img src="http://img03.taobaocdn.com/imgextra/i3/84188816/TB2blyldXXXXXb1XXXXXXXXXXXX_!!84188816.png" class="abs img-ks-lazyload" style="width:120px;height:100px;top:11px;left:1046px;z-index:99;">
                                     </li>
                                     <li class="ks-switchable-trigger-internal1157"><img src="http://img03.taobaocdn.com/imgextra/i3/84188816/TB2blyldXXXXXb1XXXXXXXXXXXX_!!84188816.png" class="abs img-ks-lazyload" style="width:120px;height:100px;top:11px;left:1196px;z-index:99;">
                                     </li>
                                     <li class="ks-switchable-trigger-internal1157 ks-active"><img src="http://img03.taobaocdn.com/imgextra/i3/84188816/TB2blyldXXXXXb1XXXXXXXXXXXX_!!84188816.png" class="abs img-ks-lazyload" style="width:120px;height:100px;top:11px;left:1346px;z-index:99;">
                                     </li>
                                     </ul>
                                     </div>
                                     </div>


    鼠标划过图片的上面的一行小的能自动切换到相应图片 上面的代码缺了点什么? 我测试的时候不能切换啊?

    就高手指教

    22.jpg

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


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

  • TA的每日心情
    思考
    2016-1-1 09:21
  • 签到天数: 231 天

    连续签到: 59 天

    [LV.7]炉火纯青

    1

    主题

    359

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51271

    最佳新人

    QQ
    发表于 2015-6-10 17:46:16 | 显示全部楼层
    楼下大神解答
  • TA的每日心情
    臭美
    2016-3-15 11:20
  • 签到天数: 118 天

    连续签到: 1 天

    [LV.6]渐入佳境

    3

    主题

    143

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    24489

    最佳新人热心会员

    QQ
    发表于 2015-6-11 15:03:44 | 显示全部楼层
    貌似你用的是我家的代码。。。。
    用我的一生,换你十年天真无邪。
  • TA的每日心情
    臭美
    2015-6-10 14:14
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初学乍练

    1

    主题

    6

    帖子

    1344

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    1344

     楼主| 发表于 2015-6-12 21:16:17 | 显示全部楼层
    情深缘浅 发表于 2015-6-11 15:03
    貌似你用的是我家的代码。。。。

    你是哪一家的呀?可以分享下不?

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


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

  • TA的每日心情
    抱抱
    2015-6-25 09:56
  • 签到天数: 3 天

    连续签到: 1 天

    [LV.2]登堂入室

    8

    主题

    51

    帖子

    2801

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2801

    发表于 2015-6-14 22:56:32 | 显示全部楼层
    鼠标经过切换图片那是弹出层的效果,你的代码只有轮播

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


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

  • TA的每日心情
    求抱抱
    2016-8-13 10:29
  • 签到天数: 15 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    0

    主题

    22

    帖子

    2687

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2687

    淘宝皇冠店美工

    发表于 2015-7-6 14:28:16 | 显示全部楼层
    这是我店铺的效果,尺寸你自己调节哦,我这是宽277像素,高477像素。淘宝C店和天猫都可以使用。

    1. <div class="bj646" style="float:left;margin:10px 12px 10px 12px;width:277px;height:477px;background:url(默认显示的图片地址) no-repeat;">
    2.                                         </div>
    3.                                         <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    4.           'trigger':'.bj646',
    5.           'align':{
    6.                   'node':'.bj646',
    7.                   'offset':[0,0],
    8.                   'points':['cc','cc']
    9.                   }
    10.             }">
    11.                                                 <div style="background-color: white; height: 477px; width: 277px;background:url(弹出的图片地址) no-repeat;">
    12.                                                         <span>
    13.                                         <a href="目标链接" target="_blank" style="display:block;width:277px;height:477px;">
    14.                                                                 </a>
    15.                                                         </span>
    16.                                                 </div>
    17.                                         </div>
    18.                     
    复制代码

    未命名.gif

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


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

  • TA的每日心情
    抱抱
    2015-7-27 11:34
  • 签到天数: 5 天

    连续签到: 1 天

    [LV.2]登堂入室

    0

    主题

    7

    帖子

    1256

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    1256

    发表于 2015-7-27 17:36:25 | 显示全部楼层
    点个赞  我想做多张并列的咋弄啊

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-6 11:02 , Processed in 0.112826 second(s), 19 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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