分享

【聊代码】第十四集:移动标签(之二)

 情愫秋生 2018-06-02

 

聊代码(第十四集)移动标签(之二)

 

       上集里举了两个移动标签的例子,把常用的属性都用上了,朋友们可以很容易地套用,改一改移动方式和移动方向的属值,制作上移,下移,左移,右移的文字,这些,我不再举例,留给初学代码的朋友作为作业吧。举一反三,触类旁通。如果还能把文字移动改成图片移动,那就太好了。
       本集,仍然讨论移动标签,介绍几个稍微复杂,让文字移动有点花样,具有某种效果的代码。
       (一)跳动效果:

 

跳动效果

 

       代码:<div align="center"><marquee behavior="alternate" direction="up" style="height: 60px; width: 600px;"><font style="LINE-HEIGHT: 150%; FONT-FAMILY: 黑体; COLOR: #ffc20e; FONT-SIZE: 35pt"><b>跳动效果</b></font></marquee></div>

 

       代码解析:使用纵向来回往复移动标签。适当调低移动范围属性的高属值(height:60px;),即可获此效果。

 

       (二)摆动效果:

 

摆动效果

 

       代码:<div align="center"><marquee behavior="alternate" direction="right" style="height: 60px; width: 200px;"><font style="LINE-HEIGHT: 150%; FONT-FAMILY: 黑体; COLOR: #ffc20e; FONT-SIZE: 35pt"><b>摆动效果</b></font></marquee></div>

 

       代码解析:使用横向来回往复移动标签。适当调低移动范围属性的宽属值(width: 200px;),该属值略大于文字所占长度,即可获此效果。

 

       (三)跳摆效果:

 

跳摆效果

       代码:<div align="center"><marquee behavior="alternate" direction="up" style="height: 80px; width: 200px;"><marquee behavior="alternate" direction="right" style="height: 60px; width: 200px;"><font style="LINE-HEIGHT: 150%; FONT-FAMILY: 黑体; COLOR: #0000ff; FONT-SIZE: 35pt"><b>跳摆效果</b></font></marquee></marquee></div>

 

       代码解析:跳动效果的标签和摆动效果的标签组合,即可获此效果。

 

       (四)摇摆上下效果:

 

摇摆上下效果

       代码:<div align="center"><marquee behavior="alternate" direction="up" style="height: 460px; width: 300px;"><marquee behavior="alternate" direction="right" style="height: 60px; width: 300px;"><font style="LINE-HEIGHT: 150%; FONT-FAMILY: 黑体; COLOR: #ffc20e; FONT-SIZE: 35pt"><b>摇摆上下效果</b></font></marquee></marquee></div>

 

       代码解析:纵向来回往复移动标签和横向来回往复移动标签组合。适当调整移动范围属性的属值(前者的height要高值),即可获此效果。

 

       (五)斜向移动效果:

 

斜向移动效果

       代码:<div align="right"><marquee direction="up" style="height: 160px; width:750px;"><marquee direction="right" style="height: 160px; width: 750px;"><font style=" FONT-FAMILY: 黑体; COLOR: #ffc20e; FONT-SIZE: 35pt"><b>斜向移动效果</b></font></marquee></marquee></div>

 

       代码解析:纵向移动和横右移动双标签组合。适当调试移动范围属性的属值(height:160px;width:750px;),即可获此效果。

 

       (六)横排字分移左右效果:

 

横排字分移左右效果横排字分移左右效果

 

       代码:<div align="center"><marquee direction="left" scrollamount="6" style="height:60px;width:350px;"><span style="font-size:60px;color:#ff0000;font-family:黑体;">横排字分移左右效果</span></marquee><marquee direction="right" scrollamount="6" style="height:60px;width:350px;"><span style="font-size:60px;color:#ffc20e;font-family:黑体;">横排字分移左右效果</span></marquee></div>

 

       代码解析:向左移动和向右移动双标签组合。适当调试移动范围属性的属值(height:80px;width:350px;),即可获此效果。

 

       (七)竖排字分移左右效果:

 

















       代码:<div align="center"><marquee direction="left" scrollamount="6" style="height:310px;width:350px;"><span style="font-size:30px;color:#ffc20e;font-family:黑体;">竖<br /> 排<br /> 字<br /> 分<br /> 移<br /> 左<br /> 右<br /> 效<br /> 果</span></marquee><marquee direction="right" scrollamount="6" style="height:310px;width:350px;"><span style="font-size:30px;color:#ffc20e;font-family:黑体;">竖<br /> 排<br /> 字<br /> 分<br /> 移<br /> 左<br /> 右<br /> 效<br /> 果</span></marquee></div> </span></span></p>

 

       代码解析:把横排文字分移左右的代码作修改:①避免太长,改小字号;②一字一换行,添加换行标签,将文字变为竖行排列;③适当调试移动范围属性的属值(height:310px;width:350px;),height若过小,下面的字会露不出来,width若过大,两排文字会不在同一高度,把这个必须调得适当,即可获此效果。

 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多