滾動字幕
自動滾動和滾動速度及設置鼠標懸停
添加內容
跑馬燈時間
ready()方法
文字跑馬燈插件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;
}