<！DOCTYPE HTML>
<HTML>
<HEAD>
<メタ文字セット= "UTF-8">
<タイトル>实现文字向上滚动的效果-jq22.com </ TITLE>
<スクリプトSRC = "https://libs.baidu .COM / jqueryの/ 2.0.0 / jquery.min.js "> </ SCRIPT>
<スタイル>
* {
パディング：0PX。
マージン：0PX。
}
.scroll ULのLi {
リストスタイル：なし。
}
.scroll {
ボーダー：1ピクセル赤色固体。
幅：200pxの。
高さ：80px;
行の高さ：20ピクセル;
オーバーフロー：隠されました;
背景：#FFFFFF;
}
.scrollリー{
高さ：20ピクセル。
}
</スタイル>
</ HEAD>
<BODY>
<UL>
<LI>私は最初の段落ます。</ li>た
<LI>私はテキストの2段落思います。</ li>
<LI>私は第三段落を書いています。</ li>
<LI>私は、第四段落ましたテキスト</ LI>
<LI> Iテキストの第五の段落であった</ LI>
<LI> Iされたテキストの第六段落</ LI>
<LI> Iされたテキストの第七段落</ LI>
</ UL>
</ DIV>
<スクリプト>
$（関数（）{
varが、これは$を（= $ "スクロール"）;
VAR scrollTimer;
$ this.hover（関数（）{
てclearInterval（scrollTimer）;
}、関数（）{
scrollTimer =たsetInterval（関数（ ）{
scrollContent（$この）;
}、2000）;
。}）トリガー（ "マウスアウト"）;
}）;
scrollContent機能（OBJ）{
変数$ =自己obj.find（ "UL：まず"）;
VAR = $ self.find lineHeight（ "李：まず"）の高さ（）; //行の高得る。
$のself.animateを（ {
"マージントップ"：-lineHeight + "PX"
}、1000、機能（）{
$ self.css（{
"マージントップ"： "0PX"
}）の検索...（ "李：第一"）appendTo（ $自己）; // appendTo可動直接要素ではなく、コピー、要素の位置の変化appendto
}）
}
</ SCRIPT>
</ BODY>
</ HTML>
