文字跑马灯插件liMarquee.js
HTML中引入jQuery.liMarquee.js和liMarquee.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文字跑马灯效果</title>
<link rel="stylesheet" href="../lib/css/liMarquee.css">
<link rel="stylesheet" href="./textRun.css">
<script type="text/javascript" src="../lib/js/jquery.min.js"></script>
<script type="text/javascript" src="../lib/js/jquery.liMarquee.js"></script>
<script type="text/javascript" src="./textRun.js"></script>
</head>
<body>
<div class="content">
<span>百度</span>
<span>京东</span>
<span>哈气</span>
<span>妹子</span>
<span>美女</span>
</div>
</body>
</html>js属性设置说明 ：
$(function(){
/**
* 属性设置：
* direction滚动的方向，left、right、up、down
* scrollamount滚动的速度，数值，数值越小越慢
* circular是否无缝滚动，true、false
* drag是否禁止拖动，true、false
* runshort内容不足是否滚动，true、false
* hoverstop鼠标悬停是否停止滚动，true、false
* inverthover反向，即鼠标悬停滚动
* 自定义事件：pause、play、destroy、update
* eg：$dowebok.liMarquee('pause');
*/
$(".content").liMarquee({
direction: "left",//默认left
scrollamount: 10,//默认
circular: true,//默认true
drag: false,//默认true
runshort: false,//默认true
hoverstop: true,//默认true
inverthover: false,//默认true
});
})css文件：
.content{
width: 150px;
}