js文字滾動插件制作雙行關聯向上文字間歇滾動



101 403 135



特效描述:文字滾動插件 雙行關聯向上 文字間歇滾動,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

加群請備注:從官網了解到

老夫子电子