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()" 当鼠标移入该区域时

marquee 文字滚动

标签：

原文地址：http://www.cnblogs.com/wildorchid/p/4602158.html