JQuery實現(xiàn)自定義滾動條的方法
更新時間：2023年06月12日 10:48:48 作者：覺醒法師
這篇文章主要給大家介紹了關于JQuery實現(xiàn)自定義滾動條的方法,通過本文的介紹你可以換掉千篇一律的默認滾動條,讓你的網(wǎng)站或web項目更具特色,文章通過實例代碼介紹的非常詳細,需要的朋友可以參考下
前言
在頁面中雖然可以通過CSS修改滾動條的樣式,但是部分屬性是無法自己修改和設置的，而且不同瀏覽器存在兼容問題，因此通過JS來實現(xiàn)滾動條在自定義滾動條的環(huán)境下也是有必要的。
接下來，我們來實現(xiàn)上圖兩種情況下滾動條的實現(xiàn)。
一、頁面搭建
1.1 創(chuàng)建index.html頁面
首先創(chuàng)建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>滾動條</title>
</head>
<body>
<div class="container">
<!-- scroll-wrap -->
<div class="scroll-wrap">
<div class="content" id="scroll">
<p>文章包括各種文體的著作、作品，如詩歌、戲劇、小說、科學論文，記敘文、議論文、說明文、應用文等等?！扒Ч盼恼挛幢M才”“文章千古事”“文章憎命達”“板凳要坐十年冷、文章不寫一字空”“積句而成章，積章而成篇”“言出為論，下筆成章”等，都是現(xiàn)在所說的文章的意思。更廣義的文章，也包含“學問”“奧秘”等意思，如“洞明世事皆學問，人情練達即文章”就是。</p>
<p>“文章”的“章”字，是個會意字，從音從十。古代奏音樂，連奏十段才能結束（十，數(shù)之終也），這十段樂就是一章。所以，文章文章，也有段落。文章既從“音樂”里會意出來，應是用文字表達出來的東西，讀起來如音樂一樣美妙無窮、悅耳動聽的文字，傳誦開來，才配得上“文章”一詞的真正含義。</p>
<br />
<h3>釋義</h3>
<p>“文”即“紋”，指“紋路”、“紋樣”。“章”本指“屏蔽”，轉指“外表”?！拔恼隆痹x指“有紋樣的表面”，諸如服裝上繡繪的龍鳳圖樣、皮膚上針刺的花卉圖案，等等。即其原義是指直接構成視覺形象的圖樣。后指文字所描繪出來的事物圖樣，需要大腦“解碼”才能完整呈現(xiàn)的間接的事物形象。</p>
<br />
<h3>要素</h3>
<p>文章的基本要素——主題、材料、結構、語言，是文章學的主要研究對象，以往各種寫作論著論之甚詳，但對其概念內涵的揭示似欠斟酌，定義并不嚴格。新近出版的寫作論著，或沿用舊說，或雖有改動而仍值得商榷。本文擬從嚴格意義上的定義要求出發(fā)，結合有關知識，對這四個要素概念的種種“定義”質疑問難，并試提出自己的修正意見，以就教于寫作界同行。</p>
<br />
<h3>擬題中常用的修辭手法和語言技巧主要有以下九種。</h3>
<p>1、引用法就是借用俗語、名言或他人詩句等現(xiàn)成的語言材料來擬制標題。引用法分直接引用和變形引用兩種情況。</p>
<p>直接引用，就是把引用的語言材料不加改動地直接取來作擬題之用。如理由的《揚眉劍出鞘》，人民日報評論員文章《鐵公雞—一毛不拔》，廖沫沙的《教然后知困》等，都屬于這種形式。直接引用比較簡單，無須多說。變形引用則非常復雜，需要著重談談。</p>
<p>變形引用，就是把引用的語言材料經(jīng)過加工改造，然后再作擬題之用。變形引用根據(jù)不同的加工方式又可分為“反疊式”、“悖論式”、“諧變式”、“鑲嵌式”等不同形式。</p>
<p>反疊式變形引用，就是利用其他文章標題、俗語等進行反面重疊，造成一種反疊式的標題。如蒲魯東曾寫有《貧困的哲學》，馬克思便利用它寫了《哲學的貧困（答蒲魯東先生的<貧困的哲學>）》，這就是反疊式變形引用。此外，諸如《“回頭浪子”幫助浪子回頭》，《伯樂相馬與馬相伯樂》等，也都屬于這種形式。反疊式變形引用，內容上可以使標題產(chǎn)生新意，給人以新奇而幽默的感覺，形式上給人以對稱的美感。</p>
<p>對常見的俗語、名言進行加工改造，取其反義而用之，形成一種貌似荒謬卻又隱含著十分新穎而深刻的意義，這種引用方式叫“悖論式變形引用”。例如“班門弄斧”這句成語一般是用來諷刺那些在行家面前賣弄本事，沒有自知之明的人。而一位作者在介紹華羅庚赴美講學的一篇文章中卻擬用了《弄斧必到班門》這樣一個標題。為什么呢？因為華羅庚赴美講學計劃講十個數(shù)學專題，為了與美國同行能在更高的層次上進行學術交流，他決定在美國各大學所講的專題必須是該大學科研中的長項。華羅庚戲稱自己這是“弄斧必到班門”，此文作者便取之為題。你看，這個標題與“班門弄斧”的本義正好相悖，卻又含義深遠，切合于文章內容。此外，諸如《近水樓臺不得月》，《曲高未必合寡》，《要有“知人善免”的勇氣》等，也都屬于這種形式。</p>
<p>諧音式變形引用，就是利用語言的同音現(xiàn)象，將引用的俗語、名言中的個別字詞加以替換，造成一種同音異義的語言效果，這種引用方式就叫“諧音式變形引用”。例如1987年1月25日《人民日報·海外版》登載的蘇泰的文章《學而優(yōu)則“侍”》，標題顯然是從《論語·子張》中的“學而優(yōu)則仕”一句變化而來。原來此文主題是贊揚大學生勤工助學，放下架子，課余時間去咖啡廳為顧客服務。此外，如《以“職”論價》與俗語“以質論價”諧音，《愛“才”如命》與成語“愛財如命”諧音，這些標題與原句雖然只是一字之差，卻另出新意，醒人耳目。</p>
<p>鑲嵌式變形引用，就是利用俗語、名言、古詩詞等原有的語句框架，選擇一些切合于文章內容的字詞填嵌其中，使其另生新意。例如，有篇新聞報道，標題是《助人何必曾相識，精神文明譜新歌》，其中前半句顯然出自唐代詩人白居易《琵琶行》詩中的“同是天涯淪落人，相逢何必曾相識”一句，將“助人”二字填嵌其中，便有了新的含義。又如有一篇市場調查，標題為《知否？知否？應是賤肥貴瘦》，顯然，這是襲用了宋代詩人李清照《如夢令》詞中“知否？知否？應是綠肥紅瘦”一句將“賤”、“貴”二字填嵌其中，也使標題陡生新意。</p>
<p>變形引用雖然方式各異，但都能巧妙地利用俗語、名言及古詩詞廣泛的傳播效應，給人一種似曾相識，卻又頗含新意的感受，推陳出新，為我所用，使文章標題更具魅力。</p>
<p>2、疊加法所謂“疊加法”，就是在他人文章或言論的基礎上，進一步深入研究探討，以其相同的寫作手法寫成文章，其標題往往是以相同的語句疊加而成，故稱“疊加法”。運用疊加法擬題最常見的一種形式，就是利用他人有關“批評”或“批判”而擬制新的駁論性文章標題。這種標題常常擬為《關于……批評的批評》，這種標題有時也可采用多重否定的形式，但常見的是雙重否定形式。此外，諸如《關于啟示的啟示》，《對于“笑話”的笑話》等，也都是采用疊加法擬題的一種形式。</p>
<p>3、對偶法就是擬題時把結構相同，字數(shù)相等的一對句子或詞組排列在一起，以表達相關、相聯(lián)或相反的意思。例如《半月談》評論員文章《尊師重教，育才興邦》（1985年第3期），其標題就是采用對偶法擬制的。此外，諸如《運用綜合技術開拓未來世界》，《高價水泥一斤不賣計劃指標一袋不少》，《賣債券支援國家建設得獎品為您增添喜悅》等，也都是采用對偶法擬制的標題。</p>
<p>采用對偶法擬制的標題，兩個句子或詞組的意思彼此補充，相互映襯可將文章內容達得更加深刻、鮮明，而且朗讀起富有節(jié)奏感，能增強標題語言的藝術性。</p>
<p>4、活用動詞法文學作品描寫人物之所以能給人以深刻的印象，很重要的一點就是作者善于抓住人物富有典型意義的行為動作來進行描寫，只有這樣才能把人物寫“活”。擬制標題也可以采用文學作品描寫人物的這種方法，根據(jù)文章內容，選取具有典型意義的動態(tài)性的詞句來擬制標題，著眼于一個“動”字，盡量把題目寫“活”例如，有篇文章記敘一位公共汽車女售票員，正確對待一個無理取鬧往自己身上吐痰的小青年，從而引起小青年自責的事。如果把題目擬成《售票員風格高尚，乘車人行為可恥》便很一般。而這位作者卻不同凡響，將題目擬為《冷靜擦去一口痰，微笑震動一顆心》，兩相比較，后者就顯得格外生動感人。又如有則通報批評某單位制定的服務措施只是掛在墻上而沒有落實到行動上，標題是《讓措施從墻上“走”下來》。你看，一個“走”字，用得真是恰到好處，平字生輝。</p>
<p>5、虛實結合法這是擬制雙行標題所采用的一種擬題方法。大家知道，擬單行標題，作者既可以用平實的文字開門見山地把文章主題或主要內容直接傳達給讀者，直白陳事，實實在在，不需要任何修飾和點綴；也可以采用形象、含蓄的語句擬題，使標題富有形象性和趣味性，詩情畫意，引人遐思。兩種方法雖各有千秋，但不免單調，而擬雙行標題則可以把這兩種方法結合起來使用，使其中一行標題形象、含蓄，另一行標題平實、明快，這就是“虛實結合法”。采用這種方法擬制的標題，其正題一般多采用富有形象性、含蓄性的語句擬制，其作用在于揭示和突出文章的主要內容，副題則采用準確、平實的語句擬制，它對正題具有診釋和限制的作用。例如，發(fā)表在《名作欣賞》1986年第3期上的朱炯強的文章</p>
<p>6、設迷法就是采用類似于迷語的方式，在標題中先有意設下一個“迷面”，使讀者產(chǎn)生懸念，誘發(fā)其想要急切解答的欲望，其“迷底”待閱讀全文之后自然揭曉。例如祖慰的文章《赫赫而無名的人生》（《文匯月刊》1987年第6期），題目起得就頗為古怪、有句成語叫“赫赫有名”，“赫赫”乃顯赫的意思，用來修飾“有名”，意思是名氣很大，聲名顯赫。既然“赫赫”，何來“無名”？待看過文章之后方才恍然：原來這篇文章是介紹中國導彈核潛艇的總設計師，一位人稱“中國核潛艇之父”的科學家的坎坷一生。核潛艇，乃尖端高科技產(chǎn)品，世界上只有極少數(shù)國家擁有，而中國已能自行設計、建造，這難道不是轟動全球的赫赫偉業(yè)？而高科技軍事武器因為是國家保密項目，參與設計、建造的科學家自然也是“無名”的，所以題目就叫“赫赫而無名的人生”。此外，諸如《腰纏萬貫的乞丐》，《從未見面的老朋友》，《一位沒結婚的男“媽媽”》等，也都是采用設迷法擬制的標題。既然“腰纏萬貫”，怎么會是“乞丐”？既然是“老朋友”怎么會沒見過面？“媽媽”都是女的，怎么會出來個男的，而且又是“沒結婚”的？這些標題都給讀者留下了一個懸而未解的疑問，答案只有閱讀了文章之后才會知曉。</p>
<p>7、賓語前置法擬制標題常常使用動賓結構的詞組或短句的形式。如恩格斯的《論權威》，毛澤東的《論人民民主專政》，吳伯簫的《記一輛紡車》等。但有時為了使標題的形式有所變化，也可以把其中的賓語提到動詞前面，變成賓語前置的形式。如馬克思的《資本論》，毛澤東的《實踐論》，《矛盾論》，薛福成的《觀巴黎油畫記》，蒸子的《無名禮贊》等。賓語前置式標題與原來的標題比較，只是形式不同，內容并無變化，因此二者可以互換。</p>
<p>8、隔點法運用間隔號把標題中兩三個具有某種聯(lián)系的單詞以并列的形式分隔開來，這種擬題方法就叫“隔點法”。例如魯迅的《貓·狗·鼠》，秦牧的《園林·扇畫·散文》，林平的《讀書·愛國·修身》（《文匯報》1981年5月3日版）等，都屬于這種形式。</p>
<p>運用隔點法擬制的標題，其單詞排列整齊、勻稱，能給人以美感。另外，這種標題形式還能產(chǎn)生懸念，吸引讀者閱讀。這種標題一般多適用于雜文、隨筆一類的短篇議論文。</p>
<p>9、冒號法近年來在報刊雜志上經(jīng)常出現(xiàn)一種新的標題形式，這種標題中間都加有一個冒號。例如莊建民的《選美：眾說紛紜的話題》（《瞭望》1993年7月26日第30期），《瞭望》雜志社記者文章《1993：在夏收第一線》（《瞭望》1993年7月19日第29期）。</p>
<p>這種標題中的冒號一般具有兩個作用：一是表示前面內容是對后面內容的限制；二是表示后面內容是對前面內容某一個方面的診釋、介紹或闡述。一般情況下，這兩個作用是同兼的。如上述二例：例一，“選美”是對“眾說紛紜的話題”的限制，“眾說紛紜的話</p>
<p>題”很多，“選美”只是其一；反過來，“選美”關系到的方面很多，“眾說紛紜”只是對其中一個方面的闡述。例二，“1993”是對“在夏收第一線”時間上的限制；而“在夏收第一線”則是對1993年“夏收”這一個方面的介紹和闡述。</p>
<p>擬制冒號標題，一般總是將文字較少的名詞或名詞性詞組放在前面，而將文字較多的動詞或名詞謂語部分放在后面，如上述二例即是。</p>
<p>運用冒號法擬題，可以準確地揭示文章內容，讓湊者在有限的標題文字中獲取更多的內容信息，還可以便標題形式更加多樣化。這種標題形式在新聞體裁和學術文章中比較多見。</p>
</div>
</div>
<!-- /scroll-wrap -->
</div>
</body>
</html>1.2 CSS樣式
頁面內容添加后，再添加樣式文件，創(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; }此時將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>滾動條</title>
<link rel="stylesheet" href="css/scroll.css" rel="external nofollow" rel="external nofollow" ></link>
</head>1.3 創(chuàng)建scroll.js文件
創(chuàng)建滾動條閉包文件，代碼如下：
(function(_win_, _doc_, _$_){
/**
* 定義 自定義滾動條插件
* @param {*} options
*/
_$_.fn.customScroll = function(options){
}
})(window, document, jQuery);jQuery插件開發(fā)有兩個方法使用較多，分別是$.fn和$.extend。如以上代碼已使用$.fn擴展了customScroll方法，此時可需對外提供相應接口，這時則需要使用到$.extend了，代碼如下：
(function(_win_, _doc_, _$_){
/**
* 定義 自定義滾動條插件
* @param {*} options
*/
_$_.fn.customScroll = function(options){
options = $.extend(true, {
wrap: 'scroll-container', //容器
contentVisableBox: 'scroll-content-box', //內容可顯示區(qū)域
content: 'scroll-content', //內容容器
barBox: 'scroll-bar-box', //滑軌區(qū)域
barHandle: 'scroll-bar-handle', //滑軌中手柄
wheelSpeed: 5, //滾輪滑動速度
}, options);
}
})(window, document, jQuery);注：$.extend第一個參數(shù)為true，則表示后面合并對象會進入深度合并，否則只合并對象的第一層屬性或方法。
這里我們將對應容器的類名和相應參數(shù)對外暴露，以便調用和初始化插件時，可以個性化定制和擴展。
此時我們再將scroll.js引入到html頁面中，引入前，必須先引入jquery-3.6.4.min.js，因為咱們插件時基于jquery基礎上開發(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>滾動條</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ā)
實現(xiàn)自定義滾動條結構如下圖，通過此圖我們可以更清晰了解頁面代碼。
2.1 初始化頁面結構
如上圖，當用戶引用自定義滾動條插件時，為了更方便使用，則上圖結構我們通過js來實現(xiàn)，代碼如下：
(function(_win_, _doc_, _$_){
/**
* 定義 自定義滾動條插件
* @param {*} options
*/
_$_.fn.customScroll = function(options){
options = $.extend(true, {
wrap: 'scroll-container', //容器
contentVisableBox: 'scroll-content-box', //內容可顯示區(qū)域
content: 'scroll-content', //內容容器
barBox: 'scroll-bar-box', //滑軌區(qū)域
barHandle: 'scroll-bar-handle', //滑軌中手柄
wheelSpeed: 5, //滾輪滑動速度
}, options);
var _html = $(this).html(),
//創(chuàng)建容器DOM
_scrollWrap = $('<div />').addClass(options.wrap),
//創(chuàng)建 內容可顯示區(qū)域 DOM
_contentVisableBox = $('<div />').addClass(options.contentVisableBox),
//創(chuàng)建 內容容器 DOM
_content = $('<div />').addClass(options.content),
//創(chuàng)建滑軌區(qū)域 DOM
_scrollBarBox = $('<div />').addClass(options.barBox),
//創(chuàng)建 滑軌中手柄 DOM
_scrollHandle = $('<div />').addClass(options.barHandle);
//內容添加到內容容器中
_content.html(_html);
//內容追加到 內容可顯示區(qū)域中
_content.appendTo(_contentVisableBox);
//手柄添加到滑軌區(qū)域中
_scrollHandle.appendTo(_scrollBarBox);
//內容可見區(qū)域添加到容器中
_scrollWrap.append(_contentVisableBox);
//滑軌區(qū)域添加到容器中
_scrollWrap.append(_scrollBarBox);
//替換原內容區(qū)域
$(this).replaceWith(_scrollWrap);
}
})(window, document, jQuery);以上代碼大家可能還不太理解，這塊給大家分析下，
以上DOM結構，對應上面結構圖內容，不太明白的，可以對照多看幾遍。
- wrap對應DOM則為結構圖中最外層大容器；
- contentVisableBox對應DOM為內容可見區(qū)域，超出部分影響；后面內容滾動綁定scrollTop則在該DOM上
- content對應DOM為內容存放區(qū)域，內容實際高度，則需在DOM上獲??；
- barBox對應DOM滾動條可滾動區(qū)域，滾動條手柄只能在該區(qū)域滑動；
- barHandle對應DOM為滾動條手柄，鼠標點擊移動區(qū)域執(zhí)行上下拖動功能
- wheelSpeed為滾輪滑動的速度
2.2 添加樣式
此時我們再增加初始化后，自定義滾動條區(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; }這里自定義滾動條樣式直接放在頁面樣式中，如果你希望開發(fā)一套獨立的插件，可以將樣式和js代碼進行剝離，單獨編寫，方便后期引用和維護。
2.3 滾動條插件初始化
此時，自定義滾動條插件函數(shù)已定義，樣式也添加好了，可以在頁面初始化插件了。在body標簽尾部，添加script代碼，代碼如下：
<script type="text/javascript">
$(function(){
$('#scroll').customScroll();
});
</script>
</body>
</html>現(xiàn)在頁面效果如下圖：
初始化后html結構如下：
2.4 定義變量
定義滾動條移動中所需要的變量，代碼如下：
(function(_win_, _doc_, _$_){
/**
* 定義 自定義滾動條插件
* @param {*} options
*/
_$_.fn.customScroll = function(options){
options = $.extend(true, {
wrap: 'scroll-container', //容器
contentVisableBox: 'scroll-content-box', //內容可顯示區(qū)域
content: 'scroll-content', //內容容器
barBox: 'scroll-bar-box', //滑軌區(qū)域
barHandle: 'scroll-bar-handle', //滑軌中手柄
wheelSpeed: 5, //滾輪滑動速度
}, options);
//略...
//替換原內容區(qū)域
$(this).replaceWith(_scrollWrap);
var slideHeightLimit = 0, //滑軌可移動高度
slideHeight = 0, //滑軌區(qū)域高度
slideHandleHeight = 0, //滑軌手柄高度
contentVisibleHeight = 0, //內容可見區(qū)域
contentHeight = 0, //內容實際高度
startTop = 0, //滑軌手柄移動位置
startPageY = 0, //當前點擊時鼠標點擊的位置
flag = false;
}
})(window, document, jQuery);2.5 獲取對應參數(shù)
在插件中定義initialData()函數(shù)，用來獲取2.4中所定義變量數(shù)據(jù)，代碼如下：
(function(_win_, _doc_, _$_){
/**
* 定義 自定義滾動條插件
* @param {*} options
*/
_$_.fn.customScroll = function(options){
options = $.extend(true, {
wrap: 'scroll-container', //容器
contentVisableBox: 'scroll-content-box', //內容可顯示區(qū)域
content: 'scroll-content', //內容容器
barBox: 'scroll-bar-box', //滑軌區(qū)域
barHandle: 'scroll-bar-handle', //滑軌中手柄
wheelSpeed: 5, //滾輪滑動速度
}, options);
//略...
//替換原內容區(qū)域
$(this).replaceWith(_scrollWrap);
var slideHeightLimit = 0, //滑軌可移動高度
slideHeight = 0, //滑軌區(qū)域高度
slideHandleHeight = 0, //滑軌手柄高度
contentVisibleHeight = 0, //內容可見區(qū)域
contentHeight = 0, //內容實際高度
ratio = 0, //滑軌區(qū)域高度與內容高度 比例
startTop = 0, //滑軌手柄移動位置
startPageY = 0, //當前點擊時鼠標點擊的位置
flag = false;
/**
* 初始化數(shù)據(jù)
*/
function initialData(){
slideHeight = _scrollBarBox.height(); //滑軌區(qū)域高度
contentHeight = _content.height(); //內容實際高度
ratio = slideHeight / contentHeight; //比例
slideHandleHeight = ratio * slideHeight; //滑軌手柄高度
slideHeightLimit = slideHeight - slideHandleHeight; //計算滑塊可活動范圍
startTop = parseInt(_scrollHandle.css('top')); //獲取滑塊top開始位置
//根據(jù)比例設置手柄高度
_scrollHandle.height(slideHandleHeight);
}
//執(zhí)行初始化函數(shù)
initialData();
}
})(window, document, jQuery);以上數(shù)據(jù)初始化，刷新頁面發(fā)現(xiàn)還沒啥變量，只有滾動條手柄高度在DOM上重新設定了，如下圖：
2.6 實現(xiàn)拖放滾動事件
在實現(xiàn)自定義滾動條事件，我們需要使用到mousedown、mousemove、mouseup三個事件，我們使用jquery方法來添加這三個事件，代碼如下：
(function(_win_, _doc_, _$_){
/**
* 定義 自定義滾動條插件
* @param {*} options
*/
_$_.fn.customScroll = function(options){
options = $.extend(true, {
wrap: 'scroll-container', //容器
contentVisableBox: 'scroll-content-box', //內容可顯示區(qū)域
content: 'scroll-content', //內容容器
barBox: 'scroll-bar-box', //滑軌區(qū)域
barHandle: 'scroll-bar-handle', //滑軌中手柄
wheelSpeed: 5, //滾輪滑動速度
}, options);
var _html = $(this).html(),
//創(chuàng)建容器DOM
_scrollWrap = $('<div />').addClass(options.wrap),
//創(chuàng)建 內容可顯示區(qū)域 DOM
_contentVisableBox = $('<div />').addClass(options.contentVisableBox),
//創(chuàng)建 內容容器 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, //滑軌可移動高度
slideHeight = 0, //滑軌區(qū)域高度
slideHandleHeight = 0, //滑軌手柄高度
contentVisibleHeight = 0, //內容可見區(qū)域
contentHeight = 0, //內容實際高度
ratio = 0, //滑軌區(qū)域高度與內容高度 比例
startTop = 0, //滑軌手柄移動位置
startPageY = 0, //當前點擊時鼠標點擊的位置
flag = false;
/**
* 初始化數(shù)據(jù)
*/
function initialData(){
slideHeight = _scrollBarBox.height(); //滑軌區(qū)域高度
contentHeight = _content.height(); //內容實際高度
contentVisibleHeight = _contentVisableBox.height(); //內容可見區(qū)域
ratio = slideHeight / contentHeight; //比例
slideHandleHeight = ratio * slideHeight; //滑軌手柄高度
slideHeightLimit = slideHeight - slideHandleHeight; //計算滑塊可活動范圍
startTop = parseInt(_scrollHandle.css('top')); //獲取滑塊top開始位置
//根據(jù)比例設置手柄高度
_scrollHandle.height(slideHandleHeight);
}
//執(zhí)行初始化函數(shù)
initialData();
//添加監(jiān)聽鼠標點擊事件
_scrollHandle.on('mousedown', function(e){
e.preventDefault();
flag = true; //標識開始滑動
startPageY = e.pageY; //獲取鼠標開始位置
});
//添加監(jiān)聽鼠標滾動事件
$(_doc_).on('mousemove', function(e){
if(flag){
//do something...
}
});
//添加監(jiān)聽鼠標放開事件
$(_doc_).on('mouseup', function(e){
flag = false;
});
}
})(window, document, jQuery);當點擊mousedown事件時，標記啟動滾動條滑動事件，將flag賦值為true，并獲取點擊手柄時鼠標點擊的pageY坐標位置，并賦值給startPageY。
當鼠標點擊不放并移動時，mousemove事件中判斷flag為true時執(zhí)行，并修改滾動條手柄相關參數(shù)。
當鼠標放開時，并flag賦值為false，表示停止滑動，釋放事件。
2.7 計算滾動范圍并賦值
以上事件已經(jīng)添加了，但現(xiàn)在滾動條還無法拖動，這里我們需要通過計算并賦值修改相應參數(shù)，使?jié)L動條手柄和內容進行移動。這里手柄我們通過postion定準，修改其top位置；內容區(qū)域修改可見區(qū)域的scrollTop實現(xiàn)內容滾動。這里定位 moveScroll()函數(shù)，來處理此操作。在initialData函數(shù)后面追加以下代碼：
/**
* 移動滑塊和內容區(qū)域 功能函數(shù)
* @param {*} moveLen
* @param {*} moveContLen
*/
function moveScroll(moveLen, moveContLen){
//獲取最新滑塊位置
var _top = parseInt(_scrollHandle.css('top'));
//在滑塊可移動范圍內
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);
}
}以上寫法可能會存在不足之處，大家有更好算法或寫法可按自己需求進行編寫。
此時將initialData()放到mousedown事件中，以防頁面dom未加載完成，或后期內容被動態(tài)修改，所以在執(zhí)行滑動前重新獲取初始數(shù)據(jù)。
將moveScroll()函數(shù)放到mousemove事件，當標記flag為true時，執(zhí)行滾動條手柄和內容移動操作。
代碼如下：
//添加監(jiān)聽鼠標點擊事件
_scrollHandle.on('mousedown', function(e){
e.preventDefault();
flag = true; //標識開始滑動
startPageY = e.pageY; //獲取鼠標開始位置
initialData(); //重新獲取內容比例
});
//添加監(jiān)聽鼠標滾動事件
$(_doc_).on('mousemove', function(e){
if(flag){
var moveLen = e.pageY - startPageY + startTop, //計算滑塊移動位置
moveContLen = moveLen / ratio; //通過手柄位置計算內容移動位置
//開始移動
moveScroll(moveLen, moveContLen);
}
});
//添加監(jiān)聽鼠標放開事件
$(_doc_).on('mouseup', function(e){
flag = false;
});寫了這么久，自定義滾動條終于完成，可以點擊拖放滑動了。
2.8 滾輪事件
瀏覽器中，我們可以通過鼠標滾輪上下滑動翻看內容，這里在自定義滾動條功能中也可以實現(xiàn)，為了兼容瀏覽器，并使用jquery進行監(jiān)聽，代碼如下：
//監(jiān)聽滾動事件
_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;
//開始移動
moveScroll(moveLen, moveContLen);
});給滾動條區(qū)域最外層容器上添加監(jiān)聽事件，當監(jiān)聽到滾動事件時，初始化所要數(shù)據(jù)，并且計算wheelRange值，用來判斷滾輪是向上，還是向下移動。向下wheelRange值為1，向上值為-1。
wheelSpeed變量，我們之前在options中已對外開放，這里默認為5，如果覺得速度太慢，可以在初始化時，修改此變量，代碼如下：
<script type="text/javascript">
$(function(){
$('#scroll').customScroll({
wheelSpeed: 6
});
});
</script> 此時options中wheelSpeed參數(shù)值已被修改，如下圖：
到這里，自定義滾動條功能已完成，在頁面中可以拖動滾動條手柄進行上班移動，也可以通過滾輪進行上下翻看內容了。
三、TAB標簽
3.1 添加tab結構html
在html頁面中，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>文章包括各種文體的著作、作品，如詩歌、戲劇、小說、科學論文，記敘文、議論文、說明文、應用文等等?！扒Ч盼恼挛幢M才”“文章千古事”“文章憎命達”“板凳要坐十年冷、文章不寫一字空”“積句而成章，積章而成篇”“言出為論，下筆成章”等，都是現(xiàn)在所說的文章的意思。更廣義的文章，也包含“學問”“奧秘”等意思，如“洞明世事皆學問，人情練達即文章”就是。</p> <p>“文章”的“章”字，是個會意字，從音從十。古代奏音樂，連奏十段才能結束（十，數(shù)之終也），這十段樂就是一章。所以，文章文章，也有段落。文章既從“音樂”里會意出來，應是用文字表達出來的東西，讀起來如音樂一樣美妙無窮、悅耳動聽的文字，傳誦開來，才配得上“文章”一詞的真正含義。</p> <br /> <h3>釋義</h3> <p>“文”即“紋”，指“紋路”、“紋樣”?！罢隆北局浮捌帘巍?，轉指“外表”?！拔恼隆痹x指“有紋樣的表面”，諸如服裝上繡繪的龍鳳圖樣、皮膚上針刺的花卉圖案，等等。即其原義是指直接構成視覺形象的圖樣。后指文字所描繪出來的事物圖樣，需要大腦“解碼”才能完整呈現(xiàn)的間接的事物形象。</p> <br /> <h3>要素</h3> <p>文章的基本要素——主題、材料、結構、語言，是文章學的主要研究對象，以往各種寫作論著論之甚詳，但對其概念內涵的揭示似欠斟酌，定義并不嚴格。新近出版的寫作論著，或沿用舊說，或雖有改動而仍值得商榷。本文擬從嚴格意義上的定義要求出發(fā)，結合有關知識，對這四個要素概念的種種“定義”質疑問難，并試提出自己的修正意見，以就教于寫作界同行。</p> <br /> <h3>擬題中常用的修辭手法和語言技巧主要有以下九種。</h3> <p>1、引用法就是借用俗語、名言或他人詩句等現(xiàn)成的語言材料來擬制標題。引用法分直接引用和變形引用兩種情況。</p> <p>直接引用，就是把引用的語言材料不加改動地直接取來作擬題之用。如理由的《揚眉劍出鞘》，人民日報評論員文章《鐵公雞—一毛不拔》，廖沫沙的《教然后知困》等，都屬于這種形式。直接引用比較簡單，無須多說。變形引用則非常復雜，需要著重談談。</p> <p>變形引用，就是把引用的語言材料經(jīng)過加工改造，然后再作擬題之用。變形引用根據(jù)不同的加工方式又可分為“反疊式”、“悖論式”、“諧變式”、“鑲嵌式”等不同形式。</p> <p>反疊式變形引用，就是利用其他文章標題、俗語等進行反面重疊，造成一種反疊式的標題。如蒲魯東曾寫有《貧困的哲學》，馬克思便利用它寫了《哲學的貧困（答蒲魯東先生的<貧困的哲學>）》，這就是反疊式變形引用。此外，諸如《“回頭浪子”幫助浪子回頭》，《伯樂相馬與馬相伯樂》等，也都屬于這種形式。反疊式變形引用，內容上可以使標題產(chǎn)生新意，給人以新奇而幽默的感覺，形式上給人以對稱的美感。</p> <p>對常見的俗語、名言進行加工改造，取其反義而用之，形成一種貌似荒謬卻又隱含著十分新穎而深刻的意義，這種引用方式叫“悖論式變形引用”。例如“班門弄斧”這句成語一般是用來諷刺那些在行家面前賣弄本事，沒有自知之明的人。而一位作者在介紹華羅庚赴美講學的一篇文章中卻擬用了《弄斧必到班門》這樣一個標題。為什么呢？因為華羅庚赴美講學計劃講十個數(shù)學專題，為了與美國同行能在更高的層次上進行學術交流，他決定在美國各大學所講的專題必須是該大學科研中的長項。華羅庚戲稱自己這是“弄斧必到班門”，此文作者便取之為題。你看，這個標題與“班門弄斧”的本義正好相悖，卻又含義深遠，切合于文章內容。此外，諸如《近水樓臺不得月》，《曲高未必合寡》，《要有“知人善免”的勇氣》等，也都屬于這種形式。</p> <p>諧音式變形引用，就是利用語言的同音現(xiàn)象，將引用的俗語、名言中的個別字詞加以替換，造成一種同音異義的語言效果，這種引用方式就叫“諧音式變形引用”。例如1987年1月25日《人民日報·海外版》登載的蘇泰的文章《學而優(yōu)則“侍”》，標題顯然是從《論語·子張》中的“學而優(yōu)則仕”一句變化而來。原來此文主題是贊揚大學生勤工助學，放下架子，課余時間去咖啡廳為顧客服務。此外，如《以“職”論價》與俗語“以質論價”諧音，《愛“才”如命》與成語“愛財如命”諧音，這些標題與原句雖然只是一字之差，卻另出新意，醒人耳目。</p> <p>鑲嵌式變形引用，就是利用俗語、名言、古詩詞等原有的語句框架，選擇一些切合于文章內容的字詞填嵌其中，使其另生新意。例如，有篇新聞報道，標題是《助人何必曾相識，精神文明譜新歌》，其中前半句顯然出自唐代詩人白居易《琵琶行》詩中的“同是天涯淪落人，相逢何必曾相識”一句，將“助人”二字填嵌其中，便有了新的含義。又如有一篇市場調查，標題為《知否？知否？應是賤肥貴瘦》，顯然，這是襲用了宋代詩人李清照《如夢令》詞中“知否？知否？應是綠肥紅瘦”一句將“賤”、“貴”二字填嵌其中，也使標題陡生新意。</p> <p>變形引用雖然方式各異，但都能巧妙地利用俗語、名言及古詩詞廣泛的傳播效應，給人一種似曾相識，卻又頗含新意的感受，推陳出新，為我所用，使文章標題更具魅力。</p> <p>2、疊加法所謂“疊加法”，就是在他人文章或言論的基礎上，進一步深入研究探討，以其相同的寫作手法寫成文章，其標題往往是以相同的語句疊加而成，故稱“疊加法”。運用疊加法擬題最常見的一種形式，就是利用他人有關“批評”或“批判”而擬制新的駁論性文章標題。這種標題常常擬為《關于……批評的批評》，這種標題有時也可采用多重否定的形式，但常見的是雙重否定形式。此外，諸如《關于啟示的啟示》，《對于“笑話”的笑話》等，也都是采用疊加法擬題的一種形式。</p> <p>3、對偶法就是擬題時把結構相同，字數(shù)相等的一對句子或詞組排列在一起，以表達相關、相聯(lián)或相反的意思。例如《半月談》評論員文章《尊師重教，育才興邦》（1985年第3期），其標題就是采用對偶法擬制的。此外，諸如《運用綜合技術開拓未來世界》，《高價水泥一斤不賣計劃指標一袋不少》，《賣債券支援國家建設得獎品為您增添喜悅》等，也都是采用對偶法擬制的標題。</p> <p>采用對偶法擬制的標題，兩個句子或詞組的意思彼此補充，相互映襯可將文章內容達得更加深刻、鮮明，而且朗讀起富有節(jié)奏感，能增強標題語言的藝術性。</p> <p>4、活用動詞法文學作品描寫人物之所以能給人以深刻的印象，很重要的一點就是作者善于抓住人物富有典型意義的行為動作來進行描寫，只有這樣才能把人物寫“活”。擬制標題也可以采用文學作品描寫人物的這種方法，根據(jù)文章內容，選取具有典型意義的動態(tài)性的詞句來擬制標題，著眼于一個“動”字，盡量把題目寫“活”例如，有篇文章記敘一位公共汽車女售票員，正確對待一個無理取鬧往自己身上吐痰的小青年，從而引起小青年自責的事。如果把題目擬成《售票員風格高尚，乘車人行為可恥》便很一般。而這位作者卻不同凡響，將題目擬為《冷靜擦去一口痰，微笑震動一顆心》，兩相比較，后者就顯得格外生動感人。又如有則通報批評某單位制定的服務措施只是掛在墻上而沒有落實到行動上，標題是《讓措施從墻上“走”下來》。你看，一個“走”字，用得真是恰到好處，平字生輝。</p> <p>5、虛實結合法這是擬制雙行標題所采用的一種擬題方法。大家知道，擬單行標題，作者既可以用平實的文字開門見山地把文章主題或主要內容直接傳達給讀者，直白陳事，實實在在，不需要任何修飾和點綴；也可以采用形象、含蓄的語句擬題，使標題富有形象性和趣味性，詩情畫意，引人遐思。兩種方法雖各有千秋，但不免單調，而擬雙行標題則可以把這兩種方法結合起來使用，使其中一行標題形象、含蓄，另一行標題平實、明快，這就是“虛實結合法”。采用這種方法擬制的標題，其正題一般多采用富有形象性、含蓄性的語句擬制，其作用在于揭示和突出文章的主要內容，副題則采用準確、平實的語句擬制，它對正題具有診釋和限制的作用。例如，發(fā)表在《名作欣賞》1986年第3期上的朱炯強的文章</p> <p>6、設迷法就是采用類似于迷語的方式，在標題中先有意設下一個“迷面”，使讀者產(chǎn)生懸念，誘發(fā)其想要急切解答的欲望，其“迷底”待閱讀全文之后自然揭曉。例如祖慰的文章《赫赫而無名的人生》（《文匯月刊》1987年第6期），題目起得就頗為古怪、有句成語叫“赫赫有名”，“赫赫”乃顯赫的意思，用來修飾“有名”，意思是名氣很大，聲名顯赫。既然“赫赫”，何來“無名”？待看過文章之后方才恍然：原來這篇文章是介紹中國導彈核潛艇的總設計師，一位人稱“中國核潛艇之父”的科學家的坎坷一生。核潛艇，乃尖端高科技產(chǎn)品，世界上只有極少數(shù)國家擁有，而中國已能自行設計、建造，這難道不是轟動全球的赫赫偉業(yè)？而高科技軍事武器因為是國家保密項目，參與設計、建造的科學家自然也是“無名”的，所以題目就叫“赫赫而無名的人生”。此外，諸如《腰纏萬貫的乞丐》，《從未見面的老朋友》，《一位沒結婚的男“媽媽”》等，也都是采用設迷法擬制的標題。既然“腰纏萬貫”，怎么會是“乞丐”？既然是“老朋友”怎么會沒見過面？“媽媽”都是女的，怎么會出來個男的，而且又是“沒結婚”的？這些標題都給讀者留下了一個懸而未解的疑問，答案只有閱讀了文章之后才會知曉。</p> <p>7、賓語前置法擬制標題常常使用動賓結構的詞組或短句的形式。如恩格斯的《論權威》，毛澤東的《論人民民主專政》，吳伯簫的《記一輛紡車》等。但有時為了使標題的形式有所變化，也可以把其中的賓語提到動詞前面，變成賓語前置的形式。如馬克思的《資本論》，毛澤東的《實踐論》，《矛盾論》，薛福成的《觀巴黎油畫記》，蒸子的《無名禮贊》等。賓語前置式標題與原來的標題比較，只是形式不同，內容并無變化，因此二者可以互換。</p> <p>8、隔點法運用間隔號把標題中兩三個具有某種聯(lián)系的單詞以并列的形式分隔開來，這種擬題方法就叫“隔點法”。例如魯迅的《貓·狗·鼠》，秦牧的《園林·扇畫·散文》，林平的《讀書·愛國·修身》（《文匯報》1981年5月3日版）等，都屬于這種形式。</p> <p>運用隔點法擬制的標題，其單詞排列整齊、勻稱，能給人以美感。另外，這種標題形式還能產(chǎn)生懸念，吸引讀者閱讀。這種標題一般多適用于雜文、隨筆一類的短篇議論文。</p> <p>9、冒號法近年來在報刊雜志上經(jīng)常出現(xiàn)一種新的標題形式，這種標題中間都加有一個冒號。例如莊建民的《選美：眾說紛紜的話題》（《瞭望》1993年7月26日第30期），《瞭望》雜志社記者文章《1993：在夏收第一線》（《瞭望》1993年7月19日第29期）。</p> <p>這種標題中的冒號一般具有兩個作用：一是表示前面內容是對后面內容的限制；二是表示后面內容是對前面內容某一個方面的診釋、介紹或闡述。一般情況下，這兩個作用是同兼的。如上述二例：例一，“選美”是對“眾說紛紜的話題”的限制，“眾說紛紜的話</p> <p>題”很多，“選美”只是其一；反過來，“選美”關系到的方面很多，“眾說紛紜”只是對其中一個方面的闡述。例二，“1993”是對“在夏收第一線”時間上的限制；而“在夏收第一線”則是對1993年“夏收”這一個方面的介紹和闡述。</p> <p>擬制冒號標題，一般總是將文字較少的名詞或名詞性詞組放在前面，而將文字較多的動詞或名詞謂語部分放在后面，如上述二例即是。</p> <p>運用冒號法擬題，可以準確地揭示文章內容，讓湊者在有限的標題文字中獲取更多的內容信息，還可以便標題形式更加多樣化。這種標題形式在新聞體裁和學術文章中比較多見。</p> </div> </div> <div class="tab-panel"> <div class="content"> <h3>文章二</h3> <p>文章包括各種文體的著作、作品，如詩歌、戲劇、小說、科學論文，記敘文、議論文、說明文、應用文等等?！扒Ч盼恼挛幢M才”“文章千古事”“文章憎命達”“板凳要坐十年冷、文章不寫一字空”“積句而成章，積章而成篇”“言出為論，下筆成章”等，都是現(xiàn)在所說的文章的意思。更廣義的文章，也包含“學問”“奧秘”等意思，如“洞明世事皆學問，人情練達即文章”就是。</p> <p>“文章”的“章”字，是個會意字，從音從十。古代奏音樂，連奏十段才能結束（十，數(shù)之終也），這十段樂就是一章。所以，文章文章，也有段落。文章既從“音樂”里會意出來，應是用文字表達出來的東西，讀起來如音樂一樣美妙無窮、悅耳動聽的文字，傳誦開來，才配得上“文章”一詞的真正含義。</p> <br /> <h3>釋義</h3> <p>“文”即“紋”，指“紋路”、“紋樣”。“章”本指“屏蔽”，轉指“外表”?！拔恼隆痹x指“有紋樣的表面”，諸如服裝上繡繪的龍鳳圖樣、皮膚上針刺的花卉圖案，等等。即其原義是指直接構成視覺形象的圖樣。后指文字所描繪出來的事物圖樣，需要大腦“解碼”才能完整呈現(xiàn)的間接的事物形象。</p> <br /> <h3>要素</h3> <p>文章的基本要素——主題、材料、結構、語言，是文章學的主要研究對象，以往各種寫作論著論之甚詳，但對其概念內涵的揭示似欠斟酌，定義并不嚴格。新近出版的寫作論著，或沿用舊說，或雖有改動而仍值得商榷。本文擬從嚴格意義上的定義要求出發(fā)，結合有關知識，對這四個要素概念的種種“定義”質疑問難，并試提出自己的修正意見，以就教于寫作界同行。</p> <br /> <h3>擬題中常用的修辭手法和語言技巧主要有以下九種。</h3> <p>1、引用法就是借用俗語、名言或他人詩句等現(xiàn)成的語言材料來擬制標題。引用法分直接引用和變形引用兩種情況。</p> <p>直接引用，就是把引用的語言材料不加改動地直接取來作擬題之用。如理由的《揚眉劍出鞘》，人民日報評論員文章《鐵公雞—一毛不拔》，廖沫沙的《教然后知困》等，都屬于這種形式。直接引用比較簡單，無須多說。變形引用則非常復雜，需要著重談談。</p> <p>變形引用，就是把引用的語言材料經(jīng)過加工改造，然后再作擬題之用。變形引用根據(jù)不同的加工方式又可分為“反疊式”、“悖論式”、“諧變式”、“鑲嵌式”等不同形式。</p> <p>反疊式變形引用，就是利用其他文章標題、俗語等進行反面重疊，造成一種反疊式的標題。如蒲魯東曾寫有《貧困的哲學》，馬克思便利用它寫了《哲學的貧困（答蒲魯東先生的<貧困的哲學>）》，這就是反疊式變形引用。此外，諸如《“回頭浪子”幫助浪子回頭》，《伯樂相馬與馬相伯樂》等，也都屬于這種形式。反疊式變形引用，內容上可以使標題產(chǎn)生新意，給人以新奇而幽默的感覺，形式上給人以對稱的美感。</p> <p>對常見的俗語、名言進行加工改造，取其反義而用之，形成一種貌似荒謬卻又隱含著十分新穎而深刻的意義，這種引用方式叫“悖論式變形引用”。例如“班門弄斧”這句成語一般是用來諷刺那些在行家面前賣弄本事，沒有自知之明的人。而一位作者在介紹華羅庚赴美講學的一篇文章中卻擬用了《弄斧必到班門》這樣一個標題。為什么呢？因為華羅庚赴美講學計劃講十個數(shù)學專題，為了與美國同行能在更高的層次上進行學術交流，他決定在美國各大學所講的專題必須是該大學科研中的長項。華羅庚戲稱自己這是“弄斧必到班門”，此文作者便取之為題。你看，這個標題與“班門弄斧”的本義正好相悖，卻又含義深遠，切合于文章內容。此外，諸如《近水樓臺不得月》，《曲高未必合寡》，《要有“知人善免”的勇氣》等，也都屬于這種形式。</p> <p>諧音式變形引用，就是利用語言的同音現(xiàn)象，將引用的俗語、名言中的個別字詞加以替換，造成一種同音異義的語言效果，這種引用方式就叫“諧音式變形引用”。例如1987年1月25日《人民日報·海外版》登載的蘇泰的文章《學而優(yōu)則“侍”》，標題顯然是從《論語·子張》中的“學而優(yōu)則仕”一句變化而來。原來此文主題是贊揚大學生勤工助學，放下架子，課余時間去咖啡廳為顧客服務。此外，如《以“職”論價》與俗語“以質論價”諧音，《愛“才”如命》與成語“愛財如命”諧音，這些標題與原句雖然只是一字之差，卻另出新意，醒人耳目。</p> <p>鑲嵌式變形引用，就是利用俗語、名言、古詩詞等原有的語句框架，選擇一些切合于文章內容的字詞填嵌其中，使其另生新意。例如，有篇新聞報道，標題是《助人何必曾相識，精神文明譜新歌》，其中前半句顯然出自唐代詩人白居易《琵琶行》詩中的“同是天涯淪落人，相逢何必曾相識”一句，將“助人”二字填嵌其中，便有了新的含義。又如有一篇市場調查，標題為《知否？知否？應是賤肥貴瘦》，顯然，這是襲用了宋代詩人李清照《如夢令》詞中“知否？知否？應是綠肥紅瘦”一句將“賤”、“貴”二字填嵌其中，也使標題陡生新意。</p> <p>變形引用雖然方式各異，但都能巧妙地利用俗語、名言及古詩詞廣泛的傳播效應，給人一種似曾相識，卻又頗含新意的感受，推陳出新，為我所用，使文章標題更具魅力。</p> <p>2、疊加法所謂“疊加法”，就是在他人文章或言論的基礎上，進一步深入研究探討，以其相同的寫作手法寫成文章，其標題往往是以相同的語句疊加而成，故稱“疊加法”。運用疊加法擬題最常見的一種形式，就是利用他人有關“批評”或“批判”而擬制新的駁論性文章標題。這種標題常常擬為《關于……批評的批評》，這種標題有時也可采用多重否定的形式，但常見的是雙重否定形式。此外，諸如《關于啟示的啟示》，《對于“笑話”的笑話》等，也都是采用疊加法擬題的一種形式。</p> <p>3、對偶法就是擬題時把結構相同，字數(shù)相等的一對句子或詞組排列在一起，以表達相關、相聯(lián)或相反的意思。例如《半月談》評論員文章《尊師重教，育才興邦》（1985年第3期），其標題就是采用對偶法擬制的。此外，諸如《運用綜合技術開拓未來世界》，《高價水泥一斤不賣計劃指標一袋不少》，《賣債券支援國家建設得獎品為您增添喜悅》等，也都是采用對偶法擬制的標題。</p> <p>采用對偶法擬制的標題，兩個句子或詞組的意思彼此補充，相互映襯可將文章內容達得更加深刻、鮮明，而且朗讀起富有節(jié)奏感，能增強標題語言的藝術性。</p> <p>4、活用動詞法文學作品描寫人物之所以能給人以深刻的印象，很重要的一點就是作者善于抓住人物富有典型意義的行為動作來進行描寫，只有這樣才能把人物寫“活”。擬制標題也可以采用文學作品描寫人物的這種方法，根據(jù)文章內容，選取具有典型意義的動態(tài)性的詞句來擬制標題，著眼于一個“動”字，盡量把題目寫“活”例如，有篇文章記敘一位公共汽車女售票員，正確對待一個無理取鬧往自己身上吐痰的小青年，從而引起小青年自責的事。如果把題目擬成《售票員風格高尚，乘車人行為可恥》便很一般。而這位作者卻不同凡響，將題目擬為《冷靜擦去一口痰，微笑震動一顆心》，兩相比較，后者就顯得格外生動感人。又如有則通報批評某單位制定的服務措施只是掛在墻上而沒有落實到行動上，標題是《讓措施從墻上“走”下來》。你看，一個“走”字，用得真是恰到好處，平字生輝。</p> <p>5、虛實結合法這是擬制雙行標題所采用的一種擬題方法。大家知道，擬單行標題，作者既可以用平實的文字開門見山地把文章主題或主要內容直接傳達給讀者，直白陳事，實實在在，不需要任何修飾和點綴；也可以采用形象、含蓄的語句擬題，使標題富有形象性和趣味性，詩情畫意，引人遐思。兩種方法雖各有千秋，但不免單調，而擬雙行標題則可以把這兩種方法結合起來使用，使其中一行標題形象、含蓄，另一行標題平實、明快，這就是“虛實結合法”。采用這種方法擬制的標題，其正題一般多采用富有形象性、含蓄性的語句擬制，其作用在于揭示和突出文章的主要內容，副題則采用準確、平實的語句擬制，它對正題具有診釋和限制的作用。例如，發(fā)表在《名作欣賞》1986年第3期上的朱炯強的文章</p> <p>6、設迷法就是采用類似于迷語的方式，在標題中先有意設下一個“迷面”，使讀者產(chǎn)生懸念，誘發(fā)其想要急切解答的欲望，其“迷底”待閱讀全文之后自然揭曉。例如祖慰的文章《赫赫而無名的人生》（《文匯月刊》1987年第6期），題目起得就頗為古怪、有句成語叫“赫赫有名”，“赫赫”乃顯赫的意思，用來修飾“有名”，意思是名氣很大，聲名顯赫。既然“赫赫”，何來“無名”？待看過文章之后方才恍然：原來這篇文章是介紹中國導彈核潛艇的總設計師，一位人稱“中國核潛艇之父”的科學家的坎坷一生。核潛艇，乃尖端高科技產(chǎn)品，世界上只有極少數(shù)國家擁有，而中國已能自行設計、建造，這難道不是轟動全球的赫赫偉業(yè)？而高科技軍事武器因為是國家保密項目，參與設計、建造的科學家自然也是“無名”的，所以題目就叫“赫赫而無名的人生”。此外，諸如《腰纏萬貫的乞丐》，《從未見面的老朋友》，《一位沒結婚的男“媽媽”》等，也都是采用設迷法擬制的標題。既然“腰纏萬貫”，怎么會是“乞丐”？既然是“老朋友”怎么會沒見過面？“媽媽”都是女的，怎么會出來個男的，而且又是“沒結婚”的？這些標題都給讀者留下了一個懸而未解的疑問，答案只有閱讀了文章之后才會知曉。</p> <p>7、賓語前置法擬制標題常常使用動賓結構的詞組或短句的形式。如恩格斯的《論權威》，毛澤東的《論人民民主專政》，吳伯簫的《記一輛紡車》等。但有時為了使標題的形式有所變化，也可以把其中的賓語提到動詞前面，變成賓語前置的形式。如馬克思的《資本論》，毛澤東的《實踐論》，《矛盾論》，薛福成的《觀巴黎油畫記》，蒸子的《無名禮贊》等。賓語前置式標題與原來的標題比較，只是形式不同，內容并無變化，因此二者可以互換。</p> <p>8、隔點法運用間隔號把標題中兩三個具有某種聯(lián)系的單詞以并列的形式分隔開來，這種擬題方法就叫“隔點法”。例如魯迅的《貓·狗·鼠》，秦牧的《園林·扇畫·散文》，林平的《讀書·愛國·修身》（《文匯報》1981年5月3日版）等，都屬于這種形式。</p> <p>運用隔點法擬制的標題，其單詞排列整齊、勻稱，能給人以美感。另外，這種標題形式還能產(chǎn)生懸念，吸引讀者閱讀。這種標題一般多適用于雜文、隨筆一類的短篇議論文。</p> <p>9、冒號法近年來在報刊雜志上經(jīng)常出現(xiàn)一種新的標題形式，這種標題中間都加有一個冒號。例如莊建民的《選美：眾說紛紜的話題》（《瞭望》1993年7月26日第30期），《瞭望》雜志社記者文章《1993：在夏收第一線》（《瞭望》1993年7月19日第29期）。</p> <p>這種標題中的冒號一般具有兩個作用：一是表示前面內容是對后面內容的限制；二是表示后面內容是對前面內容某一個方面的診釋、介紹或闡述。一般情況下，這兩個作用是同兼的。如上述二例：例一，“選美”是對“眾說紛紜的話題”的限制，“眾說紛紜的話</p> <p>題”很多，“選美”只是其一；反過來，“選美”關系到的方面很多，“眾說紛紜”只是對其中一個方面的闡述。例二，“1993”是對“在夏收第一線”時間上的限制；而“在夏收第一線”則是對1993年“夏收”這一個方面的介紹和闡述。</p> <p>擬制冒號標題，一般總是將文字較少的名詞或名詞性詞組放在前面，而將文字較多的動詞或名詞謂語部分放在后面，如上述二例即是。</p> <p>運用冒號法擬題，可以準確地揭示文章內容，讓湊者在有限的標題文字中獲取更多的內容信息，還可以便標題形式更加多樣化。這種標題形式在新聞體裁和學術文章中比較多見。</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頁面中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> 此時點擊文章一或文章二內容則可以切換了。
其實Tab切換也可以單獨寫套插件進行復用，像bootstrap里也有Tab組件，這里主要講自定義滾動條，就不細講Tab切換的封裝方法，先簡單實現(xiàn)下。
3.4 添加自定義滾動條功能
給tab標簽對應的tab-panel區(qū)域中內容，添加自定義滾動條，代碼如下：
<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標簽
tabEvent(0);
//給tabl-panel區(qū)域的內容添加自定義滾動條功能
$('#tabScroll').find('.tab-panel .content').each(function(){
$(this).customScroll();
});
});
</script> 頁面效果如下：
大家在切換時會發(fā)現(xiàn)，當在文章一中滾動條手柄滑到某位置后，切換到文章二中操作，再切換回文章一，還在上次停留位置。如果切換回需還原初始位置，方法也很簡單，這塊就留給大家自己實現(xiàn)了。
總結
到此這篇關于JQuery實現(xiàn)自定義滾動條的文章就介紹到這了,更多相關JQuery自定義滾動條內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了jQuery獲取與設置iframe高度的方法,涉及jQuery針對iframe元素的獲取與設置相關操作技巧,非常簡單實用,需要的朋友可以參考下2016-08-08
jQuery插件echarts實現(xiàn)的單折線圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實現(xiàn)的單折線圖效果,結合完整實例形式分析了echarts插件繪制簡單折線圖的操作步驟與相關實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
原來ie對默認對彈出窗口有會限制他的大小和位置 所以這就是為什么本地和博客園上看到會不一樣的原因了2010-09-09
這篇文章主要介紹了jQuery實現(xiàn)簡單下拉導航效果,通過簡單的元素遍歷與樣式替換實現(xiàn)下拉導航的功能,非常具有實用價值,需要的朋友可以參考下2015-09-09
這里給大家分享的效果是像百度的搜索框一樣，當用戶在文本框輸入前幾個字母或是漢字的時候,該控件就能從存放數(shù)據(jù)的文或是數(shù)據(jù)庫里將所有以這些字母開頭的數(shù)據(jù)提示給用戶,供用戶選擇,提供方便，增加用戶體驗。2015-07-07
jQuery Validate 相關參數(shù)及常用的自定義驗證規(guī)則
這篇文章主要介紹了jQuery Validate 相關參數(shù)及常用的自定義驗證規(guī)則,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
這篇文章主要介紹了jQuery的XX如何實現(xiàn)？——2.show與鏈式調用 的相關資料，非常具有參考借鑒價值，感興趣的朋友一起學習吧2016-05-05
這篇文章主要介紹了jQuery設置Cookie及刪除Cookie的方法,結合完整實例形式分析了jQuery操作cookie的設置,獲取及刪除等操作技巧,需要的朋友可以參考下2016-04-04
jquery層級選擇器的實現(xiàn)(匹配后代元素div)
下面小編就為大家?guī)硪黄猨query層級選擇器的實現(xiàn)(匹配后代元素div)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
jQuery+正則+文本框只能輸入數(shù)字的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query+正則+文本框只能輸入數(shù)字的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10