<marquee>曾是 IE 下独有的一个走马灯效果的标签，其他浏览器并不兼容，于是出现了使用 JavaScript 来模拟该效果的插件。可以运用于新闻内容的滚动效果。官网
使用方法
载入 JavaScript 文件
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.kxbdmarquee.js" ></script>CSS 样式
/**
* 父容器需要设置溢出隐藏
* 如果是水平滚动，项目需要设置浮动
*/
#element_id{overflow:hidden;}
#element_id ul li{float:left;}DOM 结构
<div id="element_id">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>JavaScript 调用方式
$('#element_id').kxbdMarquee();
$('#element_id').kxbdMarquee({...});参数说明
| 名称 | 默认值 | 说明 |
|---|---|---|
| direction | "left" | 滚动方向。可设置为："left", "right", "up", "down" |
| isEqual | true | 所有滚动的元素长宽是否相等。可设置为：true, false |
| loop | 0 | 循环滚动次数，0 表示无限循环 |
| scrollAmount | 1 | 步长(px) |
| scrollDelay | 20 | 时长(ms) |
DEMO
效果图见页面横幅banner,下面是代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>kxbdmarquee demo</title>
<style type="text/css">
*{margin: 0;padding: 0;box-sizing: border-box;}
body{background: #eee;padding-top: 100px;}
h1{text-align: center;font-size: 50px;}
li{list-style: none;height: 40px;line-height: 40px;width:80px;}
.box{display: flex;flex-wrap: wrap;width: 802px;margin: 10px auto;}
.item{width: 400px;height: 200px;padding: 0 10px;border: solid 1px #aaa;margin: -1px -1px 0 0;}
#demo1,#demo2{width: 320px;overflow: hidden;}
#demo1 li,#demo2 li{float: left;}
#demo3,#demo4{height: 160px;overflow: hidden;}
</style>
</head>
<body>
<h1>kxbdmarquee.js</h1>
<div class="box">
<div class="item">
<h2>横向滚动 (right)</h2>
<div id="demo1">
<ul>
<li>滚动內容1</li>
<li>滚动內容2</li>
<li>滚动內容3</li>
<li>滚动內容4</li>
</ul>
</div>
</div>
<div class="item">
<h2>横向滚动 (left)</h2>
<div id="demo2">
<ul>
<li>滚动內容1</li>
<li>滚动內容2</li>
<li>滚动內容3</li>
<li>滚动內容4</li>
</ul>
</div>
</div>
<div class="item">
<h2>纵向滚动 (bottom)</h2>
<div id="demo3">
<ul>
<li>滚动內容1</li>
<li>滚动內容2</li>
<li>滚动內容3</li>
<li>滚动內容4</li>
</ul>
</div>
</div>
<div class="item">
<h2>纵向滚动 (top)</h2>
<div id="demo4">
<ul>
<li>滚动內容1</li>
<li>滚动內容2</li>
<li>滚动內容3</li>
<li>滚动內容4</li>
</ul>
</div>
</div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.kxbdmarquee.js" ></script>
<script>
$(function(){
$("#demo1").kxbdMarquee({direction:'left'});
$("#demo2").kxbdMarquee({direction:'right'});
$("#demo3").kxbdMarquee({direction:'up'});
$("#demo4").kxbdMarquee({direction:'down'});
})
</script>
</html>