css之marquee，让你的文字跳起来

最新推荐文章于 2023-10-17 08:01:05 发布

weixin_30719711

最新推荐文章于 2023-10-17 08:01:05 发布

阅读量72

点赞数

原文链接：http://www.cnblogs.com/newromantics/p/5236436.html

版权

　　当你看到别人的网页文字动态效果美美哒，而你却为不会使用js而遗憾时，不妨看看这篇文章，教你如何只用css即可实现漂亮的文字滑动效果。

1.问题提出：

　　在一个特定大小的div中,如何让p标签内的内容动态滑动。如下面所给的图片所示

　　让实验室简介的内容动态的显现出来。

2.解决方法

　　使用css的marquee属性即可实现动态效果。不多说，先给出代码：

 1 <div class="library_text">
 2             <h3>实验室简介</h3>
 3             <hr>
 4             <marquee style="height: 140px;" scrollamount="2" direction="up" onmouseover=this.stop() onmouseout=this.start()>
 5                 <center><font face="仿宋" color="#008000" size="4" ></font ></center >
 6                 <br>
 7                 <div>
 8                     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;综合业务网理论及关键技术国家重点实验室于1989年由国家计委批准立项，1991年开始建设。实验室于1995年10月通过国家验收，并正式投入开放运行，分别于2002年、2007年和2012年三次通过国家评估。现任实验室主任高新波教授，学术委员会主任于全院士。实验室依托于信息与通信工程以及军队指挥学两个国家一级学科，目前主要研究方向包括“通信网络体系架构及关键技术”，“高效信源和信道编码技术”，“信息传输理论与技术”，“信息安全及密码理论与技术”。</p>
 9                 </div>    
10             </marquee>
11         </div>

　　感兴趣的读者可以复制代码，查看一下效果。

3.详解marquee属性

　　align：--对其方式 LEFT，CENTER，RIGHT，TOP，BOTTOM ；
　　Behavior：--用于设定滚动的方式，主要由三种方式：
　　behavior="scroll"：--表示由一端滚动到另一端；
　　behavior="slide"：--表示由一端快速滑动到另一端，且不再重复；
　　behavior="alternate"：默认值 --表示在两端之间来回滚动。

　　innercode：--设置或获取位于对象起始和结束标签内的 code
　　innerText：--设置或获取位于对象起始和结束标签内的文本
　　scrollLeft：-- 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
　　scrollTop： --设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
　　注意：没有scrollRigh和scrollDown
　　scrollDelay-- 设置或获取字幕滚动的速度
　　要创建垂直滚动的字幕，请将其 scrollLeft 属性设定为 0。
　　要创建水平滚动的字幕，请将其 scrollTop 属性设定为 0，这将覆盖任何脚本设置
　　

　　scrollHeight：-- 获取对象的滚动高度
　　scrollAmount：--设置或获取介于每个字幕绘制序列之间的文本滚动像素数
　　offsetTop：--获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
　　offsetLeft：--获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
　　offsetHeight：--获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
　　setInterval：(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式
　　clearInterval：使用 setInterval 方法取消先前开始的间隔事件。

　　οnmοuseοver="this.stop()" οnmοuseοut="this.start() --鼠标响应：即鼠标指向就停，离开继续.

转载于:https://www.cnblogs.com/newromantics/p/5236436.html