コンテンツを自動でスクロール/コンテンツ表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

スポンサードリンク

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Easy Scroll v1.0</title>
<script type="text/javascript" src="easyscroll.js"></script>
</meta>

<style>

body{
	margin:0;
	padding:0;
	font:80% Arial, Helvetica, sans-serif;	
	background:#fff;
	color:#333;
	line-height:180%;
	}
	
h2{
	font-size:200%;
	font-weight:normal;
	color:#000;
}

#easyscroll{
  width:665px;
  text-align:left;
  background:#E6FCFF;
  padding:0px 10px;
}	

#easyscrollnav, #easyscrollnav li{
		height:15px;
		margin:0;	
		padding:0;
}

#easyscrollnav{
  position:fixed;
  height:15px;
  top:410px;
  left:0px;
}
*:first-child+html #easyscrollnav{
  top:30px;
  left:0px;
}
	
#easyscrollnav li{
		list-style:none;
		float:left;
		margin-right:10px;		
		padding:0 10px;
		color:#333;
		cursor:pointer;
}
			
#easyscrollnav li.over{
		text-decoration:underline;
}							

</style>
</head>
<body>
	
	<div id="myContent">
	
		<h2>Romeo and Julia</h2>
	
		<p>
		'Romeo und Julia' (Or, 'Romeo and Juliet' and Romeo and Juliet) is a drama by playwright William Shakespeare in England. It is roughly said about 1595 though there are various opinions about the first performance fiscal year. 
'Romeo und Julia' is not considered to be a profound tragedy like a four great tragedy ('Hamlet', 'Macbeth', 'Othello', and 'King Lear') though the classification of the complete volume (the following "The 1.2th case book") that was made to the tragedy, and published when Shakespeare postmortem is also the same. 
In a shakespearian tragedy at later years, the striking feature that characters' characters cause the tragedy is seen. The one that is called "Fate" that is surrounding circumstances and chance, etc. from characters' characters leads both and surroundings to the tragic ending for this in Romeo und Julia. 
Moreover, a joke to excessive in the text and violent words and phrases and indecent talk [yaritori] are seen, and are obviously stronger than other shakespearian tragedy works the element as the farce (vulgar farce). 
It had been entirely written before though the mark of "Romeo und Julia" was general now, "Romeo and Juliet". Therefore, the mark is different in [**dai] of the movie according to year of the Japan opening to the public. Moreover, the mark of the latter is used in the still custom in the field of the classical music and the ballet. In the English pronunciation, it is not necessarily accurate though the former is nearer. </p>
		
		<h2>Story</h2>
		
		<p>
		The stage is city Verona in Italy of the 14th century. The Montagu family and the Capulet family repeat contention that quarrels with one's own flesh and blood there. 
Montagu's only son Romeo suffers from the unrequited love to [rozarain]. Romeo who sneaked in to the party in diversion of mind, friends, and Capulet family meets Capulet's only daughter Juliet, and two people fall into love at once. Two people marry secretly in Osamu road monk Lawrence's origin. Lawrence expects two people to put the period to the fight over both houses the marriage. 
Romeo immediately after the marriage however kills Mrs. Capulet's nephew [tei;boruto] retaliation that it is rolled in the fight in the street, and the best friend and Mercutio are killed. Archduke [esukarasu] of Verona punishes Romeo to the crime of banishment. On the other hand, Capulet orders Juliet who gives it sadly to marry archduke's relative's Paris. 
Lawrence who asked for help to Juliet sets her up and to marry it, the strategy that uses the poison of apparent death is set up in Romeo. However, this plan dies with Romeo's who thought that it doesn't transmit to banished Romeo well, and Juliet died drinking the poison in her grave, and Juliet who awoke from the state of apparent death immediately after that also follows it with Romeo's dagger. It knows the true position of affairs and finally, both houses that suffer grief are reconciled. </p>	
	
	</div>
		
</body>
</html>

	Easy Scroll v1.0 - Unobtrusive content scroller

テキストや画像を含んだエリアを、自動でスクロールさせることが出来るスクリプト。
主にテキストを読むことに注力して作られたものかと思います。
省スペースしかないのに、長文を掲載しなければいけない時などに試してみてはいかがでしょうか？

セッティング
CSS＆Jsの設定

ダウンロード＆ヘッダーの設定

まずサイトへ行き、Download Easy Scroll v1.0をクリックして、easyscroll.jsをダウンロードします。
次にヘッダーにそれを読み込む設定をします。

これで下準備は完了です。

HTMLコードの記述

コードの記述は複雑ではないので、どなたでも簡単に実装できると思います。

<div id="myContent">
コンテンツ

</div>　

このように<div>にid="myContent"を指定し、その内部にスクロールさせるコンテンツを記述します。
基本的な設定はこれで終了です。

CSSの設定

ソースを見ると前述のid="myContent"のみ表示されているのですが、
実際には以下のタグに置き換えられて、スクリプトが実行されます。

<ul id="easyscrollnav">
  <li id="btnUp">↑ScrollUp</li>
  <li id="btnDown">↓ScrollDown</li>
  <li id="btnReset">Reset</li>
</ul>
<div style="overflow: hidden; position: relative; height: 400px;" id="easyscroll">
  <div style="position: absolute; top: 0pt;" id="myContent">    コンテンツ
  </div>
</div>　

トリガーとなる<ul id="easyscrollnav">その内部のボタン。
それから最初に指定した、<div id="myContent">を囲うように、<div id="easyscroll">が設定されます。
CSSによる表示を調整したい場合は、上記の構造を参考にすると良いでしょう。
トリガー部分をスクロールするボックスの下に配置したい場合などは、position:absoluteをeasyscrollnavに設定し、top,leftで調節するという手段もあります。