利用jQuery實現內容區自定義滾動條插件



18 69 24



特效描述:利用jQuery實現 內容區 自定義 滾動條 插件,利用jQuery實現內容區自定義滾動條插件

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/roll.css">

2. 引入JS

<script src="js/jquery.min.js"  type="text/javascript"></script>
<script src="js/scrollbar.js" type="text/javascript"></script>

3. HTML代碼

<div class="scroll_main">
	<div class="scroll_wrap">
		<div class="scroll_cont">
				<p>jQuery 是由美國人 John Resig 于 2006 年創建的一個開源項目,隨著被人們的熟知,越
					來越多的程序高手加入其中,完善和壯大其項目內容 ;如今已發展成為集 JavaScript、CSS、
					DOM、Ajax 于一體的強大框架體系,它的主旨是 :以更少的代碼,實現更多的功能(Write
					less,do more)。</p>
				<p>1. 訪問和操作 DOM 元素<br/>
					使用 jQuery 庫,可以很方便地獲取和修改頁面中的某元素,無論是刪除、移動、復制某
					元素,jQuery 都提供了一整套方便、快捷的方法,既減少了代碼的編寫,又大大提高了用戶
					對頁面的體驗度。具體示例我們將在后面的章節中陸續展示。</p>
				<p>2. 控制頁面樣式<br/>
					通過引入 jQuery, 程序開發人員可以很便捷地控制頁面的 CSS 文件。瀏覽器對頁面文件
					的兼容性一直以來都是頁面開發者最為頭痛的事,而使用 jQuery 操作頁面的樣式,卻可以很
					好地兼容各種瀏覽器。</p>
				<p>3. 對頁面事件的處理<br/>
					引入 jQuery 庫后,使頁面的表現層與功能開發分離,開發者可以更多地專注于程序的邏
					輯與功效 ;頁面設計者側重于頁面的優化與用戶體驗,通過事件綁定機制,可以很輕松地實
					現二者的結合。</p>
				<p>4. 大量插件在頁面中的運用<br/>
					在引入 jQuery 庫后,還可以使用大量的插件來完善頁面的功能和效果,如表單插件、UI
					插件,這些插件的使用,極大豐富了頁的展示效果,原來使用 JavaScript 代碼遙不可及的功
					能,通過插件的引入都可以輕松實現。</p>
				<p>5. 與 Ajax 技術的完美結合<br/>
					Ajax 的異步讀取服務器數據的方法,極大方便了程序的開發,加深了用戶的頁面體驗
					度;而引入 jQuery 庫后,不僅完善了原有的功能,而且減少了代碼的書寫,利用其內部對象
					或函數,加上幾行代碼就可以實現復雜的功能。</p>
				<p>1. 根據瀏覽器類型自動為 CSS 屬性添加對應的前綴名稱<br/>
					在 jQuery 1.8 及以上版本中,使用 jQuery 設置一些尚未正式納入 W3C 標準的樣式屬性時,
					將會根據瀏覽器的類型,自動在屬性前添加對應的前綴名稱,如設置“marquee-direction”屬
					性時,如果在 Chrome 瀏覽器中執行時,則會自動變為“-webkit-marquee-direction”。</p>
				<p>2. 重構了動畫方法<br/>
					在 jQuery 1.8 及以上版本中,通過改進后的 $.Animation 函數,用戶可以更加容易地添
					加或修改動畫。在改進功能的同時,還修復了許多動畫的 Bug,使動畫效果既具有綜合性,
					又具有代碼的擴展性。</p>
				<p>3. 優化了選擇器引擎<br/>
					在 jQuery 1.8 及以上版本中,不僅重寫了選擇器引擎,而且還對原有的引擎功能進行了
					性能優化,修復了一些邊緣問題和 Bug,其中包括對多個選擇符“~ > +”功能的改進;同時,
					還清理了代碼,使 jQuery 1.8 及以上版本比 jQuery 1.7.2 的體積少幾百字節。</p>
				<p>4. 強化 XSS 防護功能<br/>
					XSS 為 Cross Site Scripting 縮寫,意為跨站點腳本代碼攻擊,為避免與 CSS 縮寫重復,故
					縮寫為 XSS。在 jQuery 1.8 及以上版本中,通過新增加的“$.parseHTML”方法,可以將方法
					中的字符串解析為 DOM 元素塊,又可以控制字符串中腳本的執行,防范腳本代碼的攻擊。</p>
				<p>5. 自定義專屬版本<br/>
					我們在開發過程中,往往使用的 jQuery 功能只有少量部分,還有大部分的功能被閑置,
					而在 jQuery 1.8 及以上版本中,用戶可以通過基于 grunt 的構建系統,移除這些被閑置的模塊,
					重新自定義一個專屬版本,目前可移除的模塊包括 ajax、css、dimensions、effects 和 offset。
					此外,jQuery 在頁面中的功能還有很多,我們將在接下來的章節中一一介紹。</p>
		</div>
		<div class="scroll_bar">
			<div class="scroll_slider"></div>
		</div>
	</div> 
</div>
<script type="text/javascript">
new CusScrollBar({
  contentSelector: '.scroll_cont', //滾動內容區
  barSelector: '.scroll_bar', //滾動條
  sliderSelector: '.scroll_slider' //滾動滑塊
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 自動滾動圖片輪播 文字滾動 文字無縫滾動 文字間歇滾動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 青海11选5号码走势图 青海11选5今天开奖 在曲靖种什么最赚钱 时时彩计划网页版彩专家 腾讯分分彩6码挂机 河南十一选五走势 彩票方案 失恋中彩票 靠脑子赚钱几画 北京11选5嘉奖 福建36选7走势图全部号码 广西快乐10分怎么买 甘肃十一选五官网 在国外中彩票 福彩新疆时时彩96期开奖结果 超级诈金花软件