代碼：
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 400px;
border: 1px solid red;
margin: 100px;
position: relative;
overflow: hidden;
}
.content {
padding: 5px 20px 5px 10px;
position: absolute;
top: 0;
left: 0;
}
.scroll {
width: 18px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-color: #eee;
}
.bar {
height: 100px;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ccc;
border-radius: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="content" id="content">
<strong>將進酒</strong><br/>
唐代：李白<br/>
君不見，黃河之水天上來，奔流到海不復回。<br/>
君不見，高堂明鏡悲白髮，朝如青絲暮成雪。<br/>
人生得意須盡歡，莫使金樽空對月。<br/>
天生我材必有用，千金散盡還復來。<br/>
烹羊宰牛且爲樂，會須一飲三百杯。<br/>
岑夫子，丹丘生，將進酒，杯莫停。<br/>
與君歌一曲，請君爲我傾耳聽。<br/>
鐘鼓饌玉不足貴，但願長醉不復醒。<br/>
古來聖賢皆寂寞，惟有飲者留其名。<br/>
陳王昔時宴平樂，斗酒十千恣歡謔。<br/>
主人何爲言少錢，徑須沽取對君酌。<br/>
五花馬，千金裘，呼兒將出換美酒，與爾同銷萬古愁。<br/>
<strong>鑑賞</strong><br/>
《將進酒》原是漢樂府短簫鐃歌的曲調，標題的意思爲“勸酒歌”，內容多是詠唱喝酒放歌之事。這首詩約作於天寶十一載（公元752年），他當時和友人岑勳在嵩山另一老友元丹丘的潁陽山居作客，作者正值仕途遇挫之際，所以借酒興詩，來了一次酣暢淋漓的抒發。在這首詩裏，李白“借題發揮”，借酒消愁，感嘆人生易老，抒發了自己懷才不遇的心情。<br/>
這首詩十分形象的體現了李白桀驁不馴的性格：對自己充滿自信、孤高自傲、熱情豪放，“天生我才必有用”、“人生得意須盡歡”。全詩氣勢豪邁，感情豪放，言語流暢，具有極強的感染力。李白詠酒的詩歌非常能體現他的個性，思想內容深沉，藝術表現成熟。《將進酒》即爲代其表作。<br/>
詩歌發端就是兩組排比長句，如挾天風海雨向讀者迎面撲來。“君不見，黃河之水天上來，奔騰到海不復回”，潁陽去黃河不遠，登高縱目，故藉以起興。黃河源遠流長，落差極大，如從天而降，一瀉千里，東走大海。如此波瀾壯闊的現象，必定不是肉眼能夠看到的，作者是幻想的，言語帶有誇張。上句寫大河之來，勢不可擋；下句寫大河之去，勢不可回。一漲一消，構成舒捲往復的詠歎味，是短促的單句（如“黃河落天走東海”）所沒有的。緊接着，“君不見，高堂明鏡悲白髮，朝如青絲暮成雪”，恰似一波未平、一波又起。如果說前二句爲空間範疇的誇張，這二句則是時間範疇的誇張。悲嘆人生苦短，而又不直言，卻說“高堂明鏡悲白髮”，一種搔首顧影、徒呼奈何的神態宛如畫出。將人生由青春到老的全過程說成“朝”“暮”之事，把原本就短暫的說得更爲短暫，與前兩句把原本壯闊的說得更爲壯闊，是“反向”的誇張。開篇“以河之水一去不復返喻人生易逝”，“以黃河的偉大永恆形出生命的渺小脆弱”。這個開端可謂悲感至極，卻又不墮纖弱，可以說是巨人式的感傷，具有驚心動魄的藝術力量，同時也是由長句排比開篇的氣勢感造成的。這種開篇的方法作者經常用，比如“棄我去者，昨日之日不可留；亂我心者，今日之日多煩憂”（《宣城謝朓樓餞別校書叔雲》），沈德潛說：“此種格調，太白從心化出”，可見其頗具創造性。此詩兩作“君不見”的呼告（一般樂府詩只是篇首或篇末偶爾用），又使詩句感情色彩大增。所謂大開大闔者，此可謂大開。<br/>
“人生得意須盡歡”，這似乎是宣揚及時行樂的思想，然而只不過是現象而已。詩人“得意”過沒有？“鳳凰初下紫泥詔，謁帝稱觴登御筵”（《玉壺吟》）似乎得意過；然而那不過是一場幻影。“彈劍作歌奏苦聲，曳裾王門不稱情”（《行路難三首·其二》）又似乎並沒有得意，有的是失望與憤慨，但並不就此消沉。詩人於是用樂觀好強的口吻肯定人生，肯定自我：“天生我材必有用”，這是一個令人鼓掌讚歎的好句子。“有用”而且“必”，非常的自信，簡直像是人的價值宣言，而這個人“我”是需要大寫的。於是，從貌似消極的現象中透露出了深藏其內的一種懷才不遇而又渴望入世的積極的態度。正是“長風破浪會有時”，應爲這樣的未來痛飲高歌，破費又算得了什麼！<br/>
“千金散盡還復來！”這又是一個高度自信的驚人之句，能驅使金錢而不爲金錢所使，這足以令所有凡夫俗子們咋舌。詩如其人，想詩人“曩昔東遊維揚，不逾一年，散金三十餘萬”（《上安州裴長史書》），是何等的豪舉。所以此句是深蘊在骨子裏的豪情，絕非裝腔作勢者可以得其萬分之一。與此氣派相當，作者描繪了一場盛筵，那決不是“菜要一碟乎，兩碟乎？酒要一壺乎，兩壺乎？”而是整頭整頭地“烹羊宰牛”，不喝上“三百杯”決不罷休。多痛快的筵宴，又是多麼豪壯的詩句！至此，狂放之情趨於高潮，詩的旋律加快。“岑夫子，丹丘生，將進酒，杯莫停！”幾個短句忽然加入，不但使詩歌節奏富於變化， 而且使我們似乎聽到了詩人在席上頻頻地勸酒。既是生逢知己，又是酒逢對手，不但“忘形到爾汝”，詩人甚至忘了是在寫詩，筆下之詩似乎還原爲生活，他還要“與君歌一曲，請君爲我傾耳聽”。以下八句就是詩中之歌了，這純粹是神來之筆。<br/>
“鐘鼓饌玉”即富貴生活（富貴人家吃飯時鳴鐘列鼎，食物精美如玉），可詩人卻認爲這“不足貴”，並放言“但願長醉不復醒”。詩情至此，便分明由狂放轉而爲憤激。這裏不僅是酒後吐狂言，而且是酒後吐真言了。以“我”天生有用之才，本當位極卿相，飛黃騰達，然而“大道如青天，我獨不得出”（《行路難三首·其二》）。說富貴“不足貴”，乃是出於憤慨。以下“古來聖賢皆寂寞”二句亦屬憤語。詩人曾喟嘆“自言管葛竟誰許”，說古人“寂寞”，其實也表現出了自己的“寂寞”，所以才願長醉不醒了。這裏，詩人是用古人的酒杯，澆自己的塊壘。說到“唯有飲者留其名”，便舉出“陳王”曹植作代表。並化用其《名都篇》“歸來宴平樂，美酒鬥十千”之句。古來酒徒很多，而爲何偏舉“陳王”，這又與李白一向自命不凡分不開，他心目中樹爲榜樣的都是謝安這些高級人物，而這類人物當中，“陳王”曹植與酒聯繫得比較多。這樣寫便有了氣派，與前文極度自信的口吻一貫。再者，“陳王”曹植於曹丕、曹睿兩朝備受猜忌，有志難展，也激起詩人的同情。一提“古來聖賢”，二提“陳王”曹植，滿滿的不平之氣。此詩開始似乎只涉及人生感慨，而不染指政治色彩，其實全篇飽含了一種深廣的憂憤和對自我的信念。詩情之所以悲而不傷，悲而能壯，即根源在此。<br/>
剛露一點深衷，又說回酒了，而且看起來酒興更高了。以下詩情再入狂放，而且愈來愈狂。“主人何爲言少錢”，既照應“千金散盡”句，又故作跌宕，引出最後一番豪言壯語：即便千金散盡，也不惜將名貴寶物“五花馬”（毛色作五花紋的良馬）、“千金裘”（昂貴的皮衣）用來換美酒，圖個一醉方休。這結尾之妙，不僅在於“呼兒”“與爾”，口氣甚大；而且具有一種作者一時可能覺察不到的將賓作主的任誕情態。須知詩人不過是被友招飲的客人，此刻他卻高踞一席，氣使頤指，提議典裘當馬，令人不知誰是“主人”，浪漫色彩極濃。快人快語，非不拘形跡的豪邁知交斷不能出此。詩情至此狂放至極，令人嗟嘆詠歌，直欲“手之舞之，足之蹈之”。情猶未已，詩已告終，突然又迸出一句“與爾同銷萬古愁”，與開篇之“悲”關合，而“萬古愁”的含義更其深沉。這“白雲從空，隨風變滅”的結尾，顯見詩人奔涌跌宕的感情激流。通觀全篇，真是大起大落，非如椽巨筆不辦。<br/>
《將進酒》篇幅不算長，卻五音繁會，氣象不凡。它筆酣墨飽，情極悲憤而作狂放，語極豪縱而又沉着。全篇具有震動古今的氣勢與力量，這誠然與誇張手法不無關係，比如詩中屢用鉅額數字（“千金”、“三百杯”、“斗酒十千”、“千金裘”、“萬古愁”等等）表現豪邁詩情，同時，又不給人空洞浮誇感，其根源就在於它那充實深厚的內在感情，那潛在酒話底下如波濤洶涌的鬱怒情緒。此外，全篇大起大落，詩情忽翕忽張，由悲轉樂、轉狂放、轉憤激、再轉狂放、最後結穴於“萬古愁”，迴應篇首，如大河奔流，有氣勢，亦有曲折，縱橫捭闔，力能扛鼎。其歌中有歌的包孕寫法，又有鬼斧神工、“絕去筆墨畦徑”之妙，既非鑱刻能學，又非率爾可到。通篇以七言爲主，而又以三、五言句“破”之，極參差錯綜之致；詩句以散行爲主，又以短小的對仗語點染（如“岑夫子，丹丘生”，“五花馬，千金裘”），節奏疾徐盡變，奔放而不流易。《唐詩別裁》謂“讀李詩者於雄快之中，得其深遠宕逸之神，纔是謫仙人面目”，此篇足以當之。<br/>
</div><!--文字內容-->
<div id="scroll" class="scroll"><!--裝滾動條的層-->
<div class="bar" id="bar"></div><!--滾動條-->
</div>
</div>
<script>
var box=document.getElementById("box");
var content=document.getElementById("content");
var bar=document.getElementById("bar");
var scroll=document.getElementById("scroll");
//是否需要顯示滾動條
if(content.scrollHeight<=490){
scroll.style.display="none";
}else{
var ratio=box.offsetHeight/content.offsetHeight;
bar.style.height=scroll.offsetHeight*ratio+"px";
//滾動條點擊事件
bar.onmousedown= function (e) {
var spaceY= e.pageY-bar.offsetTop;
//拖動滾動條
document.onmousemove= function (e) {
var y= e.pageY-spaceY;
y=y<0?0:y>scroll.offsetHeight-bar.offsetHeight?scroll.offsetHeight-bar.offsetHeight:y;
bar.style.top=y+"px";
//文字不被選中
window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
//文字一起移動
content.style.marginTop=-y*(content.offsetHeight-box.offsetHeight+10)/(scroll.offsetHeight-bar.offsetHeight)+"px";
};
};
document.onmouseup= function () {
document.onmousemove=null;
};
};
</script>
效果圖：
