使用方法：
使用该跑马灯特效之前要先引入jQuery和marquee.js文件。
<script src="jquery-1.11.2.min.js"></script><script src="marquee.js"></script>
HTML结构：
跑马灯中的文字使用无序列表来制作，外面使用一个<div>作为包裹容器。
123456789101112 <div class="container"> <div class="marquee-sibling"> Breaking News </div> <div class="marquee"> <ul class="marquee-content-items"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </div></div>
CSS样式：
下面是该跑马灯特效的一些基本样式。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 .container { width: 100% background: #4FC2E5 float: left display: inline-block overflow: hidden box-sizing: border-box height: 45px position: relative cursor: pointer} .marquee-sibling { padding: 0 background: #3BB0D6 width: 20% height: 45px line-height: 42px font-size: 12px font-weight: normal color: #ffffff text-align: center float: left left: 0 z-index: 2000} .marquee,*[class^="marquee"] { display: inline-block white-space: nowrap position: absolute} .marquee { margin-left: 25% } .marquee-content-items { display: inline-block padding: 5px margin: 0 height: 45px position: relative} .marquee-content-items li { display: inline-block line-height: 35px color: #fff} .marquee-content-items li:after { content: "|" margin: 0 1em}
初始化插件：
123 $(function (){ createMarquee()})
在页面加载完毕之后，可以通过下面的方法来初始化该跑马灯插件。
配置参数：
下面是该跑马灯特效的可用配置参数。
12345678910111213141516171819202122232425262728 $(function (){ createMarquee({ // controls the speed at which the marquee moves duration:30000, // right margin between consecutive marquees padding:20, // class of the actual div or span that will be used to create the marquee - // multiple marquee items may be created using this item's content. // This item will be removed from the dom marquee_class:'.example-marquee', // the container div in which the marquee content will animate. container_class: '.example-container', // a sibling item to the marqueed item that affects - // the end point position and available space inside the container. sibling_class: '.example-sibling', // Boolean to indicate whether pause on hover should is required. hover: false }) })
没看到楼主给的效果，俺就自己试试吧。两个文件，一个test.html，里面内容是：
<head><LINK rel="stylesheet" href="css.css" type="text/css"></head>
<body onLoad="doThing()"><SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var rate = 1000
// do not edit below this line
var i = 0
var F = 'F1'
function doThing() {
if (document.getElementById&&document.all) {
ok = true
i++
if (i==1) F = 'F1'
if (i==2) F = 'F2'
if (i==3) F = 'F3'
YammaYamma.className = F
if (i >2) i = 0
timer = setTimeout('doThing()', rate)
}
}
// End -->
</script>
<span id="YammaYamma">
<b>
haifeng place is your good friend forever!</b>
</span>
第二个文件是css。我命名为css.css，内容为：
.F1 {filter: glow(Color=#FF8000,Strength=10)
width=270px
height=40px}
.F2 {filter: glow(Color=#00FF00,Strength=9)
width=270px
height=40px}
.F3 {filter: glow(Color=#0080FF,Strength=12)
width=270px
height=40px}
整好后，用ie打开html就可以看到效果了。楼主看看咋样。
