淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 986|回复: 15
收起左侧

[装修相关] 鼠标经过图片放大特效

[复制链接]
  • TA的每日心情
    大哭
    2016-8-15 15:56
  • 签到天数: 13 天

    连续签到: 1 天

    [LV.3]武林新秀

    1

    主题

    20

    帖子

    6097

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    6097

    发表于 2015-7-20 16:10:10 | 显示全部楼层 |阅读模式
    https://shop117685580.taobao.com/?spm=2013.1.w5001-10547732954.4.wU5ElU&scene=taobao_shop
    这个网站上面的鼠标经过图片放大的效果,怎么做到的呀,求大神指导!
    QQ截图20150720160912.png

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


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

  • TA的每日心情
    大哭
    2016-8-15 15:56
  • 签到天数: 13 天

    连续签到: 1 天

    [LV.3]武林新秀

    1

    主题

    20

    帖子

    6097

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    6097

     楼主| 发表于 2015-7-21 09:35:51 | 显示全部楼层
    乖乖兔 发表于 2015-7-20 17:53
    我也小白,不会写,只会拿大神的改,现成的给你一个!可以嵌套在表格,也可以放在轮播,店招的话,详情页 ...

    貌似没有用呀,怎么办

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


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

  • TA的每日心情
    大哭
    2016-8-15 15:56
  • 签到天数: 13 天

    连续签到: 1 天

    [LV.3]武林新秀

    1

    主题

    20

    帖子

    6097

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    6097

     楼主| 发表于 2015-7-22 10:46:34 | 显示全部楼层
    1. <div style="height:0px;">
    2.         <div data-widget-init="1" style="width:500px;display:block;left:-261px;top:159px;z-index:10000000;" class="J_TWidget hidden ks-popup-hidden ks-overlay-hidden" data-widget-config="{&quot;trigger&quot;:&quot;.s1&quot;,&quot;triggerType&quot;:&quot;mouse&quot;,&quot;align&quot;:{&quot;node&quot;:&quot;.s1&quot;,&quot;offset&quot;:[0,0],&quot;points&quot;:[&quot;tr&quot;,&quot;tr&quot;]}}" data-widget-type="Popup">
    3.                 <div class="ks-popup-content">
    4.                          <img src="//gdp.alicdn.com/imgextra/i3/2590525410/TB21H_vdVXXXXaKXXXXXXXXXXXX_!!2590525410.jpg//gdp.alicdn.com/imgextra/i3/2590525410/TB21H_vdVXXXXaKXXXXXXXXXXXX_!!2590525410.jpg" alt="" />
    5.                 </div>
    6.         </div>
    7.         <div data-widget-init="1" style="width:500px;display:block;left:-25px;top:159px;z-index:10000000;" class="J_TWidget hidden ks-popup-hidden ks-overlay-hidden" data-widget-config="{&quot;trigger&quot;:&quot;.s2&quot;,&quot;triggerType&quot;:&quot;mouse&quot;,&quot;align&quot;:{&quot;node&quot;:&quot;.s2&quot;,&quot;offset&quot;:[0,0],&quot;points&quot;:[&quot;tr&quot;,&quot;tr&quot;]}}" data-widget-type="Popup">
    8.                 <div class="ks-popup-content">
    9.                          <img src="//gdp.alicdn.com/imgextra/i3/2590525410/TB21H_vdVXXXXaKXXXXXXXXXXXX_!!2590525410.jpg" alt="" />
    10.                 </div>
    11.         </div>
    12.         <div data-widget-init="1" style="width:500px;display:block;left:210px;top:159px;z-index:10000000;" class="J_TWidget hidden ks-popup-hidden ks-overlay-hidden" data-widget-config="{&quot;trigger&quot;:&quot;.s3&quot;,&quot;triggerType&quot;:&quot;mouse&quot;,&quot;align&quot;:{&quot;node&quot;:&quot;.s3&quot;,&quot;offset&quot;:[0,0],&quot;points&quot;:[&quot;tr&quot;,&quot;tr&quot;]}}" data-widget-type="Popup">
    13.                 <div class="ks-popup-content">
    14.                          <img src="//gdp.alicdn.com/imgextra/i3/2590525410/TB21H_vdVXXXXaKXXXXXXXXXXXX_!!2590525410.jpg" alt="" />
    15.                 </div>
    16.         </div>
    17.         <div data-widget-init="1" style="width:500px;display:block;left:450px;top:159px;z-index:10000000;" class="J_TWidget hidden ks-popup-hidden ks-overlay-hidden" data-widget-config="{&quot;trigger&quot;:&quot;.s4&quot;,&quot;triggerType&quot;:&quot;mouse&quot;,&quot;align&quot;:{&quot;node&quot;:&quot;.s4&quot;,&quot;offset&quot;:[0,0],&quot;points&quot;:[&quot;tr&quot;,&quot;tr&quot;]}}" data-widget-type="Popup">
    18.                 <div class="ks-popup-content">
    19.                          <img src="//gdp.alicdn.com/imgextra/i3/2590525410/TB21H_vdVXXXXaKXXXXXXXXXXXX_!!2590525410.jpg" alt="" />
    20.                 </div>
    21.         </div>
    22. </div>

    23. <div style="height:743px;">
    24.         <div class="footer-more-trigger most-footer cloud-footer" style="left:50%;top:auto;width:0;height:inherit;border:0;padding:0;background-color:transparent;display:block;overflow:visible;">
    25.                 <div class="footer-more-trigger most-footer cloud-footer" style="left:-960px;top:-40px;width:1920px;height:inherit;border:0px;padding:0px;display:block;overflow:hidden;background-color:transparent;">
    26.                         <div class="clearfix J_TWidget" style="margin:0 auto;width:1920px;height:730px;overflow:hidden;">
    27.                                  <img src="//gdp.alicdn.com/imgextra/i4/2590525410/TB2X.vIdVXXXXafXXXXXXXXXXXX_!!2590525410.jpg" alt="" />
    28.                                 <div class="J_TWidget" data-widget-config="{&quot;effect&quot;:&quot;scrollx&quot;,&quot;easing&quot;:&quot;easeOutStrong&quot;,&quot;steps&quot;:1,&quot;prevBtnCls&quot;:&quot;prev&quot;,&quot;nextBtnCls&quot;:&quot;next&quot;,&quot;navCls&quot;:&quot;nav&quot;,&quot;contentCls&quot;:&quot;content&quot;,&quot;autoplay&quot;:false,&quot; OVERFLOW&quot;:&quot;hidden&quot;}" data-widget-type="Carousel" style="width:1920px;height:591px;background:url(//gdp.alicdn.com/imgextra/i3/2590525410/TB29ZTEdVXXXXbrXXXXXXXXXXXX_!!2590525410.jpg);" data-widget-init="1">
    29.                                         <div style="width:37px;height:75px;float:left;margin-top:258px;margin-left:418px;cursor:pointer;" class="prev">
    30.                                                  <img src="//gdp.alicdn.com/imgextra/i3/2590525410/TB2uJvLdVXXXXXPXXXXXXXXXXXX_!!2590525410.jpg" alt=" TB27es0dXXXXXX8XXXXXXXXXXXX_!!532871270.jpg" />
    31.                                         </div>
    32.                                         <div style="width:950px;height:373px;float:left;margin-left:30px;margin-top:121px;overflow:hidden;position:relative;background:rgb(51,0,204);">
    33.                                                 <ul class="content" style="float:left;margin:0px;padding:0px;width:999999px;">
    34.                                                         <li style="width:950px;height:373px;display:block;float:left;" class="ks-switchable-panel-internal1345">
    35.                                                                 <table width="950" height="373" border="0" cellpadding="0" cellspacing="0">
    36.                                                                         <tbody>
    37.                                                                                 <tr>
    38.                                                                                         <td>
    39.                                                                                                  <img src="//gdp.alicdn.com/imgextra/i4/2590525410/TB2b8K8dVXXXXcTXpXXXXXXXXXX_!!2590525410.png" alt=" 1_01.jpg" class="b1" />
    40.                                                                                         </td>
    41.                                                                                         <td>
    42.                                                                                                  <img src="//gdp.alicdn.com/imgextra/i4/2590525410/TB2b8K8dVXXXXcTXpXXXXXXXXXX_!!2590525410.png" alt=" 1_02.jpg" class="b2" />
    43.                                                                                         </td>
    44.                                                                                         <td>
    45.                                                                                                  <img src="//gdp.alicdn.com/imgextra/i4/2590525410/TB2b8K8dVXXXXcTXpXXXXXXXXXX_!!2590525410.png" alt=" 1_03.jpg" class="b3" />
    46.                                                                                         </td>
    47.                                                                                         <td>
    48.                                                                                                  <img src="//gdp.alicdn.com/imgextra/i4/2590525410/TB2b8K8dVXXXXcTXpXXXXXXXXXX_!!2590525410.png" alt=" 1_04.jpg" class="b4" />
    49.                                                                                         </td>
    50.                                                                                 </tr>
    51.                                                                         </tbody>
    52.                                                                 </table>
    53.                                                         </li>
    54.                                                         <li style="width:950px;height:373px;display:block;float:left;" class="ks-switchable-panel-internal1345">
    55.                                                                 <table width="950" height="373" border="0" cellpadding="0" cellspacing="0">
    56.                                                                         <tbody>
    57.                                                                                 <tr>
    58.                                                                                         <td>
    59.                                                                                                  <img src="//gdp.alicdn.com/imgextra/i4/2590525410/TB2b8K8dVXXXXcTXpXXXXXXXXXX_!!2590525410.png" alt="" />
    60.                                                                                         </td>
    61.                                                                                         <td>
    62.                                                                                                  <img src="//gdp.alicdn.com/imgextra/i4/2590525410/TB2b8K8dVXXXXcTXpXXXXXXXXXX_!!2590525410.png" alt="" />
    63.                                                                                         </td>
    64.                                                                                         <td>
    65.                                                                                                  <img src="//gdp.alicdn.com/imgextra/i4/2590525410/TB2b8K8dVXXXXcTXpXXXXXXXXXX_!!2590525410.png" alt="" />
    66.                                                                                         </td>
    67.                                                                                         <td>
    68.                                                                                                  <img src="//gdp.alicdn.com/imgextra/i4/2590525410/TB2b8K8dVXXXXcTXpXXXXXXXXXX_!!2590525410.png" alt="" />
    69.                                                                                         </td>
    70.                                                                                 </tr>
    71.                                                                         </tbody>
    72.                                                                 </table>
    73.                                                         </li>
    74.                                                 </ul>
    75.                                         </div>
    76.                                         <div style="width:37px;height:75px;float:left;margin-top:258px;margin-left:30px;cursor:pointer;" class="next">
    77.                                                  <img src="//gdp.alicdn.com/imgextra/i1/2590525410/TB2kubqdVXXXXaMXpXXXXXXXXXX_!!2590525410.jpg" alt=" TB2rNEQdXXXXXcpXXXXXXXXXXXX_!!532871270.jpg" />
    78.                                         </div>
    79.                                         <div class="nav" style="visibility:hidden;">
    80.                                                 <li class="ks-switchable-trigger-internal1344">
    81.                                                         &nbsp;
    82.                                                 </li>
    83.                                                 <li class="ks-switchable-trigger-internal1344">
    84.                                                         &nbsp;
    85.                                                 </li>
    86.                                         </div>
    87.                                 </div>
    88.                         </div>
    89.                 </div>
    90.         </div>
    91. </div>
    复制代码

    这个是找大神写的代码,但问题来了,只能在预览的时候有这样的效果,但是发布之后就没有任何效果了,看看是哪里出问题了呢,
    我把里面的图片网上链接发出来,看看有没有大神能给我解决一下哈




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


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

  • TA的每日心情
    大哭
    2016-8-15 15:56
  • 签到天数: 13 天

    连续签到: 1 天

    [LV.3]武林新秀

    1

    主题

    20

    帖子

    6097

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    6097

     楼主| 发表于 2015-7-22 10:47:26 | 显示全部楼层


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


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

  • TA的每日心情
    大哭
    2016-2-22 14:36
  • 签到天数: 98 天

    连续签到: 1 天

    [LV.6]渐入佳境

    37

    主题

    841

    帖子

    7万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    77741

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

    发表于 2015-7-20 16:44:01 | 显示全部楼层
    嵌套在轮播中了

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


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

    回复 支持 1 反对 0

    使用道具 举报

  • TA的每日心情
    大哭
    2016-2-22 14:36
  • 签到天数: 98 天

    连续签到: 1 天

    [LV.6]渐入佳境

    37

    主题

    841

    帖子

    7万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    77741

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

    发表于 2015-7-20 16:43:28 | 显示全部楼层
    目测是个简单的弹出层

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


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

  • TA的每日心情
    不爽
    2016-5-27 11:51
  • 签到天数: 122 天

    连续签到: 1 天

    [LV.7]炉火纯青

    32

    主题

    719

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    13420

    最佳新人热心会员

    QQ
    发表于 2015-7-20 17:04:19 | 显示全部楼层
    楼上是大神。
    https://594diaosi.taobao.com/shop/view_shop.htm?spm=a1z0e.1.10010.5.JXukMr
  • TA的每日心情
    大哭
    2016-8-15 15:56
  • 签到天数: 13 天

    连续签到: 1 天

    [LV.3]武林新秀

    1

    主题

    20

    帖子

    6097

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    6097

     楼主| 发表于 2015-7-20 17:17:35 | 显示全部楼层

    具体要怎么写代码呢,求大神指教

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


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

  • TA的每日心情
    大哭
    2016-8-15 15:56
  • 签到天数: 13 天

    连续签到: 1 天

    [LV.3]武林新秀

    1

    主题

    20

    帖子

    6097

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    6097

     楼主| 发表于 2015-7-20 17:20:00 | 显示全部楼层
    乖乖兔 发表于 2015-7-20 16:43
    目测是个简单的弹出层

    能写一个代码给我吗,谢谢了哈

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


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

  • TA的每日心情
    大哭
    2016-11-2 11:09
  • 签到天数: 277 天

    连续签到: 1 天

    [LV.8]自成一派

    2

    主题

    660

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    64555

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

    发表于 2015-7-20 17:41:55 | 显示全部楼层
    都上别人说完了  楼下继续   请忽视我~~

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


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

  • TA的每日心情
    大哭
    2016-2-22 14:36
  • 签到天数: 98 天

    连续签到: 1 天

    [LV.6]渐入佳境

    37

    主题

    841

    帖子

    7万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    77741

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

    发表于 2015-7-20 17:53:47 | 显示全部楼层
    雨蒙 发表于 2015-7-20 17:20
    能写一个代码给我吗,谢谢了哈

    我也小白,不会写,只会拿大神的改,现成的给你一个!可以嵌套在表格,也可以放在轮播,店招的话,详情页没效果
    1. <div class="sub all_01" style="width:375px;height:580px;background:url(http://img01.taobaocdn.com/imgextra/i1/1755478087/TB2EicicXXXXXb2XXXXXXXXXXXX_!!1755478087.jpg);float:left;">
    2.                                                   <div data-widget-config="{"trigger":".all_01","align":{"node":".all_01","offset":[0,-580],"points":["bc","tc"]}}" data-widget-type="Popup" class="J_TWidget hidden">
    3.                                                     <div style="width:375px;height:580px;background:url(http://img04.taobaocdn.com/imgextra/i4/1755478087/TB2WbkpcXXXXXabXXXXXXXXXXXX_!!1755478087.png);"> </div>
    4.                                                   </div>
    5.                                                 </div>
    复制代码



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


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

  • TA的每日心情
    大哭
    昨天 14:19
  • 签到天数: 650 天

    连续签到: 3 天

    [LV.9]已臻大成

    37

    主题

    2231

    帖子

    13万

    积分

    高级会员

    阅读权限: 50

    【单身狗认证】

    Rank: 8Rank: 8

    积分
    138011

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

    QQ
    发表于 2015-7-20 22:24:55 | 显示全部楼层
    你们不要水贴啊!知道这样对楼主的伤害有多大吗?!淫渣!
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2016-12-4 08:00 , Processed in 0.185430 second(s), 31 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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