使用方法：
使用该跑马灯特效之前要先引入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 }) })
可以实现匀速、无缝、加链接以及其它的修饰效果，本代码就是实现了这一功能，让文字从右至右平滑滚动，滚动宽度、高度、速度均可以设定。Js文字向左运动
var
marqueewidth=350
var
marqueeheight=22
var
speed=5
var
marqueecontents='欢迎光临脚本之家
网页特效栏目，精品特效全收罗！'
if
(document.all)
document.write(''+marqueecontents+'')
function
regenerate(){
window.location.reload()
}
function
regenerate2(){
if
(document.layers){
setTimeout("window.onresize=regenerate",450)
intializemarquee()
}
}
function
intializemarquee(){
document.cmarquee01.document.cmarquee02.document.write(''+marqueecontents+'')
document.cmarquee01.document.cmarquee02.document.close()
thelength=document.cmarquee01.document.cmarquee02.document.width
scrollit()
}
function
scrollit(){
if
(document.cmarquee01.document.cmarquee02.left>=thelength*(-1)){
document.cmarquee01.document.cmarquee02.left-=speed
setTimeout("scrollit()",100)
}
else{
document.cmarquee01.document.cmarquee02.left=marqueewidth
scrollit()
}
}
window.onload=regenerate2
[Ctrl+A
全选
注:如需引入外部Js需刷新才能执行]
需要js的配合一下是一个非常好用的一个html代码,可以试试
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>一行多列文字循环滚动带停顿-</TITLE>
<meta name="keywords" content="网页特效" />
<meta name="description" content="" />
<META http-equiv=Content-Type content="text/html charset=utf-8">
<style type="text/css">
ul {height:200px
padding-right: 0px
padding-left: 0px
padding-bottom: 0px
margin: 0px
padding-top: 0px
}
#announcement {
width:300px
height:200px
background:url(img/menu_bg.gif) repeat
overflow: hidden
}
#announcement div {
border: #e6e6e6 1px solid
padding:0px 10px 0px 10px
overflow-y:hidden
line-height: 24px
height:100px
}
#announcement li {
font-size: 12px
float: left
list-style-type: none
margin-right: 20px
padding-left: 10px
background: url(img/arrow_right.gif) no-repeat 0px 50%
white-space: nowrap
}
#announcement a {
text-decoration: none
}
#announcement a:hover {
text-decoration:underline
}
</style>
</HEAD>
<BODY>
<DIV id="announcement" onMouseOver="if(!anncount) {clearTimeout(annst)annst = 0}" onMouseOut="if(!annst) annst = setTimeout('announcementScroll()', anndelay)">
<DIV id="scrbody">
<ul>
<li>
<a href="#" target="_blank">jQuery 类似腾讯网的图片幻灯特效（可自动播放）</a>
</li>
<li>
<a href="#/JS" target="_blank">VB版增强型Windows任务管理器</a>
</li>
<li>
<a href="#/JS/texiao"target="_blank">JQuery Tip多风格链接提示框</a>
</li>
<li>
<a href="#/JS/ad" target="_blank">VC++动态加载、调用smtp.dll发邮件示例</a>
</li>
<li>
<a href="#/html+css" target="_blank">++连连看游戏源码附外挂</a>
</li>
<li>
<a href="#/" target="_blank">基于API的VB HOOK钩子拦截程序</a>
</li>
<li>
<a href="#/" target="_blank">VB 操作系统的一些常用小技巧集</a>
</li>
<li>
<a href="#/js" target="_blank">xTree 标准的WEB菜单树（树形菜单）</a>
</li>
</ul>
</DIV>
</DIV>
<script type="text/javascript">
function $(id)
{
return document.getElementById(id)
}
var anndelay = 3000
var anncount = 0
var annheight = 24
var annst = 0
function announcementScroll()
{
if( ! annst)
{
$('scrbody').innerHTML += '<br style="clear: both" />' +
$('scrbody').innerHTML
$('scrbody').scrollTop = 0
if($('scrbody').scrollHeight > annheight * 3)
{
annst = setTimeout('announcementScroll()', anndelay)
}
else
{
$('announcement').onmouseover = $('announcement').onmouseout = null
}
return
}
if(anncount == annheight)
{
if($('scrbody').scrollHeight - annheight <= $('scrbody').scrollTop)
{
$('scrbody').scrollTop = $('scrbody').scrollHeight / 2 - annheight
}
anncount = 0
annst = setTimeout('announcementScroll()', anndelay)
}
else
{
$('scrbody').scrollTop ++
anncount ++
annst = setTimeout('announcementScroll()', 10)
}
}
announcementScroll()
</script>
</BODY>
</HTML>
