marquee 文字滚动

实现滚动效果,只知道使用jquery的SuperSlide插件。在做青海项目时,由于设计尺寸是1400*900,却要求适应1024*768的屏幕,只得采用zoom整体缩放,但这个整体缩放下,由于chrome浏览器有最小12像素大小的字体限制,采用该插件滚动的文字就会产生重叠。最后是采用了超级复杂的判断浏览器,判断屏幕尺寸,再对原本的文字进行裁剪来解决。没想到html居然有一个marquee标签,可直接拿来用,不光不用外接插件,也不用对每条新闻高度不固定而产生空隙导致的不美观而头疼,因为SuperSlide每一条li是固定的,即使不固定,也会自动根据最长的那条来确定宽度,会导致标题短的那条产生多余的空白。

插件方式:

首先要引入js文件:<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>

然后文中还要加js代码,div也要多套两个:

<div class="txtMarquee-top">
  <div class="bd">
    <ul class="infoList">
      <li><a href="http://www.smhyj.gov.cn/shows.asp?id=4593&tp=49" target="_blank" title="全市首个省级现代农(渔)业综合区通过验收 2015-06-23">全市首个省级现代农(渔)业综合区通过验收 2015-06-23</a></li>
      <li><a href="http://www.smxlytcj.cn/shows.asp?id=465" target="_blank" title="三门平原绿化工作获黄旭明副省长批示肯定 2015-06-08">三门平原绿化工作获黄旭明副省长批示肯定 2015-06-08</a></li>
      <li><a href="http://www.smhyj.gov.cn/shows.asp?id=4587&tp=49" target="_blank" title="三门县水产技术推广站举办养殖技术培训班 2015-06-01">三门县水产技术推广站举办养殖技术培训班 2015-06-01</a></li>
    </ul>
  </div>
</div>
<script type="text/javascript">
jQuery(".txtMarquee-top").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:2,interTime:50});
</script>

用marquee代码很简洁:

<ul class="infoList">
  <marquee behavior="scroll" onmouseover="this.stop()" style="WIDTH: 100%; HEIGHT:65px" onmouseout="this.start()" scrollamount="2" direction="up">
    <li><a href="http://www.smhyj.gov.cn/shows.asp?id=4593&tp=49" target="_blank" title="全市首个省级现代农(渔)业综合区通过验收 2015-06-23">全市首个省级现代农(渔)业综合区通过验收 2015-06-23</a></li>
    <li><a href="http://www.smxlytcj.cn/shows.asp?id=465" target="_blank" title="三门平原绿化工作获黄旭明副省长批示肯定 2015-06-08">三门平原绿化工作获黄旭明副省长批示肯定 2015-06-08</a></li>
    <li><a href="http://www.smhyj.gov.cn/shows.asp?id=4587&tp=49" target="_blank" title="三门县水产技术推广站举办养殖技术培训班 2015-06-01">三门县水产技术推广站举办养殖技术培训班 2015-06-01</a></li>
  </marquee>
</ul>

marquee的参数设置:

behavior:设定滚动的方式

alternate:来回滚动

scroll: 重复滚动

slide:不重复

bgcolor:设定活动字幕的背景颜色。

height设定活动字幕的高度

width设定活动字幕的宽度

loop设定滚动的次数,当loop=-1表示一直滚动下去,默认为-1

scrollamount设定活动字幕的滚动速度,单位pixels

scrolldelay设定活动字幕滚动两次之间的延迟时间,单位millisecond(毫秒)

marquee常用到的两个事件: 
onMouseOut="this.start()" 当鼠标移出该区域时;onMouseOver="this.stop()" 当鼠标移入该区域时

时间: 2024-10-14 10:34:07

marquee 文字滚动的相关文章

HTML之marquee(文字滚动)详解

语法: <marquee></marquee> 以下是一个最简单的例子: 代码如下: <marquee><font size=+3 color=red>Hello, World</font></marquee> 下面这两个事件经常用到: onMouseOut="this.start()" :用来设置鼠标移出该区域时继续滚动 onMouseOver="this.stop()":用来设置鼠标移入该区

html里面有一个控制文字滚动的标签marquee,比较有用。

本节笔者讲述HTML代码中比较特殊的标签,它能使网页中的文字滚动,并且可以控制其滚动的属性. 制作滚动文字 通过本章前面的学习,读者已经能够很好地控制各种段落文字的显示方式,不过无论怎么设置,文字都是静态的.本节笔者讲述HTML代码中比较特殊的标签,它能使网页中的文字滚动,并且可以控制其滚动的属性. 4.3.1 设置文字滚动 HTML技术中使文字滚动的方法是使用双标签<marquee></marquee>.在HTML代码中可使其作用区文字滚动,默认为从右到左,循环滚动.在D:\we

marquee|各种文字滚动代码(适用公告)

marquee|各种文字滚动代码(适用公告) 1.建立第一个滚动字幕.代码: <marquee scrollAmount=2 width=300>我钟意网页树树</marquee> 效果如: 我钟意网页树树 2.各参数详解: a)scrollAmount.它表示速度,值越大速度越快.如果没有它,默认为6,建议设为1-3比较好. b)width和height,表示滚动区域的大小,width是宽度,height是高度.特别是在做垂直滚动的时候,一定要设height的值.

HTML标签marquee实现滚动效果

HTML标签marquee实现滚动效果 转载自:http://www.cnblogs.com/zzuIvy/p/marqueeTest_1.html 页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee标记不仅可以移动文字,也可以移动图片,表格等. 语法:<marquee>...</marquee>: 说明:在标记之间添加要

marquee实现滚动效果

页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee标记不仅可以移动文字,也可以移动图片,表格等. 语法:<marquee>...</marquee>: 说明:在标记之间添加要进行滚动的内容. 重要属性: 1.滚动方向direction(包括4个值:up. down. left和 right) 语法:<marquee

HTML-标签marquee实现滚动效果

页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee标记不仅可以移动文字,也可以移动图片,表格等. 语法:<marquee>...</marquee>: 说明:在标记之间添加要进行滚动的内容. 重要属性: 1.滚动方向direction(包括4个值:up. down. left和 right) 语法:<marquee

html文字滚动代码 (转)

html文字滚动代码 代码如下<MARQUEE>滚动文字</MARQUEE> <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" direction="up" ><div align="left" ><br /></div ><center ><font face=&

简单的文字滚动效果

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css">

section标签实现文字滚动

h5新增样式 section标签 使用demo //h5新增属性 h5新增滚动的标签 <marquee> <div style="padding-left: 20px;margin-top: 10px;color: #fff;"> <marquee behavior="scroll" bgcolor='red' direction="left" width='100%' height='30'>单方向循置参数的