淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 641|回复: 10
收起左侧

[装修相关] 求!鼠标经过下面的内容改变的效果

[复制链接]
  • TA的每日心情
    臭美
    2016-11-18 09:56
  • 签到天数: 90 天

    连续签到: 1 天

    [LV.6]渐入佳境

    5

    主题

    14

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    14191

    发表于 2016-6-3 16:49:49 | 显示全部楼层 |阅读模式
    哪位大神会做这种效果  鼠标经过内容改变 1.png 2.png 3.png 4.png 5.png 效果参考地址:https://ecovacssz.tmall.com/p/rd977297.htm?spm=a220o.1000855.w5001-11919141881.11.nP3573&scene=taobao_shop


    会的大神帮帮忙

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


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

  • TA的每日心情
    心跳
    昨天 09:20
  • 签到天数: 1133 天

    连续签到: 12 天

    [LV.10]功行圆满

    12

    主题

    806

    帖子

    22万

    积分

    高级会员

    阅读权限: 50

    出来混迟早要还的~

    Rank: 8Rank: 8

    积分
    229609

    淘宝皇冠店美工天猫美工最佳新人热心会员宣传达人活跃会员优秀版主

    发表于 2016-6-4 10:09:39 | 显示全部楼层
    很简单 弹出层~ 百度找下 盛夏在线编辑就有了~
    代小学生打架 做作业~
    回复 支持 1 反对 0

    使用道具 举报

  • TA的每日心情
    加油
    2016-10-27 15:47
  • 签到天数: 20 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    18

    主题

    710

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    56733

    发表于 2016-6-3 17:33:51 | 显示全部楼层

    回帖奖励 +10

    TAB
    TAB
    TAB
    胆小勿点!★大神群308158281
  • TA的每日心情
    吐舌头
    2016-11-10 13:55
  • 签到天数: 251 天

    连续签到: 1 天

    [LV.8]自成一派

    3

    主题

    346

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    53969

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

    发表于 2016-6-3 17:49:40 | 显示全部楼层
    这是轮播的一种,你可以用在线布局添加轮播,然后设置不自动轮播,再把触点修改成上面的圆形图片,分别是两张,一张灰色,一张黑色。
    PS美工交流群  283995557
  • TA的每日心情
    臭美
    3 天前
  • 签到天数: 169 天

    连续签到: 1 天

    [LV.7]炉火纯青

    1

    主题

    97

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    21371

    发表于 2016-6-3 19:12:41 | 显示全部楼层
    dw直接做就可以了
    来自安卓客户端来自安卓客户端

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


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

  • TA的每日心情
    抱抱
    2016-7-8 17:09
  • 签到天数: 7 天

    连续签到: 1 天

    [LV.3]武林新秀

    1

    主题

    18

    帖子

    1237

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    1237

    发表于 2016-6-3 20:16:09 | 显示全部楼层
    不清楚,俺是新人
    注册个账号重名的还真多
  • TA的每日心情
    臭美
    2016-11-18 09:56
  • 签到天数: 90 天

    连续签到: 1 天

    [LV.6]渐入佳境

    5

    主题

    14

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    14191

     楼主| 发表于 2016-6-4 08:23:58 | 显示全部楼层
    苏果 发表于 2016-6-3 17:49
    这是轮播的一种,你可以用在线布局添加轮播,然后设置不自动轮播,再把触点修改成上面的圆形图片,分别是两 ...

    听着就感觉好复杂。。。

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


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

  • TA的每日心情

    2 小时前
  • 签到天数: 209 天

    连续签到: 2 天

    [LV.7]炉火纯青

    31

    主题

    1312

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    38205

    热心会员最佳新人

    QQ
    发表于 2016-6-4 11:37:31 | 显示全部楼层
    好像明白一点
    当断不断,必受其乱
  • TA的每日心情

    2016-6-24 15:39
  • 签到天数: 100 天

    连续签到: 1 天

    [LV.6]渐入佳境

    6

    主题

    236

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    35184

    发表于 2016-6-4 15:07:24 | 显示全部楼层
    这个可以算做 轮播跟弹出层的结合   个人觉得弹出层做的话 简单点,  这个有个傻瓜式的代码  你可以研究一下,首先你的大脑里面应该有一个模型,就是布局框架,不动的在哪里,需要动的在哪里,鼠标经过A会弹出A+,经过B会出现B+,这个代码 可以实现你这个弹出效果,但是布局方面就挺麻烦的!
    1. <div class="popup_xiaohu" style="height:200px; width:200px; background:#999999;"><!--这个div里面就写你鼠标移动的到的地方的内容-->
    2.   <div class="J_TWidget" data-widget-type="Popup" data-widget-config="{'trigger':'.popup_xiaohu',
    3.   'align':{
    4. 'node':'.popup_xiaohu',
    5. 'points':['cc','cc'],
    6. 'offset':[0,0]}}" style="display:none;">
    7.     <div style="height:180px; width:180px; background:#00FF00; border:3px solid  #FF0000;"></div>
    8.     <!--这个div里面就写你鼠标移动后弹出的内容-->
    9.   </div>
    10. </div>
    11. <!--左中右先在前面-->
    复制代码

    至于轮播的做法,我们常见的轮播都是自动轮播 auto属性,在这里轮播为不自动,鼠标经过控制柄或者点击,才触发轮播效果!
    好像有一个软件附送邀请码的哦!
  • TA的每日心情

    2016-6-11 16:25
  • 签到天数: 192 天

    连续签到: 1 天

    [LV.7]炉火纯青

    23

    主题

    553

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    27818

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

    QQ
    发表于 2016-6-4 16:18:03 | 显示全部楼层
    这个代码拿去,自己修改吧
    1. <div style="height:360px;background-color:#FFF;">
    2.         <div class="J_TWidget" data-widget-config="{" data-widget-type="Tabs" style="height:360px;">
    3.                 <div class="dm_a" style="height:260px;">
    4.                         <div data-widget-config="{&quot;easing&quot;:&quot;backIn&quot;,&quot;interval&quot;:4,&quot;navCls&quot;:&quot;dms&quot;,&quot;contentCls&quot;:&quot;dmcontent&quot;,&quot;prevBtnCls&quot;:&quot;prev&quot;,&quot;autoplay&quot;:false,&quot;nextBtnCls&quot;:&quot;next&quot;,&quot;circular&quot;:false,&quot;duration&quot;:1,&quot;activeTriggerCls&quot;:&quot;hidden&quot;,&quot;effect&quot;:&quot;scrollx&quot;,&quot;viewSize&quot;:[750],&quot;triggerType&quot;:&quot;mouse&quot;}" data-widget-type="Carousel" class="J_TWidget ks-switchable-panel-internal206">
    5.             <div style="height:100px;width:750px;"><img src="http://gdp.alicdn.com/imgextra/i4/280728742/TB2E_uldVXXXXb2XpXXXXXXXXXX_!!280728742.jpg" alt=" A_r1_c1.jpg" width="750" height="100"/></div>
    6.                                 <div style="height:360px;width:750px;overflow:hidden;padding:0px;margin:0px;background:transparent none repeat scroll 0% 0%;position:relative;" class="dm_UG">
    7.                                         <ul class="dmcontent" style="height:360px;width:999999px;padding:0px;margin-top:50px;left:0px;">
    8.                                                 <li class="item ks-switchable-panel-internal211" style="width:750px;height:210px;background:transparent none repeat scroll 0% 0%;display:block;float:left;">
    9.                                                          <img src="http://gdp.alicdn.com/imgextra/i3/280728742/TB2MUqzdVXXXXc2XXXXXXXXXXXX_!!280728742.jpg" alt=" A_r2_c1.jpg" width="750" height="210" />
    10.                                                 </li>
    11.                                                 <li class="item ks-switchable-panel-internal211" style="width:750px;height:210px;background:transparent none repeat scroll 0% 0%;display:block;float:left;">
    12.                                                          <img src="http://gdp.alicdn.com/imgextra/i4/280728742/TB2T1CQdVXXXXXhXXXXXXXXXXXX_!!280728742.jpg" alt=" B_r2_c1.jpg" width="750" height="210" />
    13.                                                 </li>
    14.                                                 <li class="item ks-switchable-panel-internal211" style="width:750px;height:210px;background:transparent none repeat scroll 0% 0%;display:block;float:left;">
    15.                                                          <img src="http://gdp.alicdn.com/imgextra/i4/280728742/TB2oA1sdVXXXXaDXpXXXXXXXXXX_!!280728742.jpg" alt=" C.jpg" />
    16.                                                 </li>
    17.                                                 <li class="item ks-switchable-panel-internal211" style="width:750px;height:210px;background:transparent none repeat scroll 0% 0%;display:block;float:left;">
    18.                                                          <img src="http://gdp.alicdn.com/imgextra/i2/280728742/TB2AdOMdVXXXXX6XXXXXXXXXXXX_!!280728742.jpg" alt=" D.jpg" />
    19.                                                 </li>
    20.                                                 <li class="item ks-switchable-panel-internal211" style="width:750px;height:210px;background:transparent none repeat scroll 0% 0%;display:block;float:left;">
    21.                                                          <img src="http://gdp.alicdn.com/imgextra/i4/280728742/TB2E_uldVXXXXb2XpXXXXXXXXXX_!!280728742.jpg" alt=" E_r2_c1.jpg" />
    22.                                                 </li>
    23.                                         </ul>
    24.                                 </div>
    25.                                 <div class="footer-more footer-more-trigger" style="padding:0px;border:none;left:0;top:0;display:block;margin-top:100px">
    26.                                         <div class="footer-more footer-more-trigger" style="z-index:99;width:750px;height:50px;padding:0px;border:none;left:0;top:0;background:none;">
    27.                                                 <ul class="dms" style="width:auto;height:50px;overflow:hidden;">
    28.                                                         <li class="ks-switchable-trigger-internal210 hidden" style="display:inline;background:none;margin:0 0px;cursor:pointer;float:left;">
    29.                                                                  <img src="http://gdp.alicdn.com/imgextra/i2/280728742/TB2ORCudVXXXXahXpXXXXXXXXXX_!!280728742.jpg" alt=" A_r1_c1.jpg" width="150" height="50" />
    30.                                                         </li>
    31.                                                         <li class="ks-switchable-trigger-internal210" style="display:inline;background:none;margin:0 0px;cursor:pointer;float:left;">
    32.                                                                  <img src="http://gdp.alicdn.com/imgextra/i2/280728742/TB2ORCudVXXXXahXpXXXXXXXXXX_!!280728742.jpg" alt=" A_r1_c1.jpg" width="150" height="50" />
    33.                                                         </li>
    34.                                                         <li class="ks-switchable-trigger-internal210" style="display:inline;background:none;margin:0 0px;cursor:pointer;float:left;">
    35.                                                                  <img src="http://gdp.alicdn.com/imgextra/i2/280728742/TB2ORCudVXXXXahXpXXXXXXXXXX_!!280728742.jpg" alt=" A_r1_c1.jpg" width="150" height="50" />
    36.                                                         </li>
    37.                                                         <li class="ks-switchable-trigger-internal210" style="display:inline;background:none;margin:0 0px;cursor:pointer;float:left;">
    38.                                                                  <img src="http://gdp.alicdn.com/imgextra/i2/280728742/TB2ORCudVXXXXahXpXXXXXXXXXX_!!280728742.jpg" alt=" A_r1_c1.jpg" width="150" height="50" />
    39.                                                         </li>
    40.                                                         <li class="ks-switchable-trigger-internal210" style="display:inline;background:none;margin:0 0px;cursor:pointer;float:left;">
    41.                                                                  <img src="http://gdp.alicdn.com/imgextra/i2/280728742/TB2ORCudVXXXXahXpXXXXXXXXXX_!!280728742.jpg" alt=" A_r1_c1.jpg" width="150" height="50" />
    42.                                                         </li>
    43.                                                 </ul>
    44.                                         </div>
    45.                                         <div class="footer-more footer-more-trigger" style="z-index:98;width:750px;height:50px;padding:0px;border:none;left:0;top:0;">
    46.                                                 <ul class="dmb" style="width:auto;height:50px;overflow:hidden;">
    47.                                                         <li style="display:inline;background:none;margin:0 0px;cursor:pointer;float:left;">
    48.                                                                  <img src="http://gdp.alicdn.com/imgextra/i4/280728742/TB29niPdVXXXXXlXXXXXXXXXXXX_!!280728742.jpg" alt=" B_r1_c1.jpg" width="150" height="50" />
    49.                                                         </li>
    50.                                                         <li style="display:inline;background:none;margin:0 0px;cursor:pointer;float:left;">
    51.                                                                  <img src="http://gdp.alicdn.com/imgextra/i4/280728742/TB29niPdVXXXXXlXXXXXXXXXXXX_!!280728742.jpg" alt=" B_r1_c1.jpg" width="150" height="50" />
    52.                                                         </li>
    53.                                                         <li style="display:inline;background:none;margin:0 0px;cursor:pointer;float:left;">
    54.                                                                  <img src="http://gdp.alicdn.com/imgextra/i4/280728742/TB29niPdVXXXXXlXXXXXXXXXXXX_!!280728742.jpg" alt=" B_r1_c1.jpg" width="150" height="50" />
    55.                                                         </li>
    56.                                                         <li style="display:inline;background:none;margin:0 0px;cursor:pointer;float:left;">
    57.                                                                  <img src="http://gdp.alicdn.com/imgextra/i4/280728742/TB29niPdVXXXXXlXXXXXXXXXXXX_!!280728742.jpg" alt=" B_r1_c1.jpg" width="150" height="50" />
    58.                                                         </li>
    59.                                                         <li style="display:inline;background:none;margin:0 0px;cursor:pointer;float:left;">
    60.                                                                  <img src="http://gdp.alicdn.com/imgextra/i4/280728742/TB29niPdVXXXXXlXXXXXXXXXXXX_!!280728742.jpg" alt=" B_r1_c1.jpg" width="150" height="50" />
    61.                                                         </li>
    62.                                                 </ul>
    63.                                         </div>
    64.                                 </div>
    65.                         </div>
    66.                 </div>
    67.                
    68.         </div>
    69. </div>
    复制代码

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

    本版积分规则

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

    GMT+8, 2016-12-10 13:02 , Processed in 0.146355 second(s), 25 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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