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

1.问题提出:

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

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

2.解决方法

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

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

  onmouseover="this.stop()" onmouseout="this.start()   --鼠标响应:即鼠标指向就停,离开继续.

css之marquee,让你的文字跳起来的更多相关文章

  1. amazeui学习笔记--css(基本样式3)--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  2. CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果

    本文将介绍一个小技巧,通过混合模式 mix-blend-mode 巧妙的实现文字的镂空波浪效果. 起因 一日,一群友私聊问我.如何使用 CSS 实现下述效果,一个文字的波浪效果: 我当时想都没想,就回 ...

  3. CSS实现单行与多行文字省略(truncation)

    在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字 ...

  4. css实现固定高度及未知高度文字垂直居中的完美解决方案

    在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而我们最容易会想到使用表格来垂直居中,或者如果是单行文字 ...

  5. css如何实现背景透明,文字不透明?

    之前做了个半透明弹层,但设置背景半透明时,子元素包含的字体及其它元素也都变成了半透明.对opacity这个属性认识的不透彻,在这里做一些总结,方便以后使用.   背景透明,文字不透明的解决方法:   ...

  6. 用css实现在横线中间插入文字

    在一些登录或者注册界面中常常可看到,一个大框框上面的横线中有插入文字,大概示意图如下: 这种现象其实是相对位置作用的结果,可以通过相对定位,是某元素恰好出现在div的边框上. position: re ...

  7. CSS 两边是线 中间是文字的效果

    刚开始做的时候 想了一下 这个是怎么做出来的,后来在网上看到有个类似的效果,研究一下 <!DOCTYPE html> <html lang="en"> &l ...

  8. 利用css去除input按钮上的文字的几种方法

    相信很多时候input上的文字困扰着web前端开发者,必须要通过修改html代码中的value值才能清空按钮上的文字,但很多人不愿意去动html代码,一方面麻烦,另外主要的原因还在于保留文字对seo有 ...

  9. 前端css知识实现自动打字,文字滚动

    HTML部分: <div class="div1"> <div class="div2">文字文字文字文字文字文字文字文字文字文字文字文 ...

随机推荐

  1. 【Python排序搜索基本算法】之Dijkstra算法

    Dijkstra算法和前一篇的Prim算法非常像,区别就在于Dijkstra算法向最短路径树(SPT)中添加顶点的时候,是按照ta与源点的距离顺序进行的.OSPF动态路由协议就是用的Dijkstra算 ...

  2. swift开发笔记24 解决键盘遮挡输入框 的方法

    很简单,就是开始输入时把整个view的frame上移,也就是把y值减小就行了,至于减少多少自己调 ,也可以动态获取参见(http://blog.csdn.net/lengshengren/articl ...

  3. [转] 为什么医疗咨询服务公司Evolent Health仅用4年就华丽上市?

    让医疗主体,即医院和医生担任保险角色,完全控制保费,实现医疗机构的利益最大化.美国公司EvolentHealth帮助所有医院实现这一梦想. 不觉间,已步入2015的下半年.当国内还在讨论商业保险何时能 ...

  4. 4_Linux_文件压缩和解压指令

    3.4压缩解压命令.gz .tar.gz .zip .bz2 1)gzip 仅压缩文件 gzip命令用于压缩文件,英文原意为GNU zip,所在路径/bin/gzip,其语法格式为: gzip [文件 ...

  5. 05-XML遍历递归显示到TreeView上(XDocument类)

    1.XML文件(x1.xml): <?xml version="1.0" encoding="utf-8" ?> <itcast> &l ...

  6. <display>标签的几个属性

    <display>这个标签个人觉得挺强大的,但是用不好的话就会成为个累赘,下面给大家分享一下他的几个属性. none:表示此元素不会被显示. block:此元素将显示为块元素,前后会换行. ...

  7. memcache和activemq使用连接,然后close

    memcache和activemq使用连接,然后close

  8. 开启mysql慢查询日志并使用mysqldumpslow命令查看

    mysql服务器有一项功能,可以检测到哪条sql语句查询得比较慢,就是慢查询slowlog,现在介绍如何开启. 在[mysqld]下面增加如下代码: long_query_time = 1 log-s ...

  9. c - 2/1, 3/2, 5/3, 8/5, 13/8...前20项的和

    double pres(const int n) { ; //分子. ; //分母. ; double tmp; ; i <= n; i++) { sum += (numerator / den ...

  10. 本地连接速度100.0mbps变10.0mbps如何恢复

    右键我的电脑--管理---设备管理器--网络适配器展开,可以看到网卡,右击属性--高级--连接速度和双工模式或(LINK SPEED)选项,选择100就好了   那么我们在选择的时候会有100M全双工 ...