1.CSS3響應式導航菜單

今天我給大家介紹一下如何使用純CSS來實現的一個響應式導航菜單，我們使用的是HTML5+CSS3技術，當瀏覽器窗口變小或者使用手機瀏覽器訪問的時候，原本橫條菜單會收縮成一個下拉菜單，當鼠標滑向菜單時下拉展示全部菜單。此方法可以應用到有特別多的鏈接菜單項目中，特別在移動項目中，它可以將所有菜單轉換成一個按鈕式的下拉菜單。

在線演示

源碼下載

2.使用raphael.js繪制中國地圖

最近的數據統計項目中要用到中國地圖，也就是在地圖上動態的顯示某個時間段某個省份地區的統計數據，我們不需要flash，僅僅依靠raphael.js以及SVG圖像就可以完成地圖的交互操作。在本文中，我給大家分享如何使用js來完成地圖交互。raphael.js是一個很小的javascript庫，它可以在網頁中實現繪制各種矢量圖、各類圖表、以及圖像裁剪、旋轉、運動動畫等等功能。此外raphael.js還跨瀏覽器兼容，而且還兼容老掉牙的IE6啊。

在線演示

源碼下載

3.使用CSS3和jQuery可伸縮的搜索條

搜索條在我們網站是必不可少的，尤其是在有限的頁面空間里，放置一個重要的搜索條是個難題，今天我將結合實例給大家介紹一下如何使用CSS3和jQuery來實現一個可伸縮功能的搜索條。在實例中，我們只展示一個搜索按鈕，當點擊搜索按鈕時，輸入框由右向左滑動展開，輸入搜索內容后，點擊搜索按鈕則跳到搜索結果頁，搜索輸入框收起。

在線演示

源碼下載

4.使用CSS3制作漂亮的按鈕

今天我給大家介紹一下如何使用CSS3來制作一個圓角陰影、漸變色的漂亮的按鈕，它不需要任何圖片和javascript腳本，只需要CSS3就可以輕松實現按鈕效果，并且可以適用于任意HTML元素，想div，span，p，a，button，input等等。

在線演示

源碼下載

5.使用Javascript控制Cookie關閉大背景

每當重大節日期間，各大主流網站首頁會披上節日的盛裝，設計者一般會使用大幅背景圖片來獲得更好的視覺沖擊效果，當然，也要考慮到有些用戶不習慣這大背景圖，那么在背景圖上放置 關閉 按鈕是有必要的，用戶只要點擊 關閉背景 按鈕，大幅背景圖將會消失。我們使用javascript來控制背景圖片的顯示和隱藏，當點擊關閉按鈕時，控制CSS使頁面不加載背景圖，同時記錄COOKIE相關參數，并設置cookie的有效期，那么在cookie有效期內刷新頁面，是不會再加載背景圖的，如果cookie失效，則又會重新加載背景圖片。

在線演示

源碼下載

6.PHP+MySql+jQuery實現的 頂 和 踩 投票功能

當我們瀏覽網頁時，我們想對網頁內容如文章、評論中的觀點持贊同或反對意見時，可以通過點擊網頁中的 頂 和 踩 來進行投票。而整個交互過程，開發者可以通過ajax異步來實現，從而提高用戶體驗。本文結合實例，講解使用PHP+MySql+jQuery實現的 頂 和 踩 投票功能，通過記錄用戶IP，判斷用戶的投票行為是否有效，該實例也可以擴展到投票系統中。如果您具備PHP、MySql和jQuery相關基礎知識，那么請繼續往下閱讀。

在線演示

源碼下載

7.FullCalendar應用–拖動與實時保存

我們可以使用FullCalendar建立一個非常強大的日歷程序，用戶可以輕松的在FullCalendar操作日程安排，諸如新建、修改、刪除等操作以及本文將要講解的拖動、縮放日程事件。

在線演示

源碼下載

8.FullCalendar應用–編輯與刪除日程事件

FullCalendar可以靈活運用到項目開發中，本站上一篇文章中，我們介紹了如何在FullCalendar新建日程事件，今天我要給大家介紹的是如何在FullCalendar中編輯和刪除日程事件，這樣我們就完成了FullCalendar上的 增刪改查 一系列操作。

在線演示

源碼下載

9.iPictrue:圖片標注提示

iPictrue是一款基于jQuery，能在圖片上的任意位置標注提示信息的插件，使用iPictrue可以讓圖片內容更豐富，提高互動性，適用于一些需要注釋圖片信息的應用如產品結構圖等，它還支持圖片、鏈接等html內容。

在線演示

源碼下載

10.jQuery實現的向下推送圖文信息滾動效果

WEB頁面需要展示網站最新信息，如微博動態、余票信息、路況監控等項目中常見的實時數據滾動效果，我們可以用jQuery來實現前端信息滾動效果。本文我們將結合實例為大家講解如何使用jQuery來實現圖文信息滾動效果。

在線演示

源碼下載

本文固定鏈接:?http://www.i7758.com/archives/1585.html

轉載于:https://www.cnblogs.com/i7758/p/4584923.html

總結

以上是生活随笔為你收集整理的10款经典的web前端特效的预览及源码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。