10個聰明的JavaScript技術manipulating內(nèi)容
深圳網(wǎng)站制作提供信息結構是交互式用戶界面應該能夠處理的首要任務。更直觀的布局結構設計，更好的用戶可以理解的內(nèi)容。

無論你要呈現(xiàn)什么內(nèi)容，你都可以以一種更互動、更敏感的方式呈現(xiàn)它們。在這篇文章中，我們將介紹10種智能JavaScript技術，在創(chuàng)建下一個布局設計時，您總是得心應手。

“網(wǎng)頁滑塊”、“隱藏內(nèi)容”、“圖像或內(nèi)容滑塊”、“動畫幻燈片”、“旋轉木馬”、“標簽內(nèi)容”以及“調(diào)整大小，拖動和滑動”、“燈箱”模塊，你可以使用有效的演示你的內(nèi)容（文字或圖片）。

1. jQuery pageSlide
jQuery pageSlide是是一個jQuery幻燈片查看網(wǎng)頁的屏幕插件，揭示和填充一個次級相互作用窗格。它可以用在燈箱類似的方式，在屏幕房地產(chǎn)和集中的用戶體驗是一個問題。

主窗口是為內(nèi)容保留的；二級交互不需要頁面上的額外空間——它們所需的區(qū)域是按需要創(chuàng)建和刪除的。
因為用戶可以看到原始窗口，所以保留焦點的可能性更大，并且可以很容易地返回到以前的任務。

2。創(chuàng)建一個簡單的UL列表，它具有一個很好的幻燈片效果
我們希望得到這樣的效果：當用戶點擊一個鏈接（“隱藏”）時，相關的<元素>消失，動畫效果很好。一個簡單的方法來實現(xiàn)動畫“消失”slideout()使用Mootools為列表元素，當用戶點擊一個鏈接進入一個<li>元素列表的效果。本教程說明如何使用JavaScript代碼的“五行”來實現(xiàn)它。

首先我們需要實現(xiàn)一個簡單的產(chǎn)品列表id =“mylist”和一些<li>元素進行編號：L1，L2，L3，L5，L5和添加一個鏈接“隱藏”：

<ul id="myList">
<li id="l1">Playstation | <a href="#">Hide</a></li>
<li id="l2">iPod Touch | <a href="#">Hide</a></li>
<li id="l3">XBOX 360 | <a href="#">Hide</a></li>
<li id="l4">Nokia N97| <a href="#">Hide</a></li>
<li id="l5">Dell Inspiron | <a href="#">Hide</a></li>
</ul>

Here is the javascript code to enable slideOut() effect:

<script>
window.addEvent('domready', function() {
/* From the list with ID myList, for each li element of the list...: */
$('myList').getElements('li').each(function(e){
/* ...get the ID of the selected item */
e.getElement('a').addEvent('click', function(listID){
/* Enable Fx.Slide effect for the selected item */
var list_element = new Fx.Slide(listID);
/* Enable slideOut() effect */
list_element.slideOut()
}.pass(e.id));
});
});
</script>

3.使用jQuery組合布局構想

假設您想創(chuàng)建一個具有不同縮略圖的項目組合布局，并有一個中間面板來顯示所選項目的詳細信息和圖片。Benjamin Sterling創(chuàng)造了一個有趣的組合布局，增加了一個不錯的放松方法，使用easeoutquad使用jQuery插件easeinquad寬松主要內(nèi)容面板。

4。創(chuàng)建一個光滑的自動播放功能內(nèi)容滑塊
Niall Doherty的coda滑塊啟發(fā)很多設計師和讓他們迅速開始設計它。Chris Coyier創(chuàng)建了一個巧妙的自動播放功能的內(nèi)容滑塊使用coda滑塊插件非常“開箱”添加以下功能，它的功能：

面板中不同類型的自定義內(nèi)容。我們可以在面板中放置任何我們想要的東西，但是為了讓我們自己更容易，將會有一些不同的格式準備好了。主要是一個圖像的大小整個面板，但具有文字覆蓋。

自動播放。您仍然可以單擊縮略圖跳轉到任何面板，但留在自己，滑塊將慢慢地通過面板循環(huán)。

箭頭指示。若要作為當前正在查看的面板的可視指示，將在縮略圖上顯示指向面板的小箭頭。

本質(zhì)上，為了實現(xiàn)“自動播放”效果，克里斯每隔3秒就在下一個縮略圖中觸發(fā)一個單擊事件，并在DOM準備就緒時處理縮略圖的手動單擊事件。

5。輕松圖像或內(nèi)容滑塊
輕松滑動使圖像或任何內(nèi)容水平或垂直滑動點擊。這是可配置的CSS單獨。所以，基本上你鏈接到插件文件，設置內(nèi)容和風格與CSS它。外觀是完全可編輯的CSS，所以所有人都害怕自己的手弄臟JS代碼可以很容易地使用這個。

內(nèi)容應包裝在包含有序列表的div內(nèi)，其中每個列表項代表一個幻燈片。可以在每個列表項中添加文本內(nèi)容或圖像。腳本自動在計算當前“位置”的內(nèi)容元素之后添加“以前”和“Next”按鈕，并在請求的方向上單步執(zhí)行。因此，滑塊從一個幻燈片跳轉到另一個幻燈片。

6. mooSlide
mooslide是不錯的替代普通“燈箱”模塊。它有一些有趣的選項可以影響滑動框的外觀和行為。您還可以在頁面上擁有多個框！此外，您現(xiàn)在可以定義，從盒子應該飛在：從頂部或底部。此外，它允許您從定義的其他頁面加載內(nèi)容，或者在滑塊消失時執(zhí)行函數(shù)。

7. jQuery.SerialScroll
jquery.serialscroll可以讓你方便的任何動畫系列的元素，它們依次滾動。它采用jquery.scrollto實現(xiàn)滾動動畫。此插件可用于導航目的。

功能包括：
可以使用水平滾動或垂直滾動，也可以組合使用。
你可以決定每次用CSS顯示多少。

這些項目不需要對齊，你可以按你所希望的那樣擴展它們，它總能找到它們。
你可以使用它作為文本滾動，滾動新聞或幻燈片。

8. Agile Carousel
敏捷旋轉木馬允許您輕松創(chuàng)建自定義旋轉木馬。調(diào)用jQuery UI來啟用許多不同的附加轉換類型和簡化方法。使用PHP從指定的文件夾中繪制圖像。配置許多不同的選項，包括控件、幻燈片計時器長度、輕松類型、轉換類型和更多！

它可以使用或不使用jQuery UI來提供更多的效果來提供完全的控制。

選項包括：

transition_easing：進入寬松型
transition_duration：毫秒所有幻燈片切換輸入長度
slide_captions：進入幻燈片標題列表
number_slides_visible：進入幻燈片，應該在舞臺上可見數(shù)
water_mark：輸入的文本將出現(xiàn)在旋轉木馬和不受過渡。

9。JavaScript幻燈片動畫
這個非常輕量級的JavaScript動畫幻燈片腳本包含了一些很酷的特性來描述你的內(nèi)容：描述支持、鏈接支持、沒有命名限制、肖像圖像支持、優(yōu)雅的降級和活躍的縮略圖狀態(tài)。標記非常簡單：

<ul id="slideshow">
<li>
<h3>Image One</h3>
<span>photos/image-one.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/image-one.jpg" alt="Image One" /></a>
</li>
<li>
<h3>Image Two</h3>
<span>photos/image-two.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<img src="thumbnails/image-two.jpg" alt="Image Two" />
</li>
</ul>

上面的每一個“李”代表一個圖像。“H3”內(nèi)容成為圖像的標題和“p”的描述。“跨越”的內(nèi)容是全尺寸的圖像的路徑。你可以設置不同的參數(shù)，如圖像的速度、透明度，對形象要求顏色設置信箱，幻燈片自動或沒有，等。

10. Sexy Lightbox 2
性感的燈箱2是一個性感和打火機的經(jīng)典燈箱克隆。支持顯示圖像和HTML元素。完全兼容HTML，意味著你可以顯示項目，網(wǎng)頁，視頻，和所有你想要顯示的東西。大的圖像自動調(diào)整到瀏覽器窗口的大小。需要mootools框架。