テロップ流しの様なニュースティッカー/コンテンツ表示/SolidStateEveryday

ニュースティッカーjquery.jstockticker-1.1.js

スポンサードリンク

SAMPLE
CODE
DownLoad

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jStockTicker Demo page</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jstockticker-1.1.js"></script>

<script type="text/javascript">
    $(function() {
        $("#ticker").jStockTicker({interval: 45});
    });
</script>
<style type="text/css">
.container {
    background: #fff none;
    border: 1px solid #000;
    height: 30px;
    width: 640px;
}

.container .wrap {
    width: 620px;
    left: 10px;
    top: 10px;
    overflow: hidden;
    position: relative;
    line-height: normal;
    font-size-adjust: none;
}

ul.stockTicker {
    font-family: Verdana, Arial, Helvetica, San-serif;
    font-size: x-small;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
}

ul.stockTicker li {
    margin: 0 10px 0;
	float:left;
}
</style>
</head>
<body>
        
<ul id="ticker" class="stockTicker">
   <li><a href="#">NewsText-------------1-------------</a></li>
   <li><a href="#">NewsText-------------2-------------</a></li>
   <li><a href="#">NewsText-------------3-------------</a></li>
   <li><a href="#">NewsText-------------4-------------</a></li>
   <li><a href="#">NewsText-------------5-------------</a></li>
   <li><a href="#">NewsText-------------6-------------</a></li>
   <li><a href="#">NewsText-------------7-------------</a></li>
   <li><a href="#">NewsText-------------8-------------</a></li>
</ul>
        
</body>
</html>

	jQuery PLUGINS

テロップ流しのように、ニュースが横に流れるニュースティッカースクリプトです。
jQueryを使用します。
初めからこのスクリプトを使うようにデザインしてサイトを作ると良いかなと思います。

セッティング

１．ダウンロード＆セッティング

まずjQueryをダウンロードし、次に jquery.jstockticker-1.1.js をダウンロードします。
解凍したらそれらを適当な場所へアップロード。

２．<head>設定

アップしたスクリプトを読み込ませます。

次にニュースティッカーの設定を記述します。

CSSも記述しないといけませんが、サンプルではul要素を使用するようにしてます。
なので、CSSの内容は、「CODE」タブをクリックして確認してください。

３．HTMLマークアップ

先に指定したiD名を付けてマークアップするだけでOKです。

<ul id="ticker" class="stockTicker">
<li><a href="#">NewsText-------------1-------------</a></li>
<li><a href="#">NewsText-------------2-------------</a></li>
</ul>

id と class は必ず付けてください。
そのようにマークアップすることで、内部のli要素がテロップとして表示されるようになります。