淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

侧边悬浮及锚点代码

[复制链接]

该用户从未签到

2

主题

3

帖子

1965

积分

注册会员

阅读权限: 20

Rank: 2

积分
1965

发表于 2015-10-30 09:32:33 | 显示全部楼层 |阅读模式
这是一个侧边快捷分类栏悬浮及相应锚点的代码,不过要注意一点,淘宝对悬浮目前是屏蔽的,因此要在“模块市场”购买“盛夏在线建站工具JS动画全屏装修”这个模块才能实现哦。



以下为悬浮代码:
<div class="sx_abs group_19 sx_float sx_hover sx_hover_group sx_opacity100" style="left: 1000px(悬浮距左边距离); top: 20px; width: 120px; height: 348px; overflow: visible; border: 0px solid rgb(0, 0, 0); z-index: 99; background-color: transparent;" data-sxhover-groupid="19">
<div class="img_1 sx_hover sx_abs sx_opacity100" style="z-index:10;overflow:hidden;display:block;left:0px;top:140px(悬浮距顶部距离);width:98px;height:348px;">

<div style="width:98px;height:348px;background-image:url(背景图片);">
        <div style="float:left;margin-top:88px;margin-left:20px;width:60px;height:18px;">
                <a href="#ms"> <span style="color:rgb(255,255,0);font-size:14px;font-family:simhei;">双11秒杀</span></a>
        </div>
        <div style="float:left;margin-top:6px;margin-left:19px;width:60px;height:18px;">
                 <a href="#bm"><span style="color:rgb(255,255,0);font-size:14px;font-family:simhei; ">双11必买</span></a>
        </div>
        <div style="float:left;margin-top:7px;margin-left:20px;width:60px;height:18px;">
                <a href="#hot"> <span style="color:rgb(255,255,0);font-size:14px;font-family:simhei;">人气推荐</span></a>
        </div>
        <div style="float:left;margin-top:6px;margin-left:33px;width:40px;height:18px;">
                 <a href="#cg"><span style="color:rgb(255,255,0);font-size:14px;font-family:simhei;">炒锅</span></a>
        </div>
        <div style="float:left;margin-top:7px;margin-left:33px;width:40px;height:18px;">
                <a href="#zg"> <span style="color:rgb(255,255,0);font-size:14px;font-family:simhei;"> 蒸锅 </span></a>
        </div>
        <div style="float:left;margin-top:6px;margin-left:28px;width:50px;height:18px;">
                <a href="#ssh"> <span style="color:rgb(255,255,0);font-size:14px;font-family:simhei;">  烧水壶 </span></a>
        </div>
        <div style="float:left;margin-top:6px;margin-left:28px;width:50px;height:18px;">
                <a href="#ylg"> <span style="color:rgb(255,255,0);font-size:14px;font-family:simhei;"> 压力锅 </span></a>
        </div>
        <div style="float:left;margin-top:7px;margin-left:28px;width:50px;height:18px;">
                 <a href="#tng"><span style="color:rgb(255,255,0);font-size:14px;font-family:simhei;">汤奶锅</span></a>
        </div>
        <div style="float:left;margin-top:6px;margin-left:20px;width:60px;height:18px;">
                <a href="#bwtg"> <span style="color:rgb(255,255,0);font-size:14px;font-family:simhei;">  保温提锅 </span></a>
        </div>
        <div style="float:left;margin-top:7px;margin-left:20px;width:60px;height:18px;">
                <a href="#cfyj"> <span style="color:rgb(255,255,0);font-size:14px;font-family:simhei;"> 厨房用具 </span></a>
        </div>
        <div style="float:left;margin-top:6px;margin-left:26px;width:60px;height:18px;">
                <a href="#" target="_self"><span style="color:#816400;font-size: 12px; font-family: simhei;">返回首页</span> </a>
               
        </div>
</div>

</div>
</div>




以下为相应锚点添加代码:
<div style="height:3200px;">
        <div style="padding:0px;left:50%;top:auto;" class="sn-simple-logo">
                <div style="padding:0px;left:-960px;top:auto;" class="sn-simple-logo">
                        <div style="width:1920px;height:3200px;float:left;display:block;" class="-_-">
                       

<a name="ms"> </a>   <!-- 这里的锚点命名要和悬浮的链接命名一至 -->
<div style="width:1500px; height:800px; background:#CCCC00">  
  双11秒杀  
</div>
<a name="bm"> </a>
<div style="width:1500px; height:800px; background:#006666">
  双11必买
</div>

  <a name="hot"> </a>
<div style="width:1500px; height:800px; background:#FF0000">
人气推荐
</div>

  <a name="cg"> </a>
<div style="width:1500px; height:800px; background:#0033CC">
炒锅
</div>


</div>

</div></div></div>



悬浮 代码.rar

964 Bytes, 下载次数: 45, 下载积分: 美工币 -2

锚点代码.rar

450 Bytes, 下载次数: 14, 下载积分: 美工币 -2

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


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

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

    连续签到: 59 天

    [LV.7]炉火纯青

    1

    主题

    359

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51271

    最佳新人

    QQ
    发表于 2015-10-30 09:59:27 | 显示全部楼层
    淘宝美工论坛Taobaoux.com,全国最大的淘宝美工人才基地
  • TA的每日心情
    抱抱
    2016-11-25 09:53
  • 签到天数: 629 天

    连续签到: 2 天

    [LV.9]已臻大成

    42

    主题

    574

    帖子

    15万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    152766

    最佳新人活跃会员热心会员

    发表于 2015-10-30 10:09:33 | 显示全部楼层
    确定能用?

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


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

  • TA的每日心情
    不爽
    2016-6-6 11:20
  • 签到天数: 6 天

    连续签到: 1 天

    [LV.2]登堂入室

    1

    主题

    48

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    17275

    发表于 2015-10-30 10:23:35 | 显示全部楼层
    能用不?

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


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

  • TA的每日心情
    抱抱
    2016-10-14 17:55
  • 签到天数: 90 天

    连续签到: 1 天

    [LV.6]渐入佳境

    17

    主题

    585

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    23827

    发表于 2015-10-30 11:58:28 | 显示全部楼层
    你何不把怎么弄夏夏也教他们

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


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

  • TA的每日心情
    抱抱
    2016-9-28 20:20
  • 签到天数: 158 天

    连续签到: 1 天

    [LV.7]炉火纯青

    18

    主题

    662

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    36323

    最佳新人热心会员

    发表于 2015-10-30 12:09:39 | 显示全部楼层
    需要订购盛夏建站才能使用
    http://shop103653300.taobao.com
  • TA的每日心情

    2015-11-16 15:09
  • 签到天数: 73 天

    连续签到: 1 天

    [LV.6]渐入佳境

    11

    主题

    90

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    24835

    最佳新人

    发表于 2015-10-30 16:04:38 | 显示全部楼层
    不买有没有其他办法了啊

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


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

  • TA的每日心情

    2015-11-16 15:09
  • 签到天数: 73 天

    连续签到: 1 天

    [LV.6]渐入佳境

    11

    主题

    90

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    24835

    最佳新人

    发表于 2015-10-30 17:04:48 | 显示全部楼层
    买了也不能用啊,怎么加position:fixed;,天猫加上去就屏蔽了

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


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

  • TA的每日心情
    不爽
    2013-8-24 09:11
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初学乍练

    10

    主题

    486

    帖子

    8万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    89917

    热心会员最佳新人活跃会员

    发表于 2015-10-30 17:32:30 | 显示全部楼层
    改id加模块 然后用这个代码就可以了··~~~~

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-5 00:23 , Processed in 0.153895 second(s), 35 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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