js文字滚动插件制作双行关联向上文字间歇滚动



97 387 130



特效描述:文字滚动插件 双行关联向上 文字间歇滚动,js文字滚动插件制作一个js文字滚动效果,两排双行关联向上文字间歇滚动,支持多组文字滚动列表。内含js代码下载。

代码结构

1. 引入JS

<script type="text/javascript" src="js/MessageRoll.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
/* message */
.message{font-size:12px;background-color:#F7F7F7;border:solid 1px #ddd;width:520px;margin:20px auto 0 auto;}
.message li{height:30px;line-height:30px;padding-left:5px;border-bottom:1px dotted #A9A9A9;}
</style>
<div id="demo01" class="message">
	<ul>
		<li><a href="http://www.dijiuzhanzhang.com/" target="_blank">jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动</a></li>
		<li><a href="http://www.dijiuzhanzhang.com/" target="_blank">jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示</a></li>
		<li><a href="http://www.dijiuzhanzhang.com/" target="_blank">jquery 文字特效霓虹灯文字效果使用jQuery和CSS</a></li>
		<li><a href="http://www.dijiuzhanzhang.com/" target="_blank">jquery 导航菜单 jquery和CSS3制作一个动画导航的向下滑动框菜单</a></li>
		<li><a href="http://www.dijiuzhanzhang.com/" target="_blank">jquery 导航插件 一个动画导航下拉菜单Apycom软件的Java下拉菜单</a></li>
		<li><a href="http://www.dijiuzhanzhang.com/" target="_blank">jquery 导航 鼠标滑过类似气泡放大缩小显示二级菜单</a></li>
	</ul>
</div><!--message end-->
<div style="height:20px;"></div>
<div id="demo02" class="message">
	<ul>
		<li><a href="http://www.dijiuzhanzhang.com/" target="_blank">js图片特效制作百叶窗滤镜轮播效果js焦点图片切换</a></li>
		<li><a href="http://www.dijiuzhanzhang.com/" target="_blank">js图片特效制作js焦点图上下滚动slider切换效果</a></li>
		<li><a href="http://www.dijiuzhanzhang.com/" target="_blank">js图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
		<li><a href="http://www.dijiuzhanzhang.com/" target="_blank">js滚动图片按钮控制图片左右自动滚动</a></li>
		<li><a href="http://www.dijiuzhanzhang.com/" target="_blank">js滚动图片带按钮控制上下左右自动无缝滚动</a></li>
		<li><a href="http://www.dijiuzhanzhang.com/" target="_blank">jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动</a></li>
	</ul>
</div><!--message end-->
<script type="text/javascript">
   /*构造滚动对象方法*/
   var roll = new MessageRoll({
    container : document.getElementById("demo01"), // 滚动的容器
    height : 60 + 1 , // 滚动信息条的高度,算上底边框1px,如果没有底边框则不加1
    rollElements : "li" // 滚动元素的html标记名称
   });
   roll.start(2000); //开始滚动,每三秒滚动一次
   /*构造滚动对象方法*/
   var roll = new MessageRoll({
    container : document.getElementById("demo02"), // 滚动的容器
    height : 60 + 1 , // 滚动信息条的高度,算上底边框1px,如果没有底边框则不加1
    rollElements : "li" // 滚动元素的html标记名称
   });
   roll.start(2500); //开始滚动,每三秒滚动一次
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签:

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到