DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery常見問題 >> 單行文字滾動就用myslider
單行文字滾動就用myslider
編輯:JQuery常見問題     

單行文字滾動就用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/
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved