亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JQuery實(shí)現(xiàn)自定義滾動(dòng)條的方法

 更新時(shí)間：2023年06月12日 10:48:48   作者：覺醒法師  
這篇文章主要給大家介紹了關(guān)于JQuery實(shí)現(xiàn)自定義滾動(dòng)條的方法,通過(guò)本文的介紹你可以換掉千篇一律的默認(rèn)滾動(dòng)條,讓你的網(wǎng)站或web項(xiàng)目更具特色,文章通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在頁(yè)面中雖然可以通過(guò)CSS修改滾動(dòng)條的樣式,但是部分屬性是無(wú)法自己修改和設(shè)置的，而且不同瀏覽器存在兼容問(wèn)題，因此通過(guò)JS來(lái)實(shí)現(xiàn)滾動(dòng)條在自定義滾動(dòng)條的環(huán)境下也是有必要的。

接下來(lái)，我們來(lái)實(shí)現(xiàn)上圖兩種情況下滾動(dòng)條的實(shí)現(xiàn)。

一、頁(yè)面搭建

1.1 創(chuàng)建index.html頁(yè)面

首先創(chuàng)建html頁(yè)面，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滾動(dòng)條</title>
</head>
<body>
    <div class="container">
        <!-- scroll-wrap -->
        <div class="scroll-wrap">
            <div class="content" id="scroll">
                <p>文章包括各種文體的著作、作品，如詩(shī)歌、戲劇、小說(shuō)、科學(xué)論文，記敘文、議論文、說(shuō)明文、應(yīng)用文等等。“千古文章未盡才”“文章千古事”“文章憎命達(dá)”“板凳要坐十年冷、文章不寫一字空”“積句而成章，積章而成篇”“言出為論，下筆成章”等，都是現(xiàn)在所說(shuō)的文章的意思。更廣義的文章，也包含“學(xué)問(wèn)”“奧秘”等意思，如“洞明世事皆學(xué)問(wèn)，人情練達(dá)即文章”就是。</p>
                <p>“文章”的“章”字，是個(gè)會(huì)意字，從音從十。古代奏音樂(lè)，連奏十段才能結(jié)束（十，數(shù)之終也），這十段樂(lè)就是一章。所以，文章文章，也有段落。文章既從“音樂(lè)”里會(huì)意出來(lái)，應(yīng)是用文字表達(dá)出來(lái)的東西，讀起來(lái)如音樂(lè)一樣美妙無(wú)窮、悅耳動(dòng)聽的文字，傳誦開來(lái)，才配得上“文章”一詞的真正含義。</p>
                <br />
                <h3>釋義</h3>
                <p>“文”即“紋”，指“紋路”、“紋樣”。“章”本指“屏蔽”，轉(zhuǎn)指“外表”?！拔恼隆痹x指“有紋樣的表面”，諸如服裝上繡繪的龍鳳圖樣、皮膚上針刺的花卉圖案，等等。即其原義是指直接構(gòu)成視覺形象的圖樣。后指文字所描繪出來(lái)的事物圖樣，需要大腦“解碼”才能完整呈現(xiàn)的間接的事物形象。</p>
                <br />
                <h3>要素</h3>
                <p>文章的基本要素——主題、材料、結(jié)構(gòu)、語(yǔ)言，是文章學(xué)的主要研究對(duì)象，以往各種寫作論著論之甚詳，但對(duì)其概念內(nèi)涵的揭示似欠斟酌，定義并不嚴(yán)格。新近出版的寫作論著，或沿用舊說(shuō)，或雖有改動(dòng)而仍值得商榷。本文擬從嚴(yán)格意義上的定義要求出發(fā)，結(jié)合有關(guān)知識(shí)，對(duì)這四個(gè)要素概念的種種“定義”質(zhì)疑問(wèn)難，并試提出自己的修正意見，以就教于寫作界同行。</p>
                <br />
                <h3>擬題中常用的修辭手法和語(yǔ)言技巧主要有以下九種。</h3>
                <p>1、引用法就是借用俗語(yǔ)、名言或他人詩(shī)句等現(xiàn)成的語(yǔ)言材料來(lái)擬制標(biāo)題。引用法分直接引用和變形引用兩種情況。</p>
                <p>直接引用，就是把引用的語(yǔ)言材料不加改動(dòng)地直接取來(lái)作擬題之用。如理由的《揚(yáng)眉劍出鞘》，人民日?qǐng)?bào)評(píng)論員文章《鐵公雞—一毛不拔》，廖沫沙的《教然后知困》等，都屬于這種形式。直接引用比較簡(jiǎn)單，無(wú)須多說(shuō)。變形引用則非常復(fù)雜，需要著重談?wù)劇?lt;/p>
                <p>變形引用，就是把引用的語(yǔ)言材料經(jīng)過(guò)加工改造，然后再作擬題之用。變形引用根據(jù)不同的加工方式又可分為“反疊式”、“悖論式”、“諧變式”、“鑲嵌式”等不同形式。</p>
                <p>反疊式變形引用，就是利用其他文章標(biāo)題、俗語(yǔ)等進(jìn)行反面重疊，造成一種反疊式的標(biāo)題。如蒲魯東曾寫有《貧困的哲學(xué)》，馬克思便利用它寫了《哲學(xué)的貧困（答蒲魯東先生的<貧困的哲學(xué)>）》，這就是反疊式變形引用。此外，諸如《“回頭浪子”幫助浪子回頭》，《伯樂(lè)相馬與馬相伯樂(lè)》等，也都屬于這種形式。反疊式變形引用，內(nèi)容上可以使標(biāo)題產(chǎn)生新意，給人以新奇而幽默的感覺，形式上給人以對(duì)稱的美感。</p>
                <p>對(duì)常見的俗語(yǔ)、名言進(jìn)行加工改造，取其反義而用之，形成一種貌似荒謬卻又隱含著十分新穎而深刻的意義，這種引用方式叫“悖論式變形引用”。例如“班門弄斧”這句成語(yǔ)一般是用來(lái)諷刺那些在行家面前賣弄本事，沒有自知之明的人。而一位作者在介紹華羅庚赴美講學(xué)的一篇文章中卻擬用了《弄斧必到班門》這樣一個(gè)標(biāo)題。為什么呢？因?yàn)槿A羅庚赴美講學(xué)計(jì)劃講十個(gè)數(shù)學(xué)專題，為了與美國(guó)同行能在更高的層次上進(jìn)行學(xué)術(shù)交流，他決定在美國(guó)各大學(xué)所講的專題必須是該大學(xué)科研中的長(zhǎng)項(xiàng)。華羅庚戲稱自己這是“弄斧必到班門”，此文作者便取之為題。你看，這個(gè)標(biāo)題與“班門弄斧”的本義正好相悖，卻又含義深遠(yuǎn)，切合于文章內(nèi)容。此外，諸如《近水樓臺(tái)不得月》，《曲高未必合寡》，《要有“知人善免”的勇氣》等，也都屬于這種形式。</p>
                <p>諧音式變形引用，就是利用語(yǔ)言的同音現(xiàn)象，將引用的俗語(yǔ)、名言中的個(gè)別字詞加以替換，造成一種同音異義的語(yǔ)言效果，這種引用方式就叫“諧音式變形引用”。例如1987年1月25日《人民日?qǐng)?bào)·海外版》登載的蘇泰的文章《學(xué)而優(yōu)則“侍”》，標(biāo)題顯然是從《論語(yǔ)·子張》中的“學(xué)而優(yōu)則仕”一句變化而來(lái)。原來(lái)此文主題是贊揚(yáng)大學(xué)生勤工助學(xué)，放下架子，課余時(shí)間去咖啡廳為顧客服務(wù)。此外，如《以“職”論價(jià)》與俗語(yǔ)“以質(zhì)論價(jià)”諧音，《愛“才”如命》與成語(yǔ)“愛財(cái)如命”諧音，這些標(biāo)題與原句雖然只是一字之差，卻另出新意，醒人耳目。</p>
                <p>鑲嵌式變形引用，就是利用俗語(yǔ)、名言、古詩(shī)詞等原有的語(yǔ)句框架，選擇一些切合于文章內(nèi)容的字詞填嵌其中，使其另生新意。例如，有篇新聞報(bào)道，標(biāo)題是《助人何必曾相識(shí)，精神文明譜新歌》，其中前半句顯然出自唐代詩(shī)人白居易《琵琶行》詩(shī)中的“同是天涯淪落人，相逢何必曾相識(shí)”一句，將“助人”二字填嵌其中，便有了新的含義。又如有一篇市場(chǎng)調(diào)查，標(biāo)題為《知否？知否？應(yīng)是賤肥貴瘦》，顯然，這是襲用了宋代詩(shī)人李清照《如夢(mèng)令》詞中“知否？知否？應(yīng)是綠肥紅瘦”一句將“賤”、“貴”二字填嵌其中，也使標(biāo)題陡生新意。</p>
                <p>變形引用雖然方式各異，但都能巧妙地利用俗語(yǔ)、名言及古詩(shī)詞廣泛的傳播效應(yīng)，給人一種似曾相識(shí)，卻又頗含新意的感受，推陳出新，為我所用，使文章標(biāo)題更具魅力。</p>
                <p>2、疊加法所謂“疊加法”，就是在他人文章或言論的基礎(chǔ)上，進(jìn)一步深入研究探討，以其相同的寫作手法寫成文章，其標(biāo)題往往是以相同的語(yǔ)句疊加而成，故稱“疊加法”。運(yùn)用疊加法擬題最常見的一種形式，就是利用他人有關(guān)“批評(píng)”或“批判”而擬制新的駁論性文章標(biāo)題。這種標(biāo)題常常擬為《關(guān)于……批評(píng)的批評(píng)》，這種標(biāo)題有時(shí)也可采用多重否定的形式，但常見的是雙重否定形式。此外，諸如《關(guān)于啟示的啟示》，《對(duì)于“笑話”的笑話》等，也都是采用疊加法擬題的一種形式。</p>
                <p>3、對(duì)偶法就是擬題時(shí)把結(jié)構(gòu)相同，字?jǐn)?shù)相等的一對(duì)句子或詞組排列在一起，以表達(dá)相關(guān)、相聯(lián)或相反的意思。例如《半月談》評(píng)論員文章《尊師重教，育才興邦》（1985年第3期），其標(biāo)題就是采用對(duì)偶法擬制的。此外，諸如《運(yùn)用綜合技術(shù)開拓未來(lái)世界》，《高價(jià)水泥一斤不賣計(jì)劃指標(biāo)一袋不少》，《賣債券支援國(guó)家建設(shè)得獎(jiǎng)品為您增添喜悅》等，也都是采用對(duì)偶法擬制的標(biāo)題。</p>
                <p>采用對(duì)偶法擬制的標(biāo)題，兩個(gè)句子或詞組的意思彼此補(bǔ)充，相互映襯可將文章內(nèi)容達(dá)得更加深刻、鮮明，而且朗讀起富有節(jié)奏感，能增強(qiáng)標(biāo)題語(yǔ)言的藝術(shù)性。</p>
                <p>4、活用動(dòng)詞法文學(xué)作品描寫人物之所以能給人以深刻的印象，很重要的一點(diǎn)就是作者善于抓住人物富有典型意義的行為動(dòng)作來(lái)進(jìn)行描寫，只有這樣才能把人物寫“活”。擬制標(biāo)題也可以采用文學(xué)作品描寫人物的這種方法，根據(jù)文章內(nèi)容，選取具有典型意義的動(dòng)態(tài)性的詞句來(lái)擬制標(biāo)題，著眼于一個(gè)“動(dòng)”字，盡量把題目寫“活”例如，有篇文章記敘一位公共汽車女售票員，正確對(duì)待一個(gè)無(wú)理取鬧往自己身上吐痰的小青年，從而引起小青年自責(zé)的事。如果把題目擬成《售票員風(fēng)格高尚，乘車人行為可恥》便很一般。而這位作者卻不同凡響，將題目擬為《冷靜擦去一口痰，微笑震動(dòng)一顆心》，兩相比較，后者就顯得格外生動(dòng)感人。又如有則通報(bào)批評(píng)某單位制定的服務(wù)措施只是掛在墻上而沒有落實(shí)到行動(dòng)上，標(biāo)題是《讓措施從墻上“走”下來(lái)》。你看，一個(gè)“走”字，用得真是恰到好處，平字生輝。</p>
                <p>5、虛實(shí)結(jié)合法這是擬制雙行標(biāo)題所采用的一種擬題方法。大家知道，擬單行標(biāo)題，作者既可以用平實(shí)的文字開門見山地把文章主題或主要內(nèi)容直接傳達(dá)給讀者，直白陳事，實(shí)實(shí)在在，不需要任何修飾和點(diǎn)綴；也可以采用形象、含蓄的語(yǔ)句擬題，使標(biāo)題富有形象性和趣味性，詩(shī)情畫意，引人遐思。兩種方法雖各有千秋，但不免單調(diào)，而擬雙行標(biāo)題則可以把這兩種方法結(jié)合起來(lái)使用，使其中一行標(biāo)題形象、含蓄，另一行標(biāo)題平實(shí)、明快，這就是“虛實(shí)結(jié)合法”。采用這種方法擬制的標(biāo)題，其正題一般多采用富有形象性、含蓄性的語(yǔ)句擬制，其作用在于揭示和突出文章的主要內(nèi)容，副題則采用準(zhǔn)確、平實(shí)的語(yǔ)句擬制，它對(duì)正題具有診釋和限制的作用。例如，發(fā)表在《名作欣賞》1986年第3期上的朱炯強(qiáng)的文章</p>
                <p>6、設(shè)迷法就是采用類似于迷語(yǔ)的方式，在標(biāo)題中先有意設(shè)下一個(gè)“迷面”，使讀者產(chǎn)生懸念，誘發(fā)其想要急切解答的欲望，其“迷底”待閱讀全文之后自然揭曉。例如祖慰的文章《赫赫而無(wú)名的人生》（《文匯月刊》1987年第6期），題目起得就頗為古怪、有句成語(yǔ)叫“赫赫有名”，“赫赫”乃顯赫的意思，用來(lái)修飾“有名”，意思是名氣很大，聲名顯赫。既然“赫赫”，何來(lái)“無(wú)名”？待看過(guò)文章之后方才恍然：原來(lái)這篇文章是介紹中國(guó)導(dǎo)彈核潛艇的總設(shè)計(jì)師，一位人稱“中國(guó)核潛艇之父”的科學(xué)家的坎坷一生。核潛艇，乃尖端高科技產(chǎn)品，世界上只有極少數(shù)國(guó)家擁有，而中國(guó)已能自行設(shè)計(jì)、建造，這難道不是轟動(dòng)全球的赫赫偉業(yè)？而高科技軍事武器因?yàn)槭菄?guó)家保密項(xiàng)目，參與設(shè)計(jì)、建造的科學(xué)家自然也是“無(wú)名”的，所以題目就叫“赫赫而無(wú)名的人生”。此外，諸如《腰纏萬(wàn)貫的乞丐》，《從未見面的老朋友》，《一位沒結(jié)婚的男“媽媽”》等，也都是采用設(shè)迷法擬制的標(biāo)題。既然“腰纏萬(wàn)貫”，怎么會(huì)是“乞丐”？既然是“老朋友”怎么會(huì)沒見過(guò)面？“媽媽”都是女的，怎么會(huì)出來(lái)個(gè)男的，而且又是“沒結(jié)婚”的？這些標(biāo)題都給讀者留下了一個(gè)懸而未解的疑問(wèn)，答案只有閱讀了文章之后才會(huì)知曉。</p>
                <p>7、賓語(yǔ)前置法擬制標(biāo)題常常使用動(dòng)賓結(jié)構(gòu)的詞組或短句的形式。如恩格斯的《論權(quán)威》，毛澤東的《論人民民主專政》，吳伯簫的《記一輛紡車》等。但有時(shí)為了使標(biāo)題的形式有所變化，也可以把其中的賓語(yǔ)提到動(dòng)詞前面，變成賓語(yǔ)前置的形式。如馬克思的《資本論》，毛澤東的《實(shí)踐論》，《矛盾論》，薛福成的《觀巴黎油畫記》，蒸子的《無(wú)名禮贊》等。賓語(yǔ)前置式標(biāo)題與原來(lái)的標(biāo)題比較，只是形式不同，內(nèi)容并無(wú)變化，因此二者可以互換。</p>
                <p>8、隔點(diǎn)法運(yùn)用間隔號(hào)把標(biāo)題中兩三個(gè)具有某種聯(lián)系的單詞以并列的形式分隔開來(lái)，這種擬題方法就叫“隔點(diǎn)法”。例如魯迅的《貓·狗·鼠》，秦牧的《園林·扇畫·散文》，林平的《讀書·愛國(guó)·修身》（《文匯報(bào)》1981年5月3日版）等，都屬于這種形式。</p>
                <p>運(yùn)用隔點(diǎn)法擬制的標(biāo)題，其單詞排列整齊、勻稱，能給人以美感。另外，這種標(biāo)題形式還能產(chǎn)生懸念，吸引讀者閱讀。這種標(biāo)題一般多適用于雜文、隨筆一類的短篇議論文。</p>
                <p>9、冒號(hào)法近年來(lái)在報(bào)刊雜志上經(jīng)常出現(xiàn)一種新的標(biāo)題形式，這種標(biāo)題中間都加有一個(gè)冒號(hào)。例如莊建民的《選美：眾說(shuō)紛紜的話題》（《瞭望》1993年7月26日第30期），《瞭望》雜志社記者文章《1993：在夏收第一線》（《瞭望》1993年7月19日第29期）。</p>
                <p>這種標(biāo)題中的冒號(hào)一般具有兩個(gè)作用：一是表示前面內(nèi)容是對(duì)后面內(nèi)容的限制；二是表示后面內(nèi)容是對(duì)前面內(nèi)容某一個(gè)方面的診釋、介紹或闡述。一般情況下，這兩個(gè)作用是同兼的。如上述二例：例一，“選美”是對(duì)“眾說(shuō)紛紜的話題”的限制，“眾說(shuō)紛紜的話</p>
                <p>題”很多，“選美”只是其一；反過(guò)來(lái)，“選美”關(guān)系到的方面很多，“眾說(shuō)紛紜”只是對(duì)其中一個(gè)方面的闡述。例二，“1993”是對(duì)“在夏收第一線”時(shí)間上的限制；而“在夏收第一線”則是對(duì)1993年“夏收”這一個(gè)方面的介紹和闡述。</p>
                <p>擬制冒號(hào)標(biāo)題，一般總是將文字較少的名詞或名詞性詞組放在前面，而將文字較多的動(dòng)詞或名詞謂語(yǔ)部分放在后面，如上述二例即是。</p>
                <p>運(yùn)用冒號(hào)法擬題，可以準(zhǔn)確地揭示文章內(nèi)容，讓湊者在有限的標(biāo)題文字中獲取更多的內(nèi)容信息，還可以便標(biāo)題形式更加多樣化。這種標(biāo)題形式在新聞體裁和學(xué)術(shù)文章中比較多見。</p>
            </div>
        </div>
        <!-- /scroll-wrap -->
    </div>
</body>
</html>

1.2 CSS樣式

頁(yè)面內(nèi)容添加后，再添加樣式文件，創(chuàng)建scroll.css，代碼如下：

/** 
 容器
 */
.container{ width: 100%; font-size: 12px; }
.container::after{ display: block; content: ''; clear: both; }
.scroll-wrap{ width: 500px; height: 500px; overflow: hidden; border: 1px solid #ccc; color: #333; font-size: 14px; color: #666; line-height: 1.8; float: left; }
.scroll-wrap p{ text-indent: 2em; }

此時(shí)將scroll.css引入到html代碼中，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滾動(dòng)條</title>
    <link rel="stylesheet" href="css/scroll.css" rel="external nofollow"  rel="external nofollow" ></link>
</head>

1.3 創(chuàng)建scroll.js文件

創(chuàng)建滾動(dòng)條閉包文件，代碼如下：

(function(_win_, _doc_, _$_){
    /**
     * 定義 自定義滾動(dòng)條插件
     * @param {*} options 
     */
    _$_.fn.customScroll = function(options){
    }
})(window, document, jQuery);

jQuery插件開發(fā)有兩個(gè)方法使用較多，分別是$.fn和$.extend。如以上代碼已使用$.fn擴(kuò)展了customScroll方法，此時(shí)可需對(duì)外提供相應(yīng)接口，這時(shí)則需要使用到$.extend了，代碼如下：

(function(_win_, _doc_, _$_){
    /**
     * 定義 自定義滾動(dòng)條插件
     * @param {*} options 
     */
    _$_.fn.customScroll = function(options){
        options = $.extend(true, {
            wrap: 'scroll-container',                   //容器
            contentVisableBox: 'scroll-content-box',    //內(nèi)容可顯示區(qū)域
            content: 'scroll-content',                  //內(nèi)容容器
            barBox: 'scroll-bar-box',                   //滑軌區(qū)域
            barHandle: 'scroll-bar-handle',             //滑軌中手柄
            wheelSpeed: 5,                              //滾輪滑動(dòng)速度
        }, options);
    }
})(window, document, jQuery);

 注：$.extend第一個(gè)參數(shù)為true，則表示后面合并對(duì)象會(huì)進(jìn)入深度合并，否則只合并對(duì)象的第一層屬性或方法。

這里我們將對(duì)應(yīng)容器的類名和相應(yīng)參數(shù)對(duì)外暴露，以便調(diào)用和初始化插件時(shí)，可以個(gè)性化定制和擴(kuò)展。

此時(shí)我們?cè)賹croll.js引入到html頁(yè)面中，引入前，必須先引入jquery-3.6.4.min.js，因?yàn)樵蹅儾寮r(shí)基于jquery基礎(chǔ)上開發(fā)的，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滾動(dòng)條</title>
    <link rel="stylesheet" href="css/scroll.css" rel="external nofollow"  rel="external nofollow" ></link>
    <script type="text/javascript" src="js/jquery-3.6.4.min.js"></script>
    <script type="text/javascript" src="js/scroll.js"></script>
</head>

二、功能開發(fā)

實(shí)現(xiàn)自定義滾動(dòng)條結(jié)構(gòu)如下圖，通過(guò)此圖我們可以更清晰了解頁(yè)面代碼。

2.1 初始化頁(yè)面結(jié)構(gòu)

如上圖，當(dāng)用戶引用自定義滾動(dòng)條插件時(shí)，為了更方便使用，則上圖結(jié)構(gòu)我們通過(guò)js來(lái)實(shí)現(xiàn)，代碼如下：

 
(function(_win_, _doc_, _$_){
    /**
     * 定義 自定義滾動(dòng)條插件
     * @param {*} options 
     */
    _$_.fn.customScroll = function(options){
        options = $.extend(true, {
            wrap: 'scroll-container',                   //容器
            contentVisableBox: 'scroll-content-box',    //內(nèi)容可顯示區(qū)域
            content: 'scroll-content',                  //內(nèi)容容器
            barBox: 'scroll-bar-box',                   //滑軌區(qū)域
            barHandle: 'scroll-bar-handle',             //滑軌中手柄
            wheelSpeed: 5,                              //滾輪滑動(dòng)速度
        }, options);
        var _html = $(this).html(),
            //創(chuàng)建容器DOM
            _scrollWrap = $('<div />').addClass(options.wrap),
            //創(chuàng)建 內(nèi)容可顯示區(qū)域 DOM
            _contentVisableBox = $('<div />').addClass(options.contentVisableBox),
            //創(chuàng)建 內(nèi)容容器 DOM
            _content = $('<div />').addClass(options.content),
            //創(chuàng)建滑軌區(qū)域 DOM
            _scrollBarBox = $('<div />').addClass(options.barBox),
            //創(chuàng)建 滑軌中手柄 DOM
            _scrollHandle = $('<div />').addClass(options.barHandle);
        //內(nèi)容添加到內(nèi)容容器中
        _content.html(_html);    
        //內(nèi)容追加到 內(nèi)容可顯示區(qū)域中
        _content.appendTo(_contentVisableBox);
        //手柄添加到滑軌區(qū)域中
        _scrollHandle.appendTo(_scrollBarBox);
        //內(nèi)容可見區(qū)域添加到容器中
        _scrollWrap.append(_contentVisableBox);
        //滑軌區(qū)域添加到容器中
        _scrollWrap.append(_scrollBarBox);
        //替換原內(nèi)容區(qū)域
        $(this).replaceWith(_scrollWrap);
    }
})(window, document, jQuery);

以上代碼大家可能還不太理解，這塊給大家分析下，

以上DOM結(jié)構(gòu)，對(duì)應(yīng)上面結(jié)構(gòu)圖內(nèi)容，不太明白的，可以對(duì)照多看幾遍。

  • wrap對(duì)應(yīng)DOM則為結(jié)構(gòu)圖中最外層大容器；
  • contentVisableBox對(duì)應(yīng)DOM為內(nèi)容可見區(qū)域，超出部分影響；后面內(nèi)容滾動(dòng)綁定scrollTop則在該DOM上
  • content對(duì)應(yīng)DOM為內(nèi)容存放區(qū)域，內(nèi)容實(shí)際高度，則需在DOM上獲??；
  • barBox對(duì)應(yīng)DOM滾動(dòng)條可滾動(dòng)區(qū)域，滾動(dòng)條手柄只能在該區(qū)域滑動(dòng)；
  • barHandle對(duì)應(yīng)DOM為滾動(dòng)條手柄，鼠標(biāo)點(diǎn)擊移動(dòng)區(qū)域執(zhí)行上下拖動(dòng)功能
  • wheelSpeed為滾輪滑動(dòng)的速度

2.2 添加樣式

此時(shí)我們?cè)僭黾映跏蓟?，自定義滾動(dòng)條區(qū)域的樣式添加到scroll.css中，代碼如下：

/* scroll-container */
.scroll-container{ height: 100%; position: relative; padding-right: 10px; }
 
/* scroll-content */
.scroll-container .scroll-content{ position: relative; padding: 15px; }
 
/* scroll-content-box */
.scroll-container .scroll-content-box{ width: 100%; height: 100%; overflow: hidden; }
 
/* scroll-bar-box */
.scroll-container .scroll-bar-box{ width: 10px; height: 100%; padding: 1px; box-sizing: border-box; background-color: #eee; border-left: 1px solid #ccc; position: absolute; top: 0; right: 0; z-index: 10; }
.scroll-container .scroll-bar-box .scroll-bar-handle{ width: 100%; height: 100px; background-color: #ccc; border-radius: 10px; position: relative; left: 0; top: 0; z-index: 1; }

這里自定義滾動(dòng)條樣式直接放在頁(yè)面樣式中，如果你希望開發(fā)一套獨(dú)立的插件，可以將樣式和js代碼進(jìn)行剝離，單獨(dú)編寫，方便后期引用和維護(hù)。

2.3 滾動(dòng)條插件初始化

此時(shí)，自定義滾動(dòng)條插件函數(shù)已定義，樣式也添加好了，可以在頁(yè)面初始化插件了。在body標(biāo)簽尾部，添加script代碼，代碼如下：

<script type="text/javascript">
$(function(){
    $('#scroll').customScroll();
});     
</script> 
</body>
</html>

現(xiàn)在頁(yè)面效果如下圖：

初始化后html結(jié)構(gòu)如下：

2.4 定義變量

定義滾動(dòng)條移動(dòng)中所需要的變量，代碼如下：

(function(_win_, _doc_, _$_){
 
    /**
     * 定義 自定義滾動(dòng)條插件
     * @param {*} options 
     */
    _$_.fn.customScroll = function(options){
        options = $.extend(true, {
            wrap: 'scroll-container',                   //容器
            contentVisableBox: 'scroll-content-box',    //內(nèi)容可顯示區(qū)域
            content: 'scroll-content',                  //內(nèi)容容器
            barBox: 'scroll-bar-box',                   //滑軌區(qū)域
            barHandle: 'scroll-bar-handle',             //滑軌中手柄
            wheelSpeed: 5,                              //滾輪滑動(dòng)速度
        }, options);
 
        //略...
 
        //替換原內(nèi)容區(qū)域
        $(this).replaceWith(_scrollWrap);
 
        var slideHeightLimit = 0,           //滑軌可移動(dòng)高度
            slideHeight = 0,                //滑軌區(qū)域高度
            slideHandleHeight = 0,          //滑軌手柄高度
            contentVisibleHeight = 0,       //內(nèi)容可見區(qū)域
            contentHeight = 0,              //內(nèi)容實(shí)際高度
            startTop = 0,                   //滑軌手柄移動(dòng)位置
            startPageY = 0,                 //當(dāng)前點(diǎn)擊時(shí)鼠標(biāo)點(diǎn)擊的位置
            flag = false;
        
        
    }
 
})(window, document, jQuery);

2.5 獲取對(duì)應(yīng)參數(shù)

在插件中定義initialData()函數(shù)，用來(lái)獲取2.4中所定義變量數(shù)據(jù)，代碼如下：

(function(_win_, _doc_, _$_){
 
    /**
     * 定義 自定義滾動(dòng)條插件
     * @param {*} options 
     */
    _$_.fn.customScroll = function(options){
        options = $.extend(true, {
            wrap: 'scroll-container',                   //容器
            contentVisableBox: 'scroll-content-box',            //內(nèi)容可顯示區(qū)域
            content: 'scroll-content',                  //內(nèi)容容器
            barBox: 'scroll-bar-box',                   //滑軌區(qū)域
            barHandle: 'scroll-bar-handle',             //滑軌中手柄
            wheelSpeed: 5,                              //滾輪滑動(dòng)速度
        }, options);
 
        //略...
 
        //替換原內(nèi)容區(qū)域
        $(this).replaceWith(_scrollWrap);
 
        var slideHeightLimit = 0,           //滑軌可移動(dòng)高度
            slideHeight = 0,                //滑軌區(qū)域高度
            slideHandleHeight = 0,          //滑軌手柄高度
            contentVisibleHeight = 0,       //內(nèi)容可見區(qū)域
            contentHeight = 0,              //內(nèi)容實(shí)際高度
            ratio = 0,                      //滑軌區(qū)域高度與內(nèi)容高度 比例
            startTop = 0,                   //滑軌手柄移動(dòng)位置
            startPageY = 0,                 //當(dāng)前點(diǎn)擊時(shí)鼠標(biāo)點(diǎn)擊的位置
            flag = false;
        
        /**
         * 初始化數(shù)據(jù)
         */
        function initialData(){
            slideHeight = _scrollBarBox.height();               //滑軌區(qū)域高度
            contentHeight = _content.height();                  //內(nèi)容實(shí)際高度
            ratio = slideHeight / contentHeight;                //比例
            slideHandleHeight = ratio * slideHeight;                //滑軌手柄高度
            slideHeightLimit = slideHeight - slideHandleHeight;     //計(jì)算滑塊可活動(dòng)范圍
            startTop = parseInt(_scrollHandle.css('top'));          //獲取滑塊top開始位置
 
            //根據(jù)比例設(shè)置手柄高度
            _scrollHandle.height(slideHandleHeight);
        }
 
        //執(zhí)行初始化函數(shù)
        initialData();
    }
 
})(window, document, jQuery);

以上數(shù)據(jù)初始化，刷新頁(yè)面發(fā)現(xiàn)還沒啥變量，只有滾動(dòng)條手柄高度在DOM上重新設(shè)定了，如下圖：

2.6 實(shí)現(xiàn)拖放滾動(dòng)事件

在實(shí)現(xiàn)自定義滾動(dòng)條事件，我們需要使用到mousedown、mousemove、mouseup三個(gè)事件，我們使用jquery方法來(lái)添加這三個(gè)事件，代碼如下：

 
(function(_win_, _doc_, _$_){
   
    /**
     * 定義 自定義滾動(dòng)條插件
     * @param {*} options 
     */
    _$_.fn.customScroll = function(options){
        options = $.extend(true, {
            wrap: 'scroll-container',                   //容器
            contentVisableBox: 'scroll-content-box',            //內(nèi)容可顯示區(qū)域
            content: 'scroll-content',                  //內(nèi)容容器
            barBox: 'scroll-bar-box',                   //滑軌區(qū)域
            barHandle: 'scroll-bar-handle',             //滑軌中手柄
            wheelSpeed: 5,                              //滾輪滑動(dòng)速度
        }, options);
 
        var _html = $(this).html(),
            //創(chuàng)建容器DOM
            _scrollWrap = $('<div />').addClass(options.wrap),
            //創(chuàng)建 內(nèi)容可顯示區(qū)域 DOM
            _contentVisableBox = $('<div />').addClass(options.contentVisableBox),
            //創(chuàng)建 內(nèi)容容器 DOM
            _content = $('<div />').addClass(options.content),
            //創(chuàng)建滑軌區(qū)域 DOM
            _scrollBarBox = $('<div />').addClass(options.barBox),
            //創(chuàng)建 滑軌中手柄 DOM
            _scrollHandle = $('<div />').addClass(options.barHandle);
        
        //略...
 
        var slideHeightLimit = 0,           //滑軌可移動(dòng)高度
            slideHeight = 0,                //滑軌區(qū)域高度
            slideHandleHeight = 0,          //滑軌手柄高度
            contentVisibleHeight = 0,       //內(nèi)容可見區(qū)域
            contentHeight = 0,              //內(nèi)容實(shí)際高度
            ratio = 0,                      //滑軌區(qū)域高度與內(nèi)容高度 比例
            startTop = 0,                   //滑軌手柄移動(dòng)位置
            startPageY = 0,                 //當(dāng)前點(diǎn)擊時(shí)鼠標(biāo)點(diǎn)擊的位置
            flag = false;
        
        
        /**
         * 初始化數(shù)據(jù)
         */
        function initialData(){
            slideHeight = _scrollBarBox.height();               //滑軌區(qū)域高度
            contentHeight = _content.height();                  //內(nèi)容實(shí)際高度
            contentVisibleHeight = _contentVisableBox.height(); //內(nèi)容可見區(qū)域
            ratio = slideHeight / contentHeight;                //比例
            slideHandleHeight = ratio * slideHeight;                //滑軌手柄高度
            slideHeightLimit = slideHeight - slideHandleHeight;     //計(jì)算滑塊可活動(dòng)范圍
            startTop = parseInt(_scrollHandle.css('top'));          //獲取滑塊top開始位置
 
            //根據(jù)比例設(shè)置手柄高度
            _scrollHandle.height(slideHandleHeight);
        }
 
        //執(zhí)行初始化函數(shù)
        initialData();
 
        //添加監(jiān)聽鼠標(biāo)點(diǎn)擊事件
        _scrollHandle.on('mousedown', function(e){
            e.preventDefault();
            flag = true;            //標(biāo)識(shí)開始滑動(dòng)
            startPageY = e.pageY;   //獲取鼠標(biāo)開始位置
        });
 
        
        //添加監(jiān)聽鼠標(biāo)滾動(dòng)事件
        $(_doc_).on('mousemove', function(e){
            if(flag){
                 //do something...
            }
        });
 
        //添加監(jiān)聽鼠標(biāo)放開事件
        $(_doc_).on('mouseup', function(e){
            flag = false;
        });
    }
 
})(window, document, jQuery);

        當(dāng)點(diǎn)擊mousedown事件時(shí)，標(biāo)記啟動(dòng)滾動(dòng)條滑動(dòng)事件，將flag賦值為true，并獲取點(diǎn)擊手柄時(shí)鼠標(biāo)點(diǎn)擊的pageY坐標(biāo)位置，并賦值給startPageY。

        當(dāng)鼠標(biāo)點(diǎn)擊不放并移動(dòng)時(shí)，mousemove事件中判斷flag為true時(shí)執(zhí)行，并修改滾動(dòng)條手柄相關(guān)參數(shù)。

        當(dāng)鼠標(biāo)放開時(shí)，并flag賦值為false，表示停止滑動(dòng)，釋放事件。

2.7 計(jì)算滾動(dòng)范圍并賦值

以上事件已經(jīng)添加了，但現(xiàn)在滾動(dòng)條還無(wú)法拖動(dòng)，這里我們需要通過(guò)計(jì)算并賦值修改相應(yīng)參數(shù)，使?jié)L動(dòng)條手柄和內(nèi)容進(jìn)行移動(dòng)。這里手柄我們通過(guò)postion定準(zhǔn)，修改其top位置；內(nèi)容區(qū)域修改可見區(qū)域的scrollTop實(shí)現(xiàn)內(nèi)容滾動(dòng)。這里定位 moveScroll()函數(shù)，來(lái)處理此操作。在initialData函數(shù)后面追加以下代碼：

/**
 * 移動(dòng)滑塊和內(nèi)容區(qū)域 功能函數(shù)
 * @param {*} moveLen 
 * @param {*} moveContLen 
 */
function moveScroll(moveLen, moveContLen){
	//獲取最新滑塊位置            
	var _top = parseInt(_scrollHandle.css('top'));
	//在滑塊可移動(dòng)范圍內(nèi)
	if(moveLen>0&&moveLen<slideHeightLimit){
		_scrollHandle.css({top: moveLen + 'px' });
		_contentVisableBox.scrollTop(moveContLen);
	}
	//滑塊小于0情況處理
	else if(_top!=0&&moveLen<=0){
		_scrollHandle.css({top: '0px' });
		_contentVisableBox.scrollTop(0);
	}
	//滑塊大于最大范圍情況處理
	else if(_top!=contentHeight&&moveLen>=slideHeightLimit){
		_scrollHandle.css({top: slideHeightLimit + 'px' });
		_contentVisableBox.scrollTop(contentHeight);
	}
}

       以上寫法可能會(huì)存在不足之處，大家有更好算法或?qū)懛砂醋约盒枨筮M(jìn)行編寫。

        此時(shí)將initialData()放到mousedown事件中，以防頁(yè)面dom未加載完成，或后期內(nèi)容被動(dòng)態(tài)修改，所以在執(zhí)行滑動(dòng)前重新獲取初始數(shù)據(jù)。

        將moveScroll()函數(shù)放到mousemove事件，當(dāng)標(biāo)記flag為true時(shí)，執(zhí)行滾動(dòng)條手柄和內(nèi)容移動(dòng)操作。

代碼如下：

//添加監(jiān)聽鼠標(biāo)點(diǎn)擊事件
_scrollHandle.on('mousedown', function(e){
	e.preventDefault();
	flag = true;            //標(biāo)識(shí)開始滑動(dòng)
	startPageY = e.pageY;   //獲取鼠標(biāo)開始位置
 
	initialData();          //重新獲取內(nèi)容比例
});
 
 
//添加監(jiān)聽鼠標(biāo)滾動(dòng)事件
$(_doc_).on('mousemove', function(e){
	if(flag){
		var moveLen = e.pageY - startPageY + startTop,  //計(jì)算滑塊移動(dòng)位置
			moveContLen = moveLen / ratio;              //通過(guò)手柄位置計(jì)算內(nèi)容移動(dòng)位置
		//開始移動(dòng)
		moveScroll(moveLen, moveContLen);
	}
});
 
//添加監(jiān)聽鼠標(biāo)放開事件
$(_doc_).on('mouseup', function(e){
	flag = false;
});

寫了這么久，自定義滾動(dòng)條終于完成，可以點(diǎn)擊拖放滑動(dòng)了。

2.8 滾輪事件

瀏覽器中，我們可以通過(guò)鼠標(biāo)滾輪上下滑動(dòng)翻看內(nèi)容，這里在自定義滾動(dòng)條功能中也可以實(shí)現(xiàn)，為了兼容瀏覽器，并使用jquery進(jìn)行監(jiān)聽，代碼如下：

//監(jiān)聽滾動(dòng)事件
_scrollWrap.on('mousewheel DOMMouseScroll', function(e){
	e.preventDefault();
 
	initialData();      //初始化數(shù)據(jù)
 
	var oEv = e.originalEvent,
		wheelRange = oEv.wheelDelta ? -oEv.wheelDelta/120 : (oEv.detail || 0)/3,
		moveLen = startTop + (wheelRange * options.wheelSpeed),
		moveContLen = moveLen / ratio;
 
	//開始移動(dòng)
	moveScroll(moveLen, moveContLen);
});

給滾動(dòng)條區(qū)域最外層容器上添加監(jiān)聽事件，當(dāng)監(jiān)聽到滾動(dòng)事件時(shí)，初始化所要數(shù)據(jù)，并且計(jì)算wheelRange值，用來(lái)判斷滾輪是向上，還是向下移動(dòng)。向下wheelRange值為1，向上值為-1。

wheelSpeed變量，我們之前在options中已對(duì)外開放，這里默認(rèn)為5，如果覺得速度太慢，可以在初始化時(shí)，修改此變量，代碼如下：

<script type="text/javascript">
$(function(){
    $('#scroll').customScroll({
        wheelSpeed: 6
    });
});     
</script>

此時(shí)options中wheelSpeed參數(shù)值已被修改，如下圖：

到這里，自定義滾動(dòng)條功能已完成，在頁(yè)面中可以拖動(dòng)滾動(dòng)條手柄進(jìn)行上班移動(dòng)，也可以通過(guò)滾輪進(jìn)行上下翻看內(nèi)容了。

三、TAB標(biāo)簽  

3.1 添加tab結(jié)構(gòu)html

在html頁(yè)面中，container類容器中添加tab代碼，代碼如下：

<!-- scroll-tab-wrap -->
<div class="scroll-tab-wrap">
	<div class="nav-list-box" id="navList">
		<div class="list-item active">
			<p>文章一</p>
		</div>
		<div class="list-item">
			<p>文章二</p>
		</div>
	</div>
	<div class="tab-container" id="tabScroll">
		<div class="tab-panel">
			<div class="content">
				<h3>文章一</h3>
				<p>文章包括各種文體的著作、作品，如詩(shī)歌、戲劇、小說(shuō)、科學(xué)論文，記敘文、議論文、說(shuō)明文、應(yīng)用文等等。“千古文章未盡才”“文章千古事”“文章憎命達(dá)”“板凳要坐十年冷、文章不寫一字空”“積句而成章，積章而成篇”“言出為論，下筆成章”等，都是現(xiàn)在所說(shuō)的文章的意思。更廣義的文章，也包含“學(xué)問(wèn)”“奧秘”等意思，如“洞明世事皆學(xué)問(wèn)，人情練達(dá)即文章”就是。</p>
				<p>“文章”的“章”字，是個(gè)會(huì)意字，從音從十。古代奏音樂(lè)，連奏十段才能結(jié)束（十，數(shù)之終也），這十段樂(lè)就是一章。所以，文章文章，也有段落。文章既從“音樂(lè)”里會(huì)意出來(lái)，應(yīng)是用文字表達(dá)出來(lái)的東西，讀起來(lái)如音樂(lè)一樣美妙無(wú)窮、悅耳動(dòng)聽的文字，傳誦開來(lái)，才配得上“文章”一詞的真正含義。</p>
				<br />
				<h3>釋義</h3>
				<p>“文”即“紋”，指“紋路”、“紋樣”?！罢隆北局浮捌帘巍?，轉(zhuǎn)指“外表”。“文章”原義指“有紋樣的表面”，諸如服裝上繡繪的龍鳳圖樣、皮膚上針刺的花卉圖案，等等。即其原義是指直接構(gòu)成視覺形象的圖樣。后指文字所描繪出來(lái)的事物圖樣，需要大腦“解碼”才能完整呈現(xiàn)的間接的事物形象。</p>
				<br />
				<h3>要素</h3>
				<p>文章的基本要素——主題、材料、結(jié)構(gòu)、語(yǔ)言，是文章學(xué)的主要研究對(duì)象，以往各種寫作論著論之甚詳，但對(duì)其概念內(nèi)涵的揭示似欠斟酌，定義并不嚴(yán)格。新近出版的寫作論著，或沿用舊說(shuō)，或雖有改動(dòng)而仍值得商榷。本文擬從嚴(yán)格意義上的定義要求出發(fā)，結(jié)合有關(guān)知識(shí)，對(duì)這四個(gè)要素概念的種種“定義”質(zhì)疑問(wèn)難，并試提出自己的修正意見，以就教于寫作界同行。</p>
				<br />
				<h3>擬題中常用的修辭手法和語(yǔ)言技巧主要有以下九種。</h3>
				<p>1、引用法就是借用俗語(yǔ)、名言或他人詩(shī)句等現(xiàn)成的語(yǔ)言材料來(lái)擬制標(biāo)題。引用法分直接引用和變形引用兩種情況。</p>
				<p>直接引用，就是把引用的語(yǔ)言材料不加改動(dòng)地直接取來(lái)作擬題之用。如理由的《揚(yáng)眉劍出鞘》，人民日?qǐng)?bào)評(píng)論員文章《鐵公雞—一毛不拔》，廖沫沙的《教然后知困》等，都屬于這種形式。直接引用比較簡(jiǎn)單，無(wú)須多說(shuō)。變形引用則非常復(fù)雜，需要著重談?wù)劇?lt;/p>
				<p>變形引用，就是把引用的語(yǔ)言材料經(jīng)過(guò)加工改造，然后再作擬題之用。變形引用根據(jù)不同的加工方式又可分為“反疊式”、“悖論式”、“諧變式”、“鑲嵌式”等不同形式。</p>
				<p>反疊式變形引用，就是利用其他文章標(biāo)題、俗語(yǔ)等進(jìn)行反面重疊，造成一種反疊式的標(biāo)題。如蒲魯東曾寫有《貧困的哲學(xué)》，馬克思便利用它寫了《哲學(xué)的貧困（答蒲魯東先生的<貧困的哲學(xué)>）》，這就是反疊式變形引用。此外，諸如《“回頭浪子”幫助浪子回頭》，《伯樂(lè)相馬與馬相伯樂(lè)》等，也都屬于這種形式。反疊式變形引用，內(nèi)容上可以使標(biāo)題產(chǎn)生新意，給人以新奇而幽默的感覺，形式上給人以對(duì)稱的美感。</p>
				<p>對(duì)常見的俗語(yǔ)、名言進(jìn)行加工改造，取其反義而用之，形成一種貌似荒謬卻又隱含著十分新穎而深刻的意義，這種引用方式叫“悖論式變形引用”。例如“班門弄斧”這句成語(yǔ)一般是用來(lái)諷刺那些在行家面前賣弄本事，沒有自知之明的人。而一位作者在介紹華羅庚赴美講學(xué)的一篇文章中卻擬用了《弄斧必到班門》這樣一個(gè)標(biāo)題。為什么呢？因?yàn)槿A羅庚赴美講學(xué)計(jì)劃講十個(gè)數(shù)學(xué)專題，為了與美國(guó)同行能在更高的層次上進(jìn)行學(xué)術(shù)交流，他決定在美國(guó)各大學(xué)所講的專題必須是該大學(xué)科研中的長(zhǎng)項(xiàng)。華羅庚戲稱自己這是“弄斧必到班門”，此文作者便取之為題。你看，這個(gè)標(biāo)題與“班門弄斧”的本義正好相悖，卻又含義深遠(yuǎn)，切合于文章內(nèi)容。此外，諸如《近水樓臺(tái)不得月》，《曲高未必合寡》，《要有“知人善免”的勇氣》等，也都屬于這種形式。</p>
				<p>諧音式變形引用，就是利用語(yǔ)言的同音現(xiàn)象，將引用的俗語(yǔ)、名言中的個(gè)別字詞加以替換，造成一種同音異義的語(yǔ)言效果，這種引用方式就叫“諧音式變形引用”。例如1987年1月25日《人民日?qǐng)?bào)·海外版》登載的蘇泰的文章《學(xué)而優(yōu)則“侍”》，標(biāo)題顯然是從《論語(yǔ)·子張》中的“學(xué)而優(yōu)則仕”一句變化而來(lái)。原來(lái)此文主題是贊揚(yáng)大學(xué)生勤工助學(xué)，放下架子，課余時(shí)間去咖啡廳為顧客服務(wù)。此外，如《以“職”論價(jià)》與俗語(yǔ)“以質(zhì)論價(jià)”諧音，《愛“才”如命》與成語(yǔ)“愛財(cái)如命”諧音，這些標(biāo)題與原句雖然只是一字之差，卻另出新意，醒人耳目。</p>
				<p>鑲嵌式變形引用，就是利用俗語(yǔ)、名言、古詩(shī)詞等原有的語(yǔ)句框架，選擇一些切合于文章內(nèi)容的字詞填嵌其中，使其另生新意。例如，有篇新聞報(bào)道，標(biāo)題是《助人何必曾相識(shí)，精神文明譜新歌》，其中前半句顯然出自唐代詩(shī)人白居易《琵琶行》詩(shī)中的“同是天涯淪落人，相逢何必曾相識(shí)”一句，將“助人”二字填嵌其中，便有了新的含義。又如有一篇市場(chǎng)調(diào)查，標(biāo)題為《知否？知否？應(yīng)是賤肥貴瘦》，顯然，這是襲用了宋代詩(shī)人李清照《如夢(mèng)令》詞中“知否？知否？應(yīng)是綠肥紅瘦”一句將“賤”、“貴”二字填嵌其中，也使標(biāo)題陡生新意。</p>
				<p>變形引用雖然方式各異，但都能巧妙地利用俗語(yǔ)、名言及古詩(shī)詞廣泛的傳播效應(yīng)，給人一種似曾相識(shí)，卻又頗含新意的感受，推陳出新，為我所用，使文章標(biāo)題更具魅力。</p>
				<p>2、疊加法所謂“疊加法”，就是在他人文章或言論的基礎(chǔ)上，進(jìn)一步深入研究探討，以其相同的寫作手法寫成文章，其標(biāo)題往往是以相同的語(yǔ)句疊加而成，故稱“疊加法”。運(yùn)用疊加法擬題最常見的一種形式，就是利用他人有關(guān)“批評(píng)”或“批判”而擬制新的駁論性文章標(biāo)題。這種標(biāo)題常常擬為《關(guān)于……批評(píng)的批評(píng)》，這種標(biāo)題有時(shí)也可采用多重否定的形式，但常見的是雙重否定形式。此外，諸如《關(guān)于啟示的啟示》，《對(duì)于“笑話”的笑話》等，也都是采用疊加法擬題的一種形式。</p>
				<p>3、對(duì)偶法就是擬題時(shí)把結(jié)構(gòu)相同，字?jǐn)?shù)相等的一對(duì)句子或詞組排列在一起，以表達(dá)相關(guān)、相聯(lián)或相反的意思。例如《半月談》評(píng)論員文章《尊師重教，育才興邦》（1985年第3期），其標(biāo)題就是采用對(duì)偶法擬制的。此外，諸如《運(yùn)用綜合技術(shù)開拓未來(lái)世界》，《高價(jià)水泥一斤不賣計(jì)劃指標(biāo)一袋不少》，《賣債券支援國(guó)家建設(shè)得獎(jiǎng)品為您增添喜悅》等，也都是采用對(duì)偶法擬制的標(biāo)題。</p>
				<p>采用對(duì)偶法擬制的標(biāo)題，兩個(gè)句子或詞組的意思彼此補(bǔ)充，相互映襯可將文章內(nèi)容達(dá)得更加深刻、鮮明，而且朗讀起富有節(jié)奏感，能增強(qiáng)標(biāo)題語(yǔ)言的藝術(shù)性。</p>
				<p>4、活用動(dòng)詞法文學(xué)作品描寫人物之所以能給人以深刻的印象，很重要的一點(diǎn)就是作者善于抓住人物富有典型意義的行為動(dòng)作來(lái)進(jìn)行描寫，只有這樣才能把人物寫“活”。擬制標(biāo)題也可以采用文學(xué)作品描寫人物的這種方法，根據(jù)文章內(nèi)容，選取具有典型意義的動(dòng)態(tài)性的詞句來(lái)擬制標(biāo)題，著眼于一個(gè)“動(dòng)”字，盡量把題目寫“活”例如，有篇文章記敘一位公共汽車女售票員，正確對(duì)待一個(gè)無(wú)理取鬧往自己身上吐痰的小青年，從而引起小青年自責(zé)的事。如果把題目擬成《售票員風(fēng)格高尚，乘車人行為可恥》便很一般。而這位作者卻不同凡響，將題目擬為《冷靜擦去一口痰，微笑震動(dòng)一顆心》，兩相比較，后者就顯得格外生動(dòng)感人。又如有則通報(bào)批評(píng)某單位制定的服務(wù)措施只是掛在墻上而沒有落實(shí)到行動(dòng)上，標(biāo)題是《讓措施從墻上“走”下來(lái)》。你看，一個(gè)“走”字，用得真是恰到好處，平字生輝。</p>
				<p>5、虛實(shí)結(jié)合法這是擬制雙行標(biāo)題所采用的一種擬題方法。大家知道，擬單行標(biāo)題，作者既可以用平實(shí)的文字開門見山地把文章主題或主要內(nèi)容直接傳達(dá)給讀者，直白陳事，實(shí)實(shí)在在，不需要任何修飾和點(diǎn)綴；也可以采用形象、含蓄的語(yǔ)句擬題，使標(biāo)題富有形象性和趣味性，詩(shī)情畫意，引人遐思。兩種方法雖各有千秋，但不免單調(diào)，而擬雙行標(biāo)題則可以把這兩種方法結(jié)合起來(lái)使用，使其中一行標(biāo)題形象、含蓄，另一行標(biāo)題平實(shí)、明快，這就是“虛實(shí)結(jié)合法”。采用這種方法擬制的標(biāo)題，其正題一般多采用富有形象性、含蓄性的語(yǔ)句擬制，其作用在于揭示和突出文章的主要內(nèi)容，副題則采用準(zhǔn)確、平實(shí)的語(yǔ)句擬制，它對(duì)正題具有診釋和限制的作用。例如，發(fā)表在《名作欣賞》1986年第3期上的朱炯強(qiáng)的文章</p>
				<p>6、設(shè)迷法就是采用類似于迷語(yǔ)的方式，在標(biāo)題中先有意設(shè)下一個(gè)“迷面”，使讀者產(chǎn)生懸念，誘發(fā)其想要急切解答的欲望，其“迷底”待閱讀全文之后自然揭曉。例如祖慰的文章《赫赫而無(wú)名的人生》（《文匯月刊》1987年第6期），題目起得就頗為古怪、有句成語(yǔ)叫“赫赫有名”，“赫赫”乃顯赫的意思，用來(lái)修飾“有名”，意思是名氣很大，聲名顯赫。既然“赫赫”，何來(lái)“無(wú)名”？待看過(guò)文章之后方才恍然：原來(lái)這篇文章是介紹中國(guó)導(dǎo)彈核潛艇的總設(shè)計(jì)師，一位人稱“中國(guó)核潛艇之父”的科學(xué)家的坎坷一生。核潛艇，乃尖端高科技產(chǎn)品，世界上只有極少數(shù)國(guó)家擁有，而中國(guó)已能自行設(shè)計(jì)、建造，這難道不是轟動(dòng)全球的赫赫偉業(yè)？而高科技軍事武器因?yàn)槭菄?guó)家保密項(xiàng)目，參與設(shè)計(jì)、建造的科學(xué)家自然也是“無(wú)名”的，所以題目就叫“赫赫而無(wú)名的人生”。此外，諸如《腰纏萬(wàn)貫的乞丐》，《從未見面的老朋友》，《一位沒結(jié)婚的男“媽媽”》等，也都是采用設(shè)迷法擬制的標(biāo)題。既然“腰纏萬(wàn)貫”，怎么會(huì)是“乞丐”？既然是“老朋友”怎么會(huì)沒見過(guò)面？“媽媽”都是女的，怎么會(huì)出來(lái)個(gè)男的，而且又是“沒結(jié)婚”的？這些標(biāo)題都給讀者留下了一個(gè)懸而未解的疑問(wèn)，答案只有閱讀了文章之后才會(huì)知曉。</p>
				<p>7、賓語(yǔ)前置法擬制標(biāo)題常常使用動(dòng)賓結(jié)構(gòu)的詞組或短句的形式。如恩格斯的《論權(quán)威》，毛澤東的《論人民民主專政》，吳伯簫的《記一輛紡車》等。但有時(shí)為了使標(biāo)題的形式有所變化，也可以把其中的賓語(yǔ)提到動(dòng)詞前面，變成賓語(yǔ)前置的形式。如馬克思的《資本論》，毛澤東的《實(shí)踐論》，《矛盾論》，薛福成的《觀巴黎油畫記》，蒸子的《無(wú)名禮贊》等。賓語(yǔ)前置式標(biāo)題與原來(lái)的標(biāo)題比較，只是形式不同，內(nèi)容并無(wú)變化，因此二者可以互換。</p>
				<p>8、隔點(diǎn)法運(yùn)用間隔號(hào)把標(biāo)題中兩三個(gè)具有某種聯(lián)系的單詞以并列的形式分隔開來(lái)，這種擬題方法就叫“隔點(diǎn)法”。例如魯迅的《貓·狗·鼠》，秦牧的《園林·扇畫·散文》，林平的《讀書·愛國(guó)·修身》（《文匯報(bào)》1981年5月3日版）等，都屬于這種形式。</p>
				<p>運(yùn)用隔點(diǎn)法擬制的標(biāo)題，其單詞排列整齊、勻稱，能給人以美感。另外，這種標(biāo)題形式還能產(chǎn)生懸念，吸引讀者閱讀。這種標(biāo)題一般多適用于雜文、隨筆一類的短篇議論文。</p>
				<p>9、冒號(hào)法近年來(lái)在報(bào)刊雜志上經(jīng)常出現(xiàn)一種新的標(biāo)題形式，這種標(biāo)題中間都加有一個(gè)冒號(hào)。例如莊建民的《選美：眾說(shuō)紛紜的話題》（《瞭望》1993年7月26日第30期），《瞭望》雜志社記者文章《1993：在夏收第一線》（《瞭望》1993年7月19日第29期）。</p>
				<p>這種標(biāo)題中的冒號(hào)一般具有兩個(gè)作用：一是表示前面內(nèi)容是對(duì)后面內(nèi)容的限制；二是表示后面內(nèi)容是對(duì)前面內(nèi)容某一個(gè)方面的診釋、介紹或闡述。一般情況下，這兩個(gè)作用是同兼的。如上述二例：例一，“選美”是對(duì)“眾說(shuō)紛紜的話題”的限制，“眾說(shuō)紛紜的話</p>
				<p>題”很多，“選美”只是其一；反過(guò)來(lái)，“選美”關(guān)系到的方面很多，“眾說(shuō)紛紜”只是對(duì)其中一個(gè)方面的闡述。例二，“1993”是對(duì)“在夏收第一線”時(shí)間上的限制；而“在夏收第一線”則是對(duì)1993年“夏收”這一個(gè)方面的介紹和闡述。</p>
				<p>擬制冒號(hào)標(biāo)題，一般總是將文字較少的名詞或名詞性詞組放在前面，而將文字較多的動(dòng)詞或名詞謂語(yǔ)部分放在后面，如上述二例即是。</p>
				<p>運(yùn)用冒號(hào)法擬題，可以準(zhǔn)確地揭示文章內(nèi)容，讓湊者在有限的標(biāo)題文字中獲取更多的內(nèi)容信息，還可以便標(biāo)題形式更加多樣化。這種標(biāo)題形式在新聞體裁和學(xué)術(shù)文章中比較多見。</p>
			</div>
		</div>
		<div class="tab-panel">
			<div class="content">
				<h3>文章二</h3>
				<p>文章包括各種文體的著作、作品，如詩(shī)歌、戲劇、小說(shuō)、科學(xué)論文，記敘文、議論文、說(shuō)明文、應(yīng)用文等等?！扒Ч盼恼挛幢M才”“文章千古事”“文章憎命達(dá)”“板凳要坐十年冷、文章不寫一字空”“積句而成章，積章而成篇”“言出為論，下筆成章”等，都是現(xiàn)在所說(shuō)的文章的意思。更廣義的文章，也包含“學(xué)問(wèn)”“奧秘”等意思，如“洞明世事皆學(xué)問(wèn)，人情練達(dá)即文章”就是。</p>
				<p>“文章”的“章”字，是個(gè)會(huì)意字，從音從十。古代奏音樂(lè)，連奏十段才能結(jié)束（十，數(shù)之終也），這十段樂(lè)就是一章。所以，文章文章，也有段落。文章既從“音樂(lè)”里會(huì)意出來(lái)，應(yīng)是用文字表達(dá)出來(lái)的東西，讀起來(lái)如音樂(lè)一樣美妙無(wú)窮、悅耳動(dòng)聽的文字，傳誦開來(lái)，才配得上“文章”一詞的真正含義。</p>
				<br />
				<h3>釋義</h3>
				<p>“文”即“紋”，指“紋路”、“紋樣”。“章”本指“屏蔽”，轉(zhuǎn)指“外表”?！拔恼隆痹x指“有紋樣的表面”，諸如服裝上繡繪的龍鳳圖樣、皮膚上針刺的花卉圖案，等等。即其原義是指直接構(gòu)成視覺形象的圖樣。后指文字所描繪出來(lái)的事物圖樣，需要大腦“解碼”才能完整呈現(xiàn)的間接的事物形象。</p>
				<br />
				<h3>要素</h3>
				<p>文章的基本要素——主題、材料、結(jié)構(gòu)、語(yǔ)言，是文章學(xué)的主要研究對(duì)象，以往各種寫作論著論之甚詳，但對(duì)其概念內(nèi)涵的揭示似欠斟酌，定義并不嚴(yán)格。新近出版的寫作論著，或沿用舊說(shuō)，或雖有改動(dòng)而仍值得商榷。本文擬從嚴(yán)格意義上的定義要求出發(fā)，結(jié)合有關(guān)知識(shí)，對(duì)這四個(gè)要素概念的種種“定義”質(zhì)疑問(wèn)難，并試提出自己的修正意見，以就教于寫作界同行。</p>
				<br />
				<h3>擬題中常用的修辭手法和語(yǔ)言技巧主要有以下九種。</h3>
				<p>1、引用法就是借用俗語(yǔ)、名言或他人詩(shī)句等現(xiàn)成的語(yǔ)言材料來(lái)擬制標(biāo)題。引用法分直接引用和變形引用兩種情況。</p>
				<p>直接引用，就是把引用的語(yǔ)言材料不加改動(dòng)地直接取來(lái)作擬題之用。如理由的《揚(yáng)眉劍出鞘》，人民日?qǐng)?bào)評(píng)論員文章《鐵公雞—一毛不拔》，廖沫沙的《教然后知困》等，都屬于這種形式。直接引用比較簡(jiǎn)單，無(wú)須多說(shuō)。變形引用則非常復(fù)雜，需要著重談?wù)劇?lt;/p>
				<p>變形引用，就是把引用的語(yǔ)言材料經(jīng)過(guò)加工改造，然后再作擬題之用。變形引用根據(jù)不同的加工方式又可分為“反疊式”、“悖論式”、“諧變式”、“鑲嵌式”等不同形式。</p>
				<p>反疊式變形引用，就是利用其他文章標(biāo)題、俗語(yǔ)等進(jìn)行反面重疊，造成一種反疊式的標(biāo)題。如蒲魯東曾寫有《貧困的哲學(xué)》，馬克思便利用它寫了《哲學(xué)的貧困（答蒲魯東先生的<貧困的哲學(xué)>）》，這就是反疊式變形引用。此外，諸如《“回頭浪子”幫助浪子回頭》，《伯樂(lè)相馬與馬相伯樂(lè)》等，也都屬于這種形式。反疊式變形引用，內(nèi)容上可以使標(biāo)題產(chǎn)生新意，給人以新奇而幽默的感覺，形式上給人以對(duì)稱的美感。</p>
				<p>對(duì)常見的俗語(yǔ)、名言進(jìn)行加工改造，取其反義而用之，形成一種貌似荒謬卻又隱含著十分新穎而深刻的意義，這種引用方式叫“悖論式變形引用”。例如“班門弄斧”這句成語(yǔ)一般是用來(lái)諷刺那些在行家面前賣弄本事，沒有自知之明的人。而一位作者在介紹華羅庚赴美講學(xué)的一篇文章中卻擬用了《弄斧必到班門》這樣一個(gè)標(biāo)題。為什么呢？因?yàn)槿A羅庚赴美講學(xué)計(jì)劃講十個(gè)數(shù)學(xué)專題，為了與美國(guó)同行能在更高的層次上進(jìn)行學(xué)術(shù)交流，他決定在美國(guó)各大學(xué)所講的專題必須是該大學(xué)科研中的長(zhǎng)項(xiàng)。華羅庚戲稱自己這是“弄斧必到班門”，此文作者便取之為題。你看，這個(gè)標(biāo)題與“班門弄斧”的本義正好相悖，卻又含義深遠(yuǎn)，切合于文章內(nèi)容。此外，諸如《近水樓臺(tái)不得月》，《曲高未必合寡》，《要有“知人善免”的勇氣》等，也都屬于這種形式。</p>
				<p>諧音式變形引用，就是利用語(yǔ)言的同音現(xiàn)象，將引用的俗語(yǔ)、名言中的個(gè)別字詞加以替換，造成一種同音異義的語(yǔ)言效果，這種引用方式就叫“諧音式變形引用”。例如1987年1月25日《人民日?qǐng)?bào)·海外版》登載的蘇泰的文章《學(xué)而優(yōu)則“侍”》，標(biāo)題顯然是從《論語(yǔ)·子張》中的“學(xué)而優(yōu)則仕”一句變化而來(lái)。原來(lái)此文主題是贊揚(yáng)大學(xué)生勤工助學(xué)，放下架子，課余時(shí)間去咖啡廳為顧客服務(wù)。此外，如《以“職”論價(jià)》與俗語(yǔ)“以質(zhì)論價(jià)”諧音，《愛“才”如命》與成語(yǔ)“愛財(cái)如命”諧音，這些標(biāo)題與原句雖然只是一字之差，卻另出新意，醒人耳目。</p>
				<p>鑲嵌式變形引用，就是利用俗語(yǔ)、名言、古詩(shī)詞等原有的語(yǔ)句框架，選擇一些切合于文章內(nèi)容的字詞填嵌其中，使其另生新意。例如，有篇新聞報(bào)道，標(biāo)題是《助人何必曾相識(shí)，精神文明譜新歌》，其中前半句顯然出自唐代詩(shī)人白居易《琵琶行》詩(shī)中的“同是天涯淪落人，相逢何必曾相識(shí)”一句，將“助人”二字填嵌其中，便有了新的含義。又如有一篇市場(chǎng)調(diào)查，標(biāo)題為《知否？知否？應(yīng)是賤肥貴瘦》，顯然，這是襲用了宋代詩(shī)人李清照《如夢(mèng)令》詞中“知否？知否？應(yīng)是綠肥紅瘦”一句將“賤”、“貴”二字填嵌其中，也使標(biāo)題陡生新意。</p>
				<p>變形引用雖然方式各異，但都能巧妙地利用俗語(yǔ)、名言及古詩(shī)詞廣泛的傳播效應(yīng)，給人一種似曾相識(shí)，卻又頗含新意的感受，推陳出新，為我所用，使文章標(biāo)題更具魅力。</p>
				<p>2、疊加法所謂“疊加法”，就是在他人文章或言論的基礎(chǔ)上，進(jìn)一步深入研究探討，以其相同的寫作手法寫成文章，其標(biāo)題往往是以相同的語(yǔ)句疊加而成，故稱“疊加法”。運(yùn)用疊加法擬題最常見的一種形式，就是利用他人有關(guān)“批評(píng)”或“批判”而擬制新的駁論性文章標(biāo)題。這種標(biāo)題常常擬為《關(guān)于……批評(píng)的批評(píng)》，這種標(biāo)題有時(shí)也可采用多重否定的形式，但常見的是雙重否定形式。此外，諸如《關(guān)于啟示的啟示》，《對(duì)于“笑話”的笑話》等，也都是采用疊加法擬題的一種形式。</p>
				<p>3、對(duì)偶法就是擬題時(shí)把結(jié)構(gòu)相同，字?jǐn)?shù)相等的一對(duì)句子或詞組排列在一起，以表達(dá)相關(guān)、相聯(lián)或相反的意思。例如《半月談》評(píng)論員文章《尊師重教，育才興邦》（1985年第3期），其標(biāo)題就是采用對(duì)偶法擬制的。此外，諸如《運(yùn)用綜合技術(shù)開拓未來(lái)世界》，《高價(jià)水泥一斤不賣計(jì)劃指標(biāo)一袋不少》，《賣債券支援國(guó)家建設(shè)得獎(jiǎng)品為您增添喜悅》等，也都是采用對(duì)偶法擬制的標(biāo)題。</p>
				<p>采用對(duì)偶法擬制的標(biāo)題，兩個(gè)句子或詞組的意思彼此補(bǔ)充，相互映襯可將文章內(nèi)容達(dá)得更加深刻、鮮明，而且朗讀起富有節(jié)奏感，能增強(qiáng)標(biāo)題語(yǔ)言的藝術(shù)性。</p>
				<p>4、活用動(dòng)詞法文學(xué)作品描寫人物之所以能給人以深刻的印象，很重要的一點(diǎn)就是作者善于抓住人物富有典型意義的行為動(dòng)作來(lái)進(jìn)行描寫，只有這樣才能把人物寫“活”。擬制標(biāo)題也可以采用文學(xué)作品描寫人物的這種方法，根據(jù)文章內(nèi)容，選取具有典型意義的動(dòng)態(tài)性的詞句來(lái)擬制標(biāo)題，著眼于一個(gè)“動(dòng)”字，盡量把題目寫“活”例如，有篇文章記敘一位公共汽車女售票員，正確對(duì)待一個(gè)無(wú)理取鬧往自己身上吐痰的小青年，從而引起小青年自責(zé)的事。如果把題目擬成《售票員風(fēng)格高尚，乘車人行為可恥》便很一般。而這位作者卻不同凡響，將題目擬為《冷靜擦去一口痰，微笑震動(dòng)一顆心》，兩相比較，后者就顯得格外生動(dòng)感人。又如有則通報(bào)批評(píng)某單位制定的服務(wù)措施只是掛在墻上而沒有落實(shí)到行動(dòng)上，標(biāo)題是《讓措施從墻上“走”下來(lái)》。你看，一個(gè)“走”字，用得真是恰到好處，平字生輝。</p>
				<p>5、虛實(shí)結(jié)合法這是擬制雙行標(biāo)題所采用的一種擬題方法。大家知道，擬單行標(biāo)題，作者既可以用平實(shí)的文字開門見山地把文章主題或主要內(nèi)容直接傳達(dá)給讀者，直白陳事，實(shí)實(shí)在在，不需要任何修飾和點(diǎn)綴；也可以采用形象、含蓄的語(yǔ)句擬題，使標(biāo)題富有形象性和趣味性，詩(shī)情畫意，引人遐思。兩種方法雖各有千秋，但不免單調(diào)，而擬雙行標(biāo)題則可以把這兩種方法結(jié)合起來(lái)使用，使其中一行標(biāo)題形象、含蓄，另一行標(biāo)題平實(shí)、明快，這就是“虛實(shí)結(jié)合法”。采用這種方法擬制的標(biāo)題，其正題一般多采用富有形象性、含蓄性的語(yǔ)句擬制，其作用在于揭示和突出文章的主要內(nèi)容，副題則采用準(zhǔn)確、平實(shí)的語(yǔ)句擬制，它對(duì)正題具有診釋和限制的作用。例如，發(fā)表在《名作欣賞》1986年第3期上的朱炯強(qiáng)的文章</p>
				<p>6、設(shè)迷法就是采用類似于迷語(yǔ)的方式，在標(biāo)題中先有意設(shè)下一個(gè)“迷面”，使讀者產(chǎn)生懸念，誘發(fā)其想要急切解答的欲望，其“迷底”待閱讀全文之后自然揭曉。例如祖慰的文章《赫赫而無(wú)名的人生》（《文匯月刊》1987年第6期），題目起得就頗為古怪、有句成語(yǔ)叫“赫赫有名”，“赫赫”乃顯赫的意思，用來(lái)修飾“有名”，意思是名氣很大，聲名顯赫。既然“赫赫”，何來(lái)“無(wú)名”？待看過(guò)文章之后方才恍然：原來(lái)這篇文章是介紹中國(guó)導(dǎo)彈核潛艇的總設(shè)計(jì)師，一位人稱“中國(guó)核潛艇之父”的科學(xué)家的坎坷一生。核潛艇，乃尖端高科技產(chǎn)品，世界上只有極少數(shù)國(guó)家擁有，而中國(guó)已能自行設(shè)計(jì)、建造，這難道不是轟動(dòng)全球的赫赫偉業(yè)？而高科技軍事武器因?yàn)槭菄?guó)家保密項(xiàng)目，參與設(shè)計(jì)、建造的科學(xué)家自然也是“無(wú)名”的，所以題目就叫“赫赫而無(wú)名的人生”。此外，諸如《腰纏萬(wàn)貫的乞丐》，《從未見面的老朋友》，《一位沒結(jié)婚的男“媽媽”》等，也都是采用設(shè)迷法擬制的標(biāo)題。既然“腰纏萬(wàn)貫”，怎么會(huì)是“乞丐”？既然是“老朋友”怎么會(huì)沒見過(guò)面？“媽媽”都是女的，怎么會(huì)出來(lái)個(gè)男的，而且又是“沒結(jié)婚”的？這些標(biāo)題都給讀者留下了一個(gè)懸而未解的疑問(wèn)，答案只有閱讀了文章之后才會(huì)知曉。</p>
				<p>7、賓語(yǔ)前置法擬制標(biāo)題常常使用動(dòng)賓結(jié)構(gòu)的詞組或短句的形式。如恩格斯的《論權(quán)威》，毛澤東的《論人民民主專政》，吳伯簫的《記一輛紡車》等。但有時(shí)為了使標(biāo)題的形式有所變化，也可以把其中的賓語(yǔ)提到動(dòng)詞前面，變成賓語(yǔ)前置的形式。如馬克思的《資本論》，毛澤東的《實(shí)踐論》，《矛盾論》，薛福成的《觀巴黎油畫記》，蒸子的《無(wú)名禮贊》等。賓語(yǔ)前置式標(biāo)題與原來(lái)的標(biāo)題比較，只是形式不同，內(nèi)容并無(wú)變化，因此二者可以互換。</p>
				<p>8、隔點(diǎn)法運(yùn)用間隔號(hào)把標(biāo)題中兩三個(gè)具有某種聯(lián)系的單詞以并列的形式分隔開來(lái)，這種擬題方法就叫“隔點(diǎn)法”。例如魯迅的《貓·狗·鼠》，秦牧的《園林·扇畫·散文》，林平的《讀書·愛國(guó)·修身》（《文匯報(bào)》1981年5月3日版）等，都屬于這種形式。</p>
				<p>運(yùn)用隔點(diǎn)法擬制的標(biāo)題，其單詞排列整齊、勻稱，能給人以美感。另外，這種標(biāo)題形式還能產(chǎn)生懸念，吸引讀者閱讀。這種標(biāo)題一般多適用于雜文、隨筆一類的短篇議論文。</p>
				<p>9、冒號(hào)法近年來(lái)在報(bào)刊雜志上經(jīng)常出現(xiàn)一種新的標(biāo)題形式，這種標(biāo)題中間都加有一個(gè)冒號(hào)。例如莊建民的《選美：眾說(shuō)紛紜的話題》（《瞭望》1993年7月26日第30期），《瞭望》雜志社記者文章《1993：在夏收第一線》（《瞭望》1993年7月19日第29期）。</p>
				<p>這種標(biāo)題中的冒號(hào)一般具有兩個(gè)作用：一是表示前面內(nèi)容是對(duì)后面內(nèi)容的限制；二是表示后面內(nèi)容是對(duì)前面內(nèi)容某一個(gè)方面的診釋、介紹或闡述。一般情況下，這兩個(gè)作用是同兼的。如上述二例：例一，“選美”是對(duì)“眾說(shuō)紛紜的話題”的限制，“眾說(shuō)紛紜的話</p>
				<p>題”很多，“選美”只是其一；反過(guò)來(lái)，“選美”關(guān)系到的方面很多，“眾說(shuō)紛紜”只是對(duì)其中一個(gè)方面的闡述。例二，“1993”是對(duì)“在夏收第一線”時(shí)間上的限制；而“在夏收第一線”則是對(duì)1993年“夏收”這一個(gè)方面的介紹和闡述。</p>
				<p>擬制冒號(hào)標(biāo)題，一般總是將文字較少的名詞或名詞性詞組放在前面，而將文字較多的動(dòng)詞或名詞謂語(yǔ)部分放在后面，如上述二例即是。</p>
				<p>運(yùn)用冒號(hào)法擬題，可以準(zhǔn)確地揭示文章內(nèi)容，讓湊者在有限的標(biāo)題文字中獲取更多的內(nèi)容信息，還可以便標(biāo)題形式更加多樣化。這種標(biāo)題形式在新聞體裁和學(xué)術(shù)文章中比較多見。</p>
			</div>
		</div>
	</div>
</div>
<!-- /scroll-tab-wrap -->

3.2 添加tab樣式

在scroll.css中追加tab樣式，代碼如下：

/* scroll-tab-wrap */
.scroll-tab-wrap{ width: 500px; border: 1px solid #ccc; color: #333; font-size: 14px; color: #666; line-height: 1.8; float: right; }
.scroll-tab-wrap p{ text-indent: 2em; margin: 0; }
.scroll-tab-wrap .tab-container{ height: 450px; overflow: hidden; }
.scroll-tab-wrap .tab-container .tab-panel{ height: 100%; overflow: hidden; }
.nav-list-box{ width: 100%; padding-bottom: 15px; }
.nav-list-box::after{ display: block; content: ''; clear: both; }
.nav-list-box .list-item{ margin: 0 20px; padding: 10px; cursor: pointer; float: left; }
.nav-list-box .list-item p{ text-indent: 0; }
.nav-list-box .list-item.active{ font-weight: bold; border-bottom: 2px solid #333; }

3.3 添加tab切換事件

這里就在html頁(yè)面中script添加tab切換事件了，代碼如下；

<script type="text/javascript">
/**
 * Tab切換事件
 */
function tabEvent(index){
    $('#navList .list-item').removeClass('active').eq(index).addClass('active');
    $('#tabScroll').find('.tab-panel').hide().eq(index).show();
}
$(function(){
    $('#scroll').customScroll({
        wheelSpeed: 6
    });
    $('#navList .list-item').on('click', function(){
        tabEvent($(this).index());
    });
    tabEvent(0);
});     
</script>

此時(shí)點(diǎn)擊文章一或文章二內(nèi)容則可以切換了。

其實(shí)Tab切換也可以單獨(dú)寫套插件進(jìn)行復(fù)用，像bootstrap里也有Tab組件，這里主要講自定義滾動(dòng)條，就不細(xì)講Tab切換的封裝方法，先簡(jiǎn)單實(shí)現(xiàn)下。       

3.4 添加自定義滾動(dòng)條功能

給tab標(biāo)簽對(duì)應(yīng)的tab-panel區(qū)域中內(nèi)容，添加自定義滾動(dòng)條，代碼如下：

<script type="text/javascript">
/**
 * Tab切換事件
 */
function tabEvent(index){
    $('#navList .list-item').removeClass('active').eq(index).addClass('active');
    $('#tabScroll').find('.tab-panel').hide().eq(index).show();
}
$(function(){
    $('#scroll').customScroll({
        wheelSpeed: 6
    });
    $('#navList .list-item').on('click', function(){
        tabEvent($(this).index());
    });
    //初始化tab標(biāo)簽
    tabEvent(0);
    //給tabl-panel區(qū)域的內(nèi)容添加自定義滾動(dòng)條功能
    $('#tabScroll').find('.tab-panel .content').each(function(){
        $(this).customScroll();
    });
});     
</script>

頁(yè)面效果如下： 

大家在切換時(shí)會(huì)發(fā)現(xiàn)，當(dāng)在文章一中滾動(dòng)條手柄滑到某位置后，切換到文章二中操作，再切換回文章一，還在上次停留位置。如果切換回需還原初始位置，方法也很簡(jiǎn)單，這塊就留給大家自己實(shí)現(xiàn)了。

總結(jié)

到此這篇關(guān)于JQuery實(shí)現(xiàn)自定義滾動(dòng)條的文章就介紹到這了,更多相關(guān)JQuery自定義滾動(dòng)條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論