10款經典的web前端特效的預覽及源碼

1.CSS3響應式導航菜單

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

在線演示css

源碼下載html

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

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

10款經典的web前端特效的預覽及源碼 - 愛七七五八網 - 1

在線演示java

源碼下載css3

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

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

在線演示ajax

源碼下載瀏覽器

4.使用CSS3製做漂亮的按鈕

今天我給你們介紹一下如何使用CSS3來製做一個圓角陰影、漸變色的漂亮的按鈕,它不須要任何圖片和javascript腳本,只須要CSS3就能夠輕鬆實現按鈕效果,而且能夠適用於任意HTML元素,想div,span,p,a,button,input等等。cookie

在線演示

源碼下載

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

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

10款經典的web前端特效的預覽及源碼 - 愛七七五八網 - 2

在線演示

源碼下載

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來實現圖文信息滾動效果。

10款經典的web前端特效的預覽及源碼 - 愛七七五八網 - 3

在線演示

源碼下載

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

相關文章
相關標籤/搜索