注本頭條號，專注做前端

做為一個多年的web前端從業者，焦點圖什么的用過不少，不過這一款的特別之處在于，它不是jquery插件，而且基于react 來實現，支持拖拽，支持手機端。

它引用了 react.min.js 和dom操作 react.dom.js 和強大的動畫庫 anime.min.js。

//

.jQuery百葉窗效果焦點圖 多種百葉窗動畫方式

對于百葉窗動畫效果，我們介紹的不是很多，目前就介紹過一款[color=rgb(68, 68, 68) !important]CSS3百葉窗圖片切換。這次要給大家帶來一個基于jQuery的多種百葉窗動畫效果焦點圖，焦點圖的切換伴隨隨機的百葉窗動畫，每一種百葉窗動畫都非常精巧，當然你也可以定義自己的百葉窗動畫，將其加入動畫列表中。

在線演示:http://www.html5tricks.com/demo/jquery-shutter-silder/index.html

源碼下載:http://www.html5tricks.com/download/jquery-shutter-silder.rar

2.jQuery多層級垂直手風琴菜單

之前我們分享過一款類似的jQuery垂直手風琴菜單CSS3手風琴菜單 下拉展開帶彈性動畫，這次分享的這款手風琴菜單是多層級的，你可以通過HTML結構生成任意層級的菜單。由于是基于jQuery的，因此這款手風琴菜單的兼容性還不錯。

在線演示:http://www.html5tricks.com/demo/jquery-level-accord-menu/index.html

源碼下載:http://www.html5tricks.com/download/jquery-level-accord-menu.rar

3.純CSS3實現幽靈漂浮動畫

這又是一款基于純CSS3的動畫特效，先是用CSS3繪制了一個“可愛”的幽靈，沒用運用圖片，其實用CSS3繪制一些簡單的線條和圖形非常簡單。然后通過CSS3的動畫屬性對幽靈進行上下的漂浮，動畫效果還是非常不錯的。

在線演示: http://www.html5tricks.com/demo/pure-css3-ghost-float/index.html

源碼下載：http://www.html5tricks.com/download/pure-css3-ghost-float.rar

4.jQuery加入購物車商品飛入動畫

現在網上商城很多，每一個網上商城都會有將商品加入購物車的功能，本文將要分享一個用jQuery實現的加入購物車商品飛入動畫，與其他加入購物車效果不一樣的是，當點擊加入購物車，商品會自動飛入購物車里面，并通過抖動購物車來提示用戶操作成功。

在線演示:http://www.html5tricks.com/demo/jquery-add-to-cart/index.html

源碼下載:http://www.html5tricks.com/download/jquery-add-to-cart.rar

5.CSS3可旋轉的卡通小鳥頭像

這是一款很可愛的CSS3動畫，關于[color=rgb(68, 68, 68) !important]HTML5小鳥的動畫，大家可以去看看這個SVG HTML5可愛的小鳥卡通動畫。今天要分享的這個也是基于純CSS3實現的，只要我們將鼠標滑過小鳥頭像，小鳥就會出現旋轉的動畫效果，非常可愛。

在線演示:http://www.html5tricks.com/demo/css3-bird-avatar/index.html

源碼下載:http://www.html5tricks.com/download/css3-bird-avatar.rar

6.jQuery懸浮標題的幻燈片播放焦點圖 淡入淡出動畫

關于jQuery焦點圖插件，html5tricks已經為大家分享過很多了。今天我們要來介紹一款很普通但相當實用的jQuery懸浮標題的幻燈片播放焦點圖，焦點圖十分簡易，每張圖片都可以有一個標題和簡介內容，這些文字內容懸浮在圖片下方。圖片切換時也是簡單的淡如淡出動畫，這用jQuery是很容易實現的。

在線演示:http://www.html5tricks.com/demo/jquery-slider-float-title/index.html

源碼下載:http://www.html5tricks.com/download/jquery-slider-float-title.rar

7.CSS3網站地圖可視化生成器

SlickMap CSS是一款利用CSS文件直接將網站地圖(sitemap)轉換為可視化網頁圖表導航的CSS框架，它可以讓一個枯燥的sitemap XML文件或者HTML文件轉換成讓人容易理解的組織架構圖，讓你對網站有個一目了然的了解。然后SlickMap CSS是自動化的，您自需要用XML或者HTML元素將站點地圖結構描述好，SlickMap CSS會幫你直接渲染。

在線演示:http://www.html5tricks.com/demo/SlickmapCSS/index.html

源碼下載:http://www.html5tricks.com/download/SlickmapCSS.rar

8.jQuery滑動桿實現購買日期選擇

這是一款基于jQuery的滑動桿購買日期選擇插件，它的外觀仿的是阿里云的服務器購買日期選擇界面。這款jQuery插件非常適合在一些虛擬產品購買頁面上使用，它可以幫助你的用戶快速選擇產品的購買日期，十分方便。

在線演示:http://www.html5tricks.com/demo/jquery-sidebar-date-select/index.html

源碼下載:http://www.html5tricks.com/downl ... bar-date-select.rar

9.CSS氣泡提示框 可自定義配置箭頭

今天我們要來分享一款基于純CSS的氣泡提示框，和之前分享的一款jQuery消息提示框插件Tipso類似，整個提示框由箭頭和矩形框組成，并且氣泡提示框的箭頭可以有不同的方向。這款CSS氣泡提示框由純CSS完成，最大的特點就是可以自定義配置，包括文字顏色、背景顏色和箭頭方向等。

在線演示:http://www.html5tricks.com/demo/css-arrow-please/index.html

源碼下載:http://www.html5tricks.com/download/css-arrow-please.rar

10.jQuery模擬拋物線軌跡動畫

利用jQuery和HTML5可以模擬很多數學中的函數圖象，比如HTML5 Canvas正弦波動畫。今天我們要介紹一個用jQuery實現簡單的模擬拋物線軌跡的插件，可以開始和暫停拋物線的運動，以及重新設置拋物線的參數。

在線演示:http://www.html5tricks.com/demo/jquery-parabola/index.html

源碼下載:http://www.html5tricks.com/download/jquery-parabola.rar

切圖網（qietu.com）是一家專門從事web前端開發的公司，專注we前端開發，關注用戶體驗，歡迎訂閱微信公眾號：qietuwang