文字走马灯 置顶显示

html-css019

文字走马灯 置顶显示,第1张

应用css实现走马灯置顶显示

超出显示

用到命令 text-overflow ： clip | ellipsis 文本超出：截断|省略

但这一条命令是看不到效果的，需要另外两条命令配合使用，让文本能够溢出，第一个是强制一行内显示，white-space:nowrap；第二个是溢出内容隐藏,overflow:hidden

超出跑马等效果

老的前端开发人员对于marquee标签肯定不陌生，一个被淘汰的标签，被刚入门的新手所喜爱，因为能通过一个简单的标签做出动态的效果。但是在实际应用上的局限性和效果的过时，使这个标签退出历史舞台，大家纷纷改用js来实现无间断滚动等效果。

新的CSS3 marquee设置，可以说功能强大了很多，更加易操作，用简单的代码解决了js中比较纠结的字符长度判断等难题。强烈推荐大家使用。

对于这个属性的定义，W3C标准用法和webkit内核浏览器的支持用法并不相同，由于我们立足实战实用，所以这里只介绍好用的。可用的。

我们需要四句常用命令

overflow:-webkit-marquee//指定溢出时滚动。

-webkit-marquee-style:scroll | slide | alternate//跑马灯样式，分三种。

scroll，从一端滚动到另一端，内容完全滚入（消失）时重新开始。slide，从一端滚到另一端，内容接触到另一端后，立马重新开始。alternate，内容不跑到显示区域外，在里面来回碰壁反弹。这里主要用第一种。

-webkit-marquee-repetition:infinite | number// 跑马灯跑的次数，infinite 为无限多次，不结束。或者可以用正整数设置滚动的次数。

-webkit-marquee-direction:up | down | left | right//跑动的方向，这个要注意结合实际情况，即实际你操作的标签文本流溢出在哪个方向溢出。

-webkit-marquee-speed:slow | normal | fast//跑动的速度设置。

打开 Dreamweaver

新建 HTML 文档；

修改标题为"跑马灯"

保存为 index.html 文件。

首先，编写跑马灯部分的静态 HTML 代码，把图片排列起来

在 <body>和 </body>标签中添加以下代码：

<div>

　<ul>

<li><img src="img/1.jpg" /></li>

<li><img src="img/2.jpg" /></li>

<li><img src="img/3.jpg" /></li>

<li><img src="img/4.jpg" /></li>

<li><img src="img/5.jpg" /></li>

<li><img src="img/6.jpg" /></li>

<li><img src="img/7.jpg" /></li>

　</ul>

</div>

给上一步的 HTML 代码中的 div 标签增加 class 属性，如下：

　<div class="con">

编写跑马灯部分的 CSS 样式代码，代码放在 <head>和 </head>标签中，如下：

<style type="text/css">

　ul{list-style:nonepadding:0margin:0}

　.con{ width:1105pxheight:225pxoverflow:hiddenborder:2px solid #666margin:10px auto 0 autopadding:5px 0 0 5px}

　.con ul li{ float:leftmargin:0 5px 10px 0}

　.con ul li img{ display:blockwidth:209pxheight:209pxpadding:2pxborder:1px solid #ccc}

</style>

引入 JQuery 库

　<script type="text/javascript" src="jquery-1.11.0.min.js"></script>

引入 Marquee 插件

　<script type="text/javascript" src="marquee2.js"></script>

代码放在 </body>标签前，如图：

给 div 增加 marquee 类

　<div class="con marquee">

保存文件，在浏览器中打开，就可以看到图片开始滚动了。

图片默认的滚动方向是“向上滚动”

如果要修改图片滚动的方向，可以给 div 指定 direction 属性，属性值可以取：

　up 上

　down 下

　left 左

　right 右