CSS製作很漂亮的文字滑動效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
<頭>



<樣式類型=“文字/css”>


<腳本類型=“文字/javascript”>
//視窗.onload = 函數() {
羅林標籤（“羅林”）
}
函數 rolinTab(obj) {
var list = $(obj).getElementsByTagName("LI");
var state = {顯示：假，隱藏：假，showObj：假};
for (var i=0; i var tmp = new rolinItem(list[i],state);
if (i == 0) tmp.pShow();
}
}
函數 rolinItem(obj,狀態) {
無功速度 = 0.0666；
變數範圍 = 1；
變數間隔；
var tarH；
var tar = 這個;
var head = getFirstChild(obj);
var 內容 = getNextChild(head);
var isOpen = false;
this.pHidden = 函數() {
if (isOpen) 隱藏();
}
this.pShow = 顯示；
var baseH = content.offsetHeight;
content.style.display = "無";
var isOpen = false;
head.onmouseover = 函數() {
this.style.background = "#EFEFEF";
}
head.onmouseout = 滑鼠移出；
head.onclick = 函數() {
this.style.background = "#EFEFEF";
if (!state.show && !state.hidden) {
如果（！isOpen）{
head.onmouseout = null;
展示（）;
} 別的 {
隱（）;
}
}
}
函數滑鼠移出（）{
this.style.background = "#FFF"
}
函數顯示（）{
head.style.borderBottom = "1px 實心#DADADA";
狀態.show = true;
if (state.openObj && state.openObj != tar ) {
state.openObj.pHidden();
}
內容.樣式.高度 = "0px";
content.style.display = "區塊";
content.style.overflow = "隱藏";
狀態.openObj = tar;
tarH=baseH；
間隔 = setInterval(移動,10);
}
函數 showS() {
是開啟=真；
狀態.show = false;
}
函數隱藏() {
狀態.隱藏 = true;
焦油H = 0;
間隔 = setInterval(移動,10);
}
函數隱藏S() {
head.style.borderBottom = "無";
head.onmouseout = 滑鼠移出；
onmouseout();
content.style.display = "無";
打開=假；
狀態.隱藏=假;
}
函數移動（）{
var dist = (tarH - content.style.height.pxToNum())*speed;
if (Math.abs(dist) < 1) dist = dist > 0 ? 1：-1；
content.style.height = (content.style.height.pxToNum() + dist) + "px";
if (Math.abs(content.style.height.pxToNum() - tarH) <= range ) {
清除間隔（間隔）；
content.style.height = tarH + "px";
如果（tarH！= 0）{
顯示S()
} 別的 {
隱藏S();
}
}
}
}
var $ = function($) {return document.getElementById($)};
String.prototype.pxToNum = function() {return Number(this.replace("px",""))}
函數 getFirstChild(obj) {
var 結果 = obj.firstChild;
while (!result.tagName) {
結果=結果.nextSibling;
}
返回結果；
}
函數 getNextChild(obj) {
var 結果 = obj.nextSibling;
while (!result.tagName) {
結果=結果.nextSibling;
}
返回結果；
}
//]]>

<正文>

• 
  

  花郎徒結

  
  

  當時明月在，曾照彩雲歸
  
  
  倦了紅顏，憔悴為千年，幾多情深夜語，一點聽風悠然。
  村憶夢回，飄逸如煙，友別憐影單。
  而今沙漠風閒，雪原清冷，東海雲淡，石谷誰惜緣。
  累了心間，問也煩，都道風沙淘盡，何日再安慰別緣！
  



• 
  

  帝王槌

  
  

  立劍賞月意惆悵，袖飾刀，衣披霜，傲視霧丸，徒手戰扶桑。
  問津終尋帝王陵，黑影沒，屍滿崗，惟見逆鯪露寒光。
  
  須發蒼、氣軒昂、三尺銀狼、破風動八方。
  
  依身緊握噬魂槍，飲虎血，豪萬丈。
  



• 
  

  玉女槍法

  
  

  曾經有一個夢想：馳騁江湖，快恩仇。
  曾經有願望：千里追兇，十步濺血。
  曾經有腔豪情：奇功蓋世，名冠武林。
  曾經有種期盼：燭影搖紅，衣袖添香。
  



• 
  

  黑沙剛體

  
  

  趙客縵胡纓，吳鉤霜雪明。
  十步殺一人，千里不留行。
  閒過信陵飲，脫劍膝前橫。
  三杯吐然諾，五嶽為輕。
  救趙揮金鎚，邯鄲先震。
  縱死俠骨香，不慚世上英。
  

  
  


• 
  

  不羈浪人槍

  
  

  素手相牽，斜輝入眼簾，踏逍遙自在間，醉了山水閒。
  沙漠綠水漣，魚遊淺底，明眸一水天。
  愛在村友相談，開心點，笑語連連，率性夜無眠。
  月在西邊，風亂星寒，輪轉醇香舊事，蛾兒曼舞燈前。
  



• 
  

  霧水掌

  
  

  蹄影善奔，如幻如魔，其皮傳世，絕學重現，
  
  還有誰在這殘陽道中註視著它的身影…