淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2484|回复: 13
收起左侧

【神奇的“悬”浮代码】东东分享之★群魔乱舞★包括PSD哦

[复制链接]
  • TA的每日心情
    加油
    2015-3-20 02:26
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初学乍练

    8

    主题

    54

    帖子

    3434

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3434

    发表于 2015-3-20 02:46:54 | 显示全部楼层 |阅读模式
    今天来讨论些什么东西呢?-------东东大声的告诉你,那就是神奇的“”浮


    但是,这个悬字是打了引号的哈(别问我为神马打引号,你们看完就晓得了!)


    ------路人甲:那么使用“这货色”可以拿来干嘛呢?----------(问得好!鼓掌)
    ------楼主:用了这类代码,当然可以实现“悬”浮咯.....

    ————————————————————————————————————————————————————
    闲话少说进入主题

    本代码所演示的缩略图如下图:

    (本帖子也给大家提供了我设计时的PSD源文件,拿给你们想肿么改就肿么改------楼主是不是很贴心呀?----我都被我感动啦!555555~ing....)

    这个代码本身都有哪些效果呢?
    1.淘宝C店旺铺的全屏展示!(------还在用950模块做海报图的小伙伴赶紧拿去试试全屏高大上的赶脚)
    2.图片和图片的重复叠加,也就是通过代码图片上还可以叠加图片哦!(利用的是代码中的footer-more-trigger这个属性哦)
    3.云朵的悬浮(------赶紧拿去试试,看看是不是悬浮着的,不然说我欺负你们书读得少,骗你们)
    4.喜鹊飞翔(-------绝对童叟无欺,真的在飞,还飞得贼快呢!)
    5.星空的动感移动(--------“此处楼主找不到语言来形容”)

    路人乙:楼主,悬浮呢?说好的悬浮呢????!!!!你在欺骗我们吗?
    楼主:云不是悬着的吗?这肯定是悬浮....嘿嘿
    路人乙:那叫做漂浮,不叫悬浮啊!!
    楼主:好吧我读书少...就将就下啦,漂浮就漂浮嘛!
    路人乙:你过来我保证不打死你....@#%&#。。。。
    路人乙:那你的帖子标题怎么叫做“群魔轮舞”给我一个合理的解释?
    楼主:次奥,星空移动+云朵飘动+鸟儿飞翔,这么动感的场景能不叫群魔乱舞吗?
    -----------------------------------------------------------------------------------------------------------------------------------------------
    哈哈,好啦代码送上,大家可以拿到自己的店铺去试试

    (千万记得把代码中的图片地址改了哈!或者嫌弃麻烦直接把那个压缩包里面的HTML文件打开预览


    1. <div  style="height:600px; overflow:hidden;">
    2.      <div class="footer-more-trigger" style="width:1920px;height:600px;top:0px;padding:0px;border:none;left:50%;z-index:1;">
    3.             <div class="footer-more-trigger" style="width:1920px;height:600px;padding:0px;border:none;left:-50%;z-index:1;">
    4.             
    5.             <div style="width:1920px; height:600px;">
    6.             
    7.              <!--这是星空背景开始-->
    8.             <marquee behavior="alternate"  direction="left" scrollamount="1" loop="-1" style="height:100%;width:100%;">
    9. <div style="width:1920xp; height:600px; z-index:1;background:url(http://img01.taobaocdn.com/imgextra/i1/760372102/TB2Dp5qcXXXXXXtXXXXXXXXXXXX_!!760372102.jpg);width:9999px;height:600px; "></div></marquee>
    10.              <!--这是星空背景结束-->
    11.             
    12.             
    13.             
    14.             <!--这是月亮人物开始-->
    15.             <div class="footer-more-trigger" style="width:1920px; height:600px; padding:0px; left:0px; top:0px;border:none; z-index:2;"><img src="http://img04.taobaocdn.com/imgextra/i4/760372102/TB23JmkcXXXXXbQXpXXXXXXXXXX_!!760372102.png" width="1920" height="600" /></div>
    16.              <!--这是月亮人物结束-->
    17.             
    18.             
    19.             <!--这是最下面的云层开始-->
    20.             <div class="footer-more-trigger" style="width:1920px; height:300px; padding:0px; left:0px; top:300px; z-index:3;border:none;">
    21.             <div style="width:1920px; height:300px;">
    22.             
    23.             <marquee behavior="alternate"  direction="left" scrollamount="15" loop="-1" style="height:100%;width:100%;">
    24. <div style="width:1920xp; height:300px;background:url(http://img02.taobaocdn.com/imgextra/i2/760372102/TB2dICmcXXXXXcKXXXXXXXXXXXX_!!760372102.png);width:9999px;height:300px; "></div></marquee>
    25.             
    26.             </div>
    27.           </div>
    28.             <!--这是最下面的云层结束-->
    29.             
    30.             
    31.             
    32.             <!--这是最上面的云层开始-->
    33.             <div class="footer-more-trigger" style="width:1920px; height:300px; padding:0px; left:0px; top:250px; z-index:4;border:none;">
    34.             <div style="width:1920px; height:300px;">
    35.             
    36.             <marquee behavior="alternate"  direction="right" scrollamount="15" loop="-1" style="height:100%;width:100%;">
    37. <div style="width:1920xp; height:300px;background:url(http://img02.taobaocdn.com/imgextra/i2/760372102/TB2dICmcXXXXXcKXXXXXXXXXXXX_!!760372102.png);width:9999px;height:300px; "></div></marquee>
    38.             
    39.             </div>
    40.           </div>
    41.            <!--这是最上面的云层结束-->
    42.             
    43.              <!--这是喜鹊开始-->
    44.              <div class="footer-more-trigger" style="width:1920px; height:365px; padding:0px; left:0px; top:0px; border:none; z-index:5">
    45.              <div style="width:1920px; height:365px;">
    46.              <div style="height:368px;width:1920px;-webkit-transform:rotate(-10deg);transform:rotate(0deg);">
    47. <marquee behavior="scroll" direction="right" loop="-1" scrollamount="20">
    48. <div style="width:999999px;height:368px;margin-top:50px;"> <div style="background:url(http://img02.taobaocdn.com/imgextra/i2/760372102/TB24j5ncXXXXXaYXXXXXXXXXXXX_!!760372102.png) repeat-x;width:999999px;height:368px;margin-left:2100px;"> </div> </div> </marquee>
    49. </div>
    50.              </div>
    51.             
    52.             
    53.              </div>
    54.              <!--这是喜鹊结束-->
    55.             
    56.             
    57.             </div>
    58.            </div></div></div>
    复制代码

    大家预览的时候可能会发现一个问题:
    那就是为毛云朵鸟儿飘的贼快啊!追都追不到!



    这个问题我想说,不好意思,楼主他手贱私自把速度调高了!

    大家可以通过对代码中每个元素对应的scrollamount="20"数值改小一点啦

    -----------------------------------------------------------------------------------------------------------------------------------------

    关于这个文件的压缩包(包括源代码/PSD文件/分类图)大家就去我的百度云盘下载吧
    链接:http://pan.baidu.com/s/1dDnM2Gx 密码:u5yb(楼主等级低没办法传大文件的呢,小伙伴们理解哦)


    本来打算对这篇文章做一个回复后才能看得设置的,但是吧,还是算了!
    只要大家喜欢,愿意顶一下就顶吧,愿意评论就评论吧

    还有哦,喜欢东东这种深井冰风格帖子的朋友可以加我好友,或者去我店铺留言给我建议http://gbjddd.taobao.com
    东东很乐意去和大家在愉快的氛围中分享一些淘宝装修的经验的!!
    (ps:这仅仅是我的第一篇和大家见面的新人帖子,小伙伴要记得它不是唯一哦!)


    就算没有美工,你的网店也可以狂拽炫酷
    东东的网店:http://gbjddd.taobao.com
  • TA的每日心情
    加油
    2015-3-20 02:26
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初学乍练

    8

    主题

    54

    帖子

    3434

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3434

     楼主| 发表于 2015-3-20 02:51:46 | 显示全部楼层
    我自己先把沙发霸占了再说 嘿嘿

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


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

  • TA的每日心情
    无奈
    2016-1-27 13:48
  • 签到天数: 89 天

    连续签到: 1 天

    [LV.6]渐入佳境

    31

    主题

    599

    帖子

    6749

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    6749

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

    发表于 2015-3-20 08:35:43 | 显示全部楼层
    赶紧去试试 感谢楼主分享

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


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

  • TA的每日心情
    臭美
    2016-4-27 00:04
  • 签到天数: 98 天

    连续签到: 3 天

    [LV.6]渐入佳境

    1

    主题

    99

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    18462

    QQ
    发表于 2015-3-20 08:45:38 | 显示全部楼层
    我也去试试:
    8888188.taobao.com
  • TA的每日心情
    吐舌头
    2016-7-9 23:53
  • 签到天数: 406 天

    连续签到: 1 天

    [LV.9]已臻大成

    2

    主题

    304

    帖子

    7万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    73417

    发表于 2015-3-20 08:47:52 | 显示全部楼层
    很牛逼的样子!必须试一试啊!

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


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

  • TA的每日心情
    吐舌头
    2016-8-18 09:10
  • 签到天数: 325 天

    连续签到: 1 天

    [LV.8]自成一派

    27

    主题

    636

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43157

    发表于 2015-3-20 09:47:22 | 显示全部楼层
    好厉害的样子

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


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

  • TA的每日心情
    加油
    2015-3-20 02:26
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初学乍练

    8

    主题

    54

    帖子

    3434

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3434

     楼主| 发表于 2015-3-20 10:15:05 | 显示全部楼层
    蓝大蓝 发表于 2015-3-20 08:35
    赶紧去试试 感谢楼主分享

    谢谢 小伙伴的支持!!!
    就算没有美工,你的网店也可以狂拽炫酷
    东东的网店:http://gbjddd.taobao.com
  • TA的每日心情
    加油
    2015-3-20 02:26
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初学乍练

    8

    主题

    54

    帖子

    3434

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3434

     楼主| 发表于 2015-3-20 10:15:59 | 显示全部楼层

    哈哈!!厉害说不上啦,只是会得稍微多那么一丁点而已!

    就算没有美工,你的网店也可以狂拽炫酷
    东东的网店:http://gbjddd.taobao.com
  • TA的每日心情
    加油
    2015-3-20 02:26
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初学乍练

    8

    主题

    54

    帖子

    3434

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3434

     楼主| 发表于 2015-3-20 10:17:03 | 显示全部楼层
    流风清音 发表于 2015-3-20 08:47
    很牛逼的样子!必须试一试啊!

    哈哈!!应该效果还不错的!值得一试哦!

    就算没有美工,你的网店也可以狂拽炫酷
    东东的网店:http://gbjddd.taobao.com
  • TA的每日心情
    臭美
    2014-11-10 08:45
  • 签到天数: 31 天

    连续签到: 1 天

    [LV.5]略有小成

    1

    主题

    25

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    18753

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

    发表于 2015-3-21 09:34:47 | 显示全部楼层
    感觉很牛逼

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-5 22:40 , Processed in 0.123117 second(s), 22 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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