單行文字滾動就用myslider,myslider是一個小型的內容滾動jquery插件。
首先請看實例:http:///jq/myslider/demo/4.htm
然後來看代碼:
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>
<link href="http:///jq/myslider/css/jquery.myslider.0.1.3.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript" src="http:///jq/myslider/js/jquery.myslider.0.1.3.js"></script>
<div id="myslider_keleyi_com" class="keleyimyslider">
<ul>
<li>This is a myslider demo.
</li>
<li><a href="http:///jq/myslider/">myslider home</a></li>
<li><a href="http:///">Keleyi Home</a></li>
<li><a href="http:///keleyi/">Keleyi Menu Home</a></li>
<li><a href="http://plugins.jquery.com/myslider/">jquery plugin myslider</a></li>
<li>
http:///jq/myslider/ </li>
</ul>
</div>
<script type="text/javascript">
$("#myslider_keleyi_com").myslider({ "width": "500px"
, "millisec": "2000"
, "animatespeed": 800
, "fontSize": "20px"
, "li_style": {"font-size":"20px"}
});
</script>
從上面代碼可以看到,實現單行文字滾動很簡單,只需引用js文件和css件,然後構造滾動內容的html,最後是使用javascript的語句實現滾動,javascript語句可以設定滾動的方向(上或下),間歇時間,等等參數。可以看到html語句也是很簡單的,記得div要加 class="keleyimyslider" 。
當然,myslider插件也可以實現多行內容的滾動,還可以是圖片的滾動,詳情請參考http:///jq/myslider/