单行文字滚动就用myslider

单行文字滚动就用myslider，myslider是一个小型的内容滚动jquery插件。

首先请看实例：http://keleyi.com/jq/myslider/demo/4.htm

然后来看代码：

<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>
<link href="http://keleyi.com/jq/myslider/css/jquery.myslider.0.1.3.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript" src="http://keleyi.com/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://keleyi.com/jq/myslider/">myslider home</a></li>
<li><a href="http://keleyi.com/">Keleyi Home</a></li>
<li><a href="http://keleyi.com/keleyi/">Keleyi Menu Home</a></li>
<li><a href="http://plugins.jquery.com/myslider/">jquery plugin myslider</a></li>
<li>
http://keleyi.com/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://keleyi.com/jq/myslider/

 

转自：http://keleyi.com/a/bjad/von5fgtg.htm