淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2603|回复: 9
收起左侧

忽喷:鼠标滑过小图变大图

[复制链接]
  • TA的每日心情
    心跳
    2016-5-4 09:39
  • 签到天数: 63 天

    连续签到: 2 天

    [LV.6]渐入佳境

    16

    主题

    494

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    12595

    最佳新人热心会员

    QQ
    发表于 2016-1-16 14:08:04 | 显示全部楼层 |阅读模式
    鼠标经过小图变大图

    鼠标经过小图变大图

    鼠标经过小图变大图
    效果图
    直接复制以下代码,放在自定底义页
    <div style="padding: 10px; border:1px solid #e2e2e2; width: 750px; height: 376px; margin-bottom: 10px;"class="slider-promo J_Slider J_TWidget" data-widget-config="{'effect':'fade','contentCls':'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}"data-widget-type="Slide">
    <ul style="margin: 0px; padding:0px; width: 310px; float: left;" class="lst-main">
    <li style="display: block; z-index:1; opacity: 0;">
    <div style="width: 310px; height:376px;" class="item"><adata-attr-replace="[{'type':'href','desc':'第一个宝贝链接地址'}]"><img src="http://img04.taobaocdn.com/imgextra/i4/T2Vl4kXlNMXXXXXXXX-570561764.jpg"data-attr-replace="[{'type':'src','desc':'大图片地址(大小310*310)'}]"></a>&nbsp;
    <div style="width: 310px; height:66px; color: #ffffff;">
    <div style="margin: auto; width:290px; height: 38px; line-height: 20px; overflow: hidden;"><fontcolor="#111111">gengsheng_02】双击修改你的标题行数限制2&nbsp;此模版无限CSS直接应用</font></div>
    <div style="margin: auto; width:290px; height: 25px; text-align: center; line-height: 25px; overflow: hidden;border-top-color: #ffffff; border-top-width: 1px; border-top-style:solid;"><fontcolor="#111111"></font></div></div></div></li><listyle="display: block; z-index: 1; opacity: 0;">
    <div style="width: 310px; height:376px;" class="item"><adata-attr-replace="[{'type':'href','desc':'第二个宝贝链接地址 '}]"><img src="http://img08.taobaocdn.com/bao/uploaded/i8/T1wntDXdVdXXaGh7Yb_124712.jpg_310x310.jpg"width="310" height="310"data-attr-replace="[{'type':'src','desc':'大图片地址(大小310*310)'}]"></a>&nbsp;
    <div style="width: 310px; height:66px; color: #ffffff;">
    <div style="margin: auto; width:290px; height: 36px; line-height: 20px; overflow: hidden;"><fontcolor="#111111">gengsheng_02】双击修改你的标题行数限制</font></div>
    <div style="margin: auto; width:290px; height: 25px; text-align: center; line-height: 25px; overflow: hidden;border-top-color: #ffffff; border-top-width: 1px; border-top-style:solid;"><fontcolor="#111111"></font></div></div></div></li><listyle="display: block; z-index: 1; opacity: 0;">
    <div style="width: 310px; height:376px;" class="item"><a target="_blank" data-attr-replace="[{'type':'href','desc':'第三个宝贝链接地址'}]"><img  alt=""src="http://img08.taobaocdn.com/bao/uploaded/i8/T1j80DXgxKXXXhRh3W_024008.jpg_310x310.jpg"width="310" height="310"></a>&nbsp;
    <div style="width: 310px; height:66px; color: #ffffff;">
    <div style="margin: auto; width:290px; height: 37px; line-height: 20px; overflow: hidden;"><fontcolor="#111111">gengsheng_02】双击修改你的标题行数限制2&nbsp;此模版无限CSS直接应用</font></div>
    <div style="margin: auto; width:290px; height: 25px; text-align: center; line-height: 25px; overflow: hidden;border-top-color: #ffffff; border-top-width: 1px; border-top-style:solid;"><fontcolor="#111111"></font></div></div></div></li><listyle="display: block; z-index: 1; opacity: 0;">
    <div style="width: 310px; height:376px;" class="item"><adata-attr-replace="[{'type':'href','desc':'第四个宝贝链接地址'}]"><img src="http://img06.taobaocdn.com/bao/uploaded/i6/T1.98DXodAXXcPvz.9_103921.jpg_310x310.jpg"width="310" height="310"data-attr-replace="[{'type':'src','desc':'大图片地址(大小310*310)'}]"></a>&nbsp;
    <div style="width: 310px; height:66px; color: #ffffff;">
    <div style="margin: auto; width:290px; height: 38px; line-height: 20px; overflow: hidden;"><fontcolor="#111111">gengsheng_02】双击修改你的标题行数限制2&nbsp;此模版无限CSS直接应用</font></div>
    <div style="margin: auto; width:290px; height: 25px; text-align: center; line-height: 25px; overflow: hidden;border-top-color: #ffffff; border-top-width: 1px; border-top-style:solid;"><fontcolor="#111111"></font></div></div></div></li><listyle="display: block; z-index: 1; opacity: 0;">
    <div style="width: 310px; height:376px;" class="item"><adata-attr-replace="[{'type':'href','desc':'第五个宝贝链接地址'}]"><img src="http://img02.taobaocdn.com/bao/uploaded/i2/T1zXJEXdRxXXawBKkW_023228.jpg_310x310.jpg"width="310" height="310"data-attr-replace="[{'type':'src','desc':'大图片地址(大小310*310)'}]"></a>&nbsp;
    <div style="width: 310px; height:66px; color: #ffffff;">
    <div style="margin: auto; width:290px; height: 37px; line-height: 20px; overflow: hidden;"><fontcolor="#111111">gengsheng_02】双击修改你的标题行数限制2&nbsp;此模版无限CSS直接应用</font></div>
    <div style="margin: auto; width:290px; height: 25px; text-align: center; line-height: 25px; overflow: hidden;border-top-color: #ffffff; border-top-width: 1px; border-top-style:solid;"><fontcolor="#111111"></font></div></div></div></li><listyle="display: block; z-index: 1; opacity: 0;">
    <div style="width: 310px; height:376px;" class="item"><adata-attr-replace="[{'type':'href','desc':'第六个宝贝链接地址'}]"><img src="http://img02.taobaocdn.com/bao/uploaded/i2/T1KwBCXeFpXXX.M3ZU_014703.jpg_310x310.jpg"width="310" height="310" data-attr-replace="[{'type':'src','desc':'大图片地址(大小310*310)'}]"></a>&nbsp;
    <div style="width: 310px; height:66px; color: #ffffff;">
    <div style="margin: auto; width:290px; height: 37px; line-height: 20px; overflow: hidden;"><fontcolor="#111111">gengsheng_02】双击修改你的标题行数限制2&nbsp;此模版无限CSS直接应用</font></div>
    <div style="margin: auto; width:290px; height: 25px; text-align: center; line-height: 25px; overflow: hidden;border-top-color: #ffffff; border-top-width: 1px; border-top-style:solid;"><font color="#111111"></font></div></div></div></li><listyle="display: block; z-index: 1; opacity: 0;">
    <div style="width: 310px; height:376px;" class="item"><adata-attr-replace="[{'type':'href','desc':'第七个宝贝链接地址'}]"><img  src="http://img04.taobaocdn.com/imgextra/i4/T2Vl4kXlNMXXXXXXXX-570561764.jpg"data-attr-replace="[{'type':'src','desc':'大图片地址(大小310*310)'}]"></a>&nbsp;
    <div style="width: 310px; height:66px; color: #ffffff;">
    <div style="margin: auto; width:290px; height: 36px; line-height: 20px; overflow: hidden;"><fontcolor="#111111">gengsheng_02】双击修改你的标题行数限制2&nbsp;此模版无限CSS直接应用</font></div>
    <div style="margin: auto; width:290px; height: 25px; text-align: center; line-height: 25px; overflow: hidden;border-top-color: #ffffff; border-top-width: 1px; border-top-style:solid;"><fontcolor="#111111"></font></div></div></div></li><listyle="display: block; z-index: 1; opacity: 0;">
    <div style="width: 310px; height:376px;" class="item"><a data-attr-replace="[{'type':'href','desc':'第七个宝贝链接地址'}]"><img src="http://img04.taobaocdn.com/imgextra/i4/T2Vl4kXlNMXXXXXXXX-570561764.jpg"data-attr-replace="[{'type':'src','desc':'大图片地址(大小310*310)'}]"></a>&nbsp;
    <div style="width: 310px; height:66px; color: #ffffff;">
    <div style="margin: auto; width:290px; height: 37px; line-height: 20px; overflow: hidden;"><fontcolor="#111111">gengsheng_02】双击修改你的标题行数限制2&nbsp;此模版无限CSS直接应用</font></div>
    <div style="margin: auto; width:290px; height: 25px; text-align: center; line-height: 25px; overflow: hidden;border-top-color: #ffffff; border-top-width: 1px; border-top-style:solid;"><fontcolor="#111111"></font></div></div></div></li><listyle="display: block; z-index: 1; opacity: 0;">
    <div style="width: 310px; height:376px;" class="item"><adata-attr-replace="[{'type':'href','desc':'第七个宝贝链接地址'}]"><img src="http://img04.taobaocdn.com/imgextra/i4/T2Vl4kXlNMXXXXXXXX-570561764.jpg"data-attr-replace="[{'type':'src','desc':'大图片地址(大小310*310)'}]"></a>&nbsp;
    <div style="width: 310px; height:66px; color: #ffffff;">
    <div style="margin: auto; width:290px; height: 38px; line-height: 20px; overflow: hidden;"><fontstyle="color: #111111;">gengsheng_02】双击修改你的标题 行数限制2&nbsp;此模版无限CSS直接应用</font></div>
    <div style="margin: auto; width:290px; height: 25px; text-align: center; line-height: 25px; overflow: hidden;border-top-color: #ffffff; border-top-width: 1px; border-top-style:solid;"><font style="color: #111111;"></font></div></div></div></li></ul><ulstyle="margin: 0px; padding: 0px; width: 381px; height: 376px; float:right;" class="lst-trigger">
    <li style="margin: 0px 0px 5px;border: 1px solid #e2e2e2; width: 120px; height: 120px; text-align: center;float: left;"><a data-attr-replace="[{'type':'href','desc':'第一个宝贝小图链接地址'}]"><img src="http://img03.taobaocdn.com/imgextra/i3/T2GR4kXlRMXXXXXXXX-570561764.jpg"data-attr-replace="[{'type':'src','desc':'第一个宝贝小图片地址(大小120*120)'}]"></a></li><listyle="margin: 0px 0px 5px 5px; border: 1px solid #e2e2e2; width: 120px;height: 120px; text-align: center; float: left;"><adata-attr-replace="[{'type':'href','desc':'第二个宝贝小图链接地址'}]"><img src="http://img08.taobaocdn.com/bao/uploaded/i8/T1wntDXdVdXXaGh7Yb_124712.jpg_120x120.jpg"data-attr-replace="[{'type':'src','desc':'第二个宝贝小图片地址(大小120*120)'}]"></a></li><listyle="margin: 0px 0px 5px 5px; border: 1px solid #e2e2e2; width: 120px;height: 120px; text-align: center; float: left;"><adata-attr-replace="[{'type':'href','desc':'第三个宝贝小图链接地址'}]"><img src="http://img08.taobaocdn.com/bao/uploaded/i8/T1j80DXgxKXXXhRh3W_024008.jpg_120x120.jpg"data-attr-replace="[{'type':'src','desc':'第三个宝贝小图片地址(大小120*120)'}]"></a></li><listyle="margin: 0px 0px 5px; border: 1px solid #e2e2e2; width: 120px;height: 120px; text-align: center; float: left;"><a data-attr-replace="[{'type':'href','desc':'第四个宝贝小图链接地址'}]"><img src="http://img06.taobaocdn.com/bao/uploaded/i6/T1.98DXodAXXcPvz.9_103921.jpg_120x120.jpg"data-attr-replace="[{'type':'src','desc':'第四个宝贝小图片地址(大小120*120)'}]"></a></li><listyle="margin: 0px 0px 5px 5px; border: 1px solid #e2e2e2; width: 120px;height: 120px; text-align: center; float: left;"><adata-attr-replace="[{'type':'href','desc':'第五个宝贝小图链接地址'}]"><img src="http://img02.taobaocdn.com/bao/uploaded/i2/T1zXJEXdRxXXawBKkW_023228.jpg_120x120.jpg"data-attr-replace="[{'type':'src','desc':'第五个宝贝小图片地址(大小120*120)'}]"></a></li><listyle="margin: 0px 0px 5px 5px; border: 1px solid #e2e2e2; width: 120px;height: 120px; text-align: center; float: left;"><a data-attr-replace="[{'type':'href','desc':'第六个宝贝小图链接地址'}]"><img src="http://img02.taobaocdn.com/bao/uploaded/i2/T1KwBCXeFpXXX.M3ZU_014703.jpg_120x120.jpg"data-attr-replace="[{'type':'src','desc':'第六个宝贝小图片地址(大小120*120)'}]"></a></li><listyle="margin: 0px; border: 1px solid #e2e2e2; width: 120px; height:120px; text-align: center; float: left;"><adata-attr-replace="[{'type':'href','desc':'第七个宝贝小图链接地址'}]"><img src="http://img02.taobaocdn.com/bao/uploaded/i2/T15GXDXh4vXXawqLA0_035207.jpg_120x120.jpg"data-attr-replace="[{'type':'src','desc':'第七个宝贝小图片地址(大小120*120)'}]"></a></li><listyle="margin: 0px 0px 0px 5px; border: 1px solid #e2e2e2; width: 120px;height: 120px; text-align: center; float: left;"><adata-attr-replace="[{'type':'href','desc':'第八个宝贝小图链接地址'}]"><img src="http://img02.taobaocdn.com/bao/uploaded/i2/T1zl0DXbdKXXcpNNUW_024000.jpg_120x120.jpg"data-attr-replace="[{'type':'src','desc':'第八个宝贝小图片地址(大小120*120)'}]"></a></li><listyle="margin: 0px 0px 0px 5px; border: 1px solid #e2e2e2; width: 120px;height: 120px; text-align: center; float: left;"><a target="_blank"data-attr-replace="[{'type':'href','desc':'第九个宝贝小图链接地址'}]"><img  alt=""src="http://img05.taobaocdn.com/bao/uploaded/i5/T1fSlDXidCXXcqiiIY_030024.jpg_120x120.jpg"></a></li></ul></div>


    痛并快乐着---祸兮,福之所倚,福兮,祸之所伏!相生相克,变幻无常!
  • TA的每日心情
    抱抱
    2016-11-23 10:46
  • 签到天数: 135 天

    连续签到: 1 天

    [LV.7]炉火纯青

    9

    主题

    887

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    31914

    淘宝皇冠店美工最佳新人热心会员

    QQ
    发表于 2016-1-16 16:27:28 | 显示全部楼层
    你这是要上天哪

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


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

  • TA的每日心情
    加油
    2016-11-4 21:06
  • 签到天数: 136 天

    连续签到: 1 天

    [LV.7]炉火纯青

    3

    主题

    649

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    23710

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

    QQ
    发表于 2016-1-16 20:14:52 | 显示全部楼层
    人才年年有

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


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

  • TA的每日心情
    心跳
    2016-5-4 09:39
  • 签到天数: 63 天

    连续签到: 2 天

    [LV.6]渐入佳境

    16

    主题

    494

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    12595

    最佳新人热心会员

    QQ
     楼主| 发表于 2016-1-17 09:52:18 | 显示全部楼层

    大丈夫申可上天,缩可入地,天空之大,任我遨游

    痛并快乐着---祸兮,福之所倚,福兮,祸之所伏!相生相克,变幻无常!
  • TA的每日心情
    加油
    2016-11-15 10:41
  • 签到天数: 177 天

    连续签到: 1 天

    [LV.7]炉火纯青

    21

    主题

    305

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    26180

    QQ
    发表于 2016-1-17 12:00:10 | 显示全部楼层
    我怎么把代码放到自定义页面,图片都错位了
    https://shop118253793.taobao.com/shop/view_shop.htm?tracelog=twddp&amp;amp;amp;user_number_id=904632868
  • TA的每日心情
    心跳
    2016-5-4 09:39
  • 签到天数: 63 天

    连续签到: 2 天

    [LV.6]渐入佳境

    16

    主题

    494

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    12595

    最佳新人热心会员

    QQ
     楼主| 发表于 2016-1-17 14:03:44 | 显示全部楼层
    放到自定义页面就不错位了
    痛并快乐着---祸兮,福之所倚,福兮,祸之所伏!相生相克,变幻无常!
  • TA的每日心情
    思考
    昨天 16:17
  • 签到天数: 101 天

    连续签到: 1 天

    [LV.6]渐入佳境

    14

    主题

    626

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    14407

    最佳新人热心会员

    QQ
    发表于 2016-1-17 19:36:28 | 显示全部楼层
    不能用不能用
    其实我就只会一点点的PS
  • TA的每日心情
    心跳
    2016-5-4 09:39
  • 签到天数: 63 天

    连续签到: 2 天

    [LV.6]渐入佳境

    16

    主题

    494

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    12595

    最佳新人热心会员

    QQ
     楼主| 发表于 2016-1-18 22:21:42 | 显示全部楼层
    放到dw里替换图片,在自定义页里预览
    痛并快乐着---祸兮,福之所倚,福兮,祸之所伏!相生相克,变幻无常!

    该用户从未签到

    0

    主题

    1

    帖子

    1001

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    1001

    发表于 2016-4-12 17:53:43 | 显示全部楼层
    为什么会错位啊

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


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

  • TA的每日心情
    抱抱
    2016-11-23 10:46
  • 签到天数: 135 天

    连续签到: 1 天

    [LV.7]炉火纯青

    9

    主题

    887

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    31914

    淘宝皇冠店美工最佳新人热心会员

    QQ
    发表于 2016-4-12 18:11:37 | 显示全部楼层
    好复杂的感觉

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-8 06:19 , Processed in 0.124595 second(s), 23 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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