2. 程式人生 > >Web設計師值得收藏的10個jQuery特效

Web設計師值得收藏的10個jQuery特效

阿新 • • 發佈：2019-01-29
  

先試試看？特效例項：

View jQuery Demos：http://www.webdesignerwall.com/demo/jquery/

jQuery是如何工作的？

首先，你需要下載一個jQuery版本，並將它插入到<head>標籤內。然後，你將需要寫函式來告訴jQuery做些什麼，下面的這個圖表將告訴你jQuery是怎樣工作的（請點選圖片，檢視大圖）：

jQuery是怎樣工作的

如何獲取元素（Get the element）?

書寫jQuery函式是一個非常簡單的事。關鍵是你要學習如何獲取你想要實現的效果的確切元素。

  1. ("#header") = 獲取 id="header" 的元素   
  2. ("h3") = 獲取所有
    <h3>
  3. ("div#content .photo") = 獲取<divid="content">裡  
  4.   所有用class="photo"定義的元素   
  5. ("ul li") = 獲取所以 <ul> 中 <li> 的元素   
  6. ("ul li:first") = 只獲取<ul>中第一個<li>

1. 簡單的下拉麵板

讓我們來開始這個簡單的下拉麵板特效吧，或許你已經見過很多次，現在，自己試試吧：

簡單的下拉麵板

當包含class="btn-slide"的元素被點選，它會下拉/上提<div id="panel">裡的元素。然後切換到CSS中的class="active"到<a class="btn-slide">元素。.active 將會以CSS的方式開啟/關閉出面板。

  1. $(document).ready(function(){  
  2.  $(".btn-slide").click(function(){     
  3.  $("#panel").slideToggle("slow");     
  4.  $(this).toggleClass("active");   
  5.  });  
  6. }); 

view demo：http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html

2. 簡單的隱藏效果

如圖，當右上角的上圖示被點選時，內容被隱藏。

簡單的隱藏效果

當被定義為 <img class="delete"> 的圖片被點選，它會手找到父級元素 <div class="pane"> 並激活它的能力，慢慢消失，隱藏起來。

  1. $(document).ready(function(){  
  2.  $(".pane .delete").click(function(){     
  3.  $(this).parents(".pane").animate({ opacity: "hide" }, "slow");   
  4.  });  
  5. }); 

view demo：http://www.webdesignerwall.com/demo/jquery/simple-disappear.html

3 連續過渡效果

讓我們來看看jQuery連貫性的威力吧。只需要幾行程式碼，我能讓這個方塊漸變+縮放比例地飛來飛去。

連續過渡效果

Line 1: 當 <a class="run"> 被點選

Line 2: 啟用 <div id="box"> 的不透明度（opacity）=0.1，直到值達到400px，速度達到1200px/ms

Line 3: 當opacity=0.4, top=160px,height=20,width=20,以"slow"顯示

Line 4: 當opacity=1, left=0, height=100, width=100,也以"slow"顯示

Line 5: 當opacity=1, left=0, height=100, width=100, 也以"slow"顯示

Line 6: 當top=0, 以"fast"顯示

Line 7: 然後，以常速上滑 (default speed = "normal")

Line 8: 然後以"slow"下滑

Line 9:返回失效會阻止瀏覽器跳向連結錨點

  1. $(document).ready(function(){  
  2.  $(".run").click(function(){  
  3.    $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)     
  4.    .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")     
  5.    .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")     
  6.    .animate({top: "0"}, "fast")     
  7.    .slideUp()     
  8.    .slideDown("slow")     
  9.    return false;  
  10.  });  
  11. }); 

view demo：http://www.webdesignerwall.com/demo/jquery/chainable-effects.html

4a. 可摺疊的模式 #1

這是第一個可摺疊的樣式。

可摺疊的模式

第一行將向<div class="accordion"> 內的第一個<H3> 新增一個CSS class為"active"的值。 第二行剛是隱藏<div class="accordion">內非第一個< p >的內容。當 <h3> 被點選時，當前<p>下拉，而原先下拉的<p> 上提。

  1. $(document).ready(function(){  
  2.  $(".accordion h3:first").addClass("active");   
  3.  $(".accordion p:not(:first)").hide();  
  4.  $(".accordion h3").click(function(){  
  5.  $(this).next("p").slideToggle("slow")     
  6.  .siblings("p:visible").slideUp("slow");     
  7.  $(this).toggleClass("active");     
  8.  $(this).siblings("h3").removeClass("active");  
  9.  });  
  10. }); 

view demo：http://www.webdesignerwall.com/demo/jquery/accordion1.html

4b. 可摺疊模式 #2

這個例項與#1非常類似，不過，它會讓指定的面板像預設面板一樣開啟。

在CSS樣式表中，設定.accordion p 為 display:none。現在，如果你像預設開啟的樣式一樣，開啟第三個面板，你可以寫$(".accordion2 p").eq(2).show(); (eq = equal)來實現它，需要注意的是起始點是"0"，而不是"1"，所以，第三個相應的是"2"，而不是"3"。

  1. $(document).ready(function(){  
  2.  $(".accordion2 h3").eq(2).addClass("active");   
  3.  $(".accordion2 p").eq(2).show();  
  4.  $(".accordion2 h3").click(function(){     
  5.  $(this).next("p").slideToggle("slow")     
  6.  .siblings("p:visible").slideUp("slow");     
  7.  $(this).toggleClass("active");     
  8.  $(this).siblings("h3").removeClass("active"); });  
  9. }); 

view demo：http://www.webdesignerwall.com/demo/jquery/accordion2.html

5a. 滑鼠經過啟用效果 #1

這個將會實現一個非常漂亮的，當滑鼠經過時出現漸變出現的效果。當滑鼠經過選單時，它會尋找緊接著的<em>，並在上方啟用它的不透明度。

滑鼠經過啟用效果

  1. $(document).ready(function(){  
  2.  $(".menu a").hover(function() {     
  3.  $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");   
  4.  }, function()   
  5.  {     
  6.  $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");   
  7.  });  
  8. }); 

view demo：http://www.webdesignerwall.com/demo/jquery/animated-hover1.html

5b. 滑鼠經過啟用 #2

這個例項會顯示選單中連結的title 屬性attribute，讓其以變數方式存在，並新增<em>標籤。第一行會新增一個空的<em>到選單的<a>元素。當滑鼠經過菜單鏈接時，它會顯示title的屬性，讓它以"hoverText（隱藏）"的形式顯示，並使<em>中的文字顯示隱藏文字的值。

滑鼠經過啟用

  1. $(document).ready(function(){  
  2.  $(".menu2 a").append("<em></em>");  
  3.  $(".menu2 a").hover(function() {     
  4.  $(this).find("em").animate({opacity: "show", top: "-75"}, "slow");     
  5.  var hoverText = $(this).attr("title");     
  6.  $(this).find("em").text(hoverText);   
  7.  }, function() {     
  8.  $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");   
  9.  });  
  10. }); 

6. 整塊可點選性效果

這個例項將會教你如何實現內容中元素可點選性效果，Best Web Gallery的側邊欄Tab就顯示這樣的效果。

整塊可點選性效果

如果你想讓class="pane-list"的<ul>內的 <li> 可點選(整塊)，你可以向 ".pane-list li"指派一個函式，使它被點選時，函式找到 <a>元素，重定向到它的href屬性值。

  1. $(document).ready(function(){  
  2.  $(".pane-list li").click(function(){     
  3. window.location=$(this).find("a").attr("href"); return false;   
  4.  });  
  5. }); 

view demo：http://www.webdesignerwall.com/demo/jquery/block-clickable.html

7. 可收縮面板

讓我們組合一下上面的例項，創造一給可收縮的面板（像Gmai收件箱面板l）。作者還在Web Designer Wall 的評論列表Next2Friends裡應用這個。

可收縮面板

First line: 隱藏<div class="message_body">裡第一個元素以後的元素

Second line: 隱藏所有第5個<li>後面的元素

Third part: 當<p class="message_head">被點選裡，顯示/隱藏<div class="message_body">

Fourth part: 當<a class="collpase_all_message"> 被點選時，上提所有<div class="message_body">的元素

Fifth part: 當<a class="show_all_message"> 被點選，隱藏它，並顯示<a class="show_recent_only">，並下拉第5個<li>以後的元素

Sixth part: 當<a class="show_recent_only"> 被點選時，隱藏它，並顯示<a class="show_all_message">，並上提第5個 <li>以後的元素

  1. $(document).ready(function(){  
  2.  //hide message_body after the first one   
  3.  $(".message_list .message_body:gt(0)").hide();  
  4.  //hide message li after the 5th   
  5.  $(".message_list li:gt(4)").hide();  
  6.  //toggle message_body   
  7.  $(".message_head").click(function(){     
  8.  $(this).next(".message_body").slideToggle(500)     
  9.  return false; });  
  10.  //collapse all messages $(".collpase_all_message").click(function(){     
  11.  $(".message_body").slideUp(500)   return false; });  
  12.  //show all messages   
  13.  $(".show_all_message").click(function(){     
  14.  $(this).hide()     
  15.  $(".show_recent_only").show()     
  16.  $(".message_list li:gt(4)").slideDown()     
  17.  return false; });  
  18.  //show recent messages only   
  19.  $(".show_recent_only").click(function(){     
  20.  $(this).hide()     
  21.  $(".show_all_message").show()     
  22.  $(".message_list li:gt(4)").slideUp()     
  23.  return false; });  
  24. }); 

view demo：http://www.webdesignerwall.com/demo/jquery/collapsible-panels.html

8. 模仿WordPress後臺評論管理面板

我想你可能見過最多次這個效果是在Wordpress後臺的評論管理面板。那好，讓我們來用jQuery來模仿它的效果。為了實現背景顏色，你需要包含Color Animations這個外掛。

模仿WordPress後臺評論管理面板

First line: 向<div class="pane"> 新增 "alt" class

Second part: 當<a class="btn-delete">被點選，啟用<div class="pane">的不透明度

Third part: 當<a class="btn-unapprove">被點選， 首先讓<div class="pane">顯示黃色，然後變為白色，並新增類（addClass）"spam"

Fourth part: 當<a class="btn-approve">被點選，首先讓<div class="pane">顯示綠色，然後變為白色，並移除類（removeClass）"spam"

Fifth part: 當<a class="btn-spam">被點選，啟用背景色為red並使其opacity ="hide"

  1. //don't forget to include the Color Animations plugin//<scripttype="text/javascript"src="jquery.color.js"></script>
  2. $(document).ready(function(){  
  3.  $(".pane:even").addClass("alt");  
  4.  $(".pane .btn-delete").click(function(){     
  5.  alert("This comment will be deleted!");  
  6.    $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")     
  7.    .animate({ opacity: "hide" }, "slow")     
  8.    return false; });  
  9.  $(".pane .btn-unapprove").click(function(){     
  10.  $(this).parents(".pane").animate({ backgroundColor: "#fff568" }, "fast")     
  11.  .animate({ backgroundColor: "#ffffff" }, "slow")     
  12.  .addClass("spam")     
  13.  return false; });  
  14.  $(".pane .btn-approve").click(function(){     
  15.  $(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast")     
  16.  .animate({ backgroundColor: "#ffffff" }, "slow")     
  17.  .removeClass("spam")     
  18.  return false; });  
  19.  $(".pane .btn-spam").click(function(){     
  20.  $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")     
  21.  .animate({ opacity: "hide" }, "slow")     
  22.  return false; });  
  23. });  

view demo：http://www.webdesignerwall.com/demo/jquery/wordpress-comments.html

9. 輪換圖片展欄

如果你有一個專案需要顯示多個圖片，並且你不希望鏈向另一個頁面，那麼你可以在當前面載入目標連結的JPG。

輪換圖片展欄

首先，新增一個<em>到H2標籤。

當<p class=thumbs>內的元素被點選：

◆以可視的形式顯示href屬性的"largePath"路徑

◆以可視的形式顯示title 屬性的"largeAlt"

◆代換<img id="largeImg">的scr屬性內可視的"largePath"路徑，並代換alt屬性內可視的"largeAlt"

◆設定em內的內容(h2內) 為可視的largeAlt

  1. $(document).ready(function(){  
  2.  $("h2").append('<em></em>')  
  3.         $(".thumbs a").click(function(){  
  4.         var largePath = $(this).attr("href");     
  5.  var largeAlt = $(this).attr("title");  
  6.         $("#largeImg").attr({ src: largePath, alt: largeAlt });  
  7.         $("h2 em").html(" (" + largeAlt + ")"); return false; });  
  8. }); 

view demo：http://www.webdesignerwall.com/demo/jquery/img-replacement.html

10. 個性化不同的連結樣式

在現代化的瀏覽器中，個性化不同的連結是非常容易的事，比如想讓.pdf檔案顯示特殊的樣式，你只需要新增上簡單的CSS規則：a[href $='.pdf'] { ... }就可以實現，但不幸的是IE6並不支援這個。如果想實現這個，你可以利用jQuery。

個性化不同的連結樣式

前三行程式碼必需是連續的，它只是一個<a>的href屬性中的一個CSS class。第二部分將會獲取所有href中沒有"http://www.webdesignerwall.com" 和/或沒有"#"的< a>元素，並新增"external" class和target= "_blank"。

  1. $(document).ready(function(){  
  2.  $("a[@href$=pdf]").addClass("pdf");  
  3.  $("a[@href$=zip]").addClass("zip");  
  4.  $("a[@href$=psd]").addClass("psd");  
  5.  $("a:not([@href*=http://www.webdesignerwall.com])").not("[href^=#]")     
  6.  .addClass("external")     
  7.  .attr({ target: "_blank" });  
  8. }); 

view demo：http://www.webdesignerwall.com/demo/jquery/link-types.html

相關推薦

Web設計師值得收藏的10個jQuery特效

   先試試看？特效例項： View jQuery Demos：http://www.webdesignerwall.com/demo/jquery/ jQuery是如何工作的？ 首先，你需要下載一個jQuery版本，並將它插入到<head>標籤內。然後，你將需

高效Web開發的10個jQuery代碼片段

() 檢測 滑動 agen animate toolbar 自動添加 屬性 span 在過去的幾年中，jQuery一直是使用最為廣泛的JavaScript腳本庫。今天我們將為各位Web開發者提供10個最實用的jQuery代碼片段，有需要的開發者可以保存起來。 1、檢測In

提升 Web開發性能的 10 個技巧

例如 internet nginx 數據庫 出了 sta local 延遲 jpg 隨著網絡的高速發展，網絡性能的持續提高成為能否在蕓蕓App中脫穎而出的關鍵。高度聯結的世界意味著用戶對網絡體驗提出了更嚴苛的要求。假如你的網站不能做到快速響應，又或你的App存在延遲，用戶很

提高Java架構師和程式設計師效率的10個工具

Java受到全球百萬計開發者的追捧，已經演變為一門出色的程式語言。最終，這門語言隨著技術的變化，不斷的被改善以迎合變化的市場需求。 無論你是否擁有一家科技公司，軟體已經成為幾乎每一個企業不可或缺的一部分，為了吸引你潛在的顧客，你應該交付給客戶一個技術上有創新的產品。那麼，J

程式設計師成長的10個階段

第一階段，最初是在學校裡學習計算機基礎知識，學習經典的程式設計語言，編寫測試用的小程式。這個過程可以說是對計算機和程式設計的入門階段。這個階段主要是培養了自己對計算機軟體的興趣，打下了良好的計算機基礎知識。  第二階段，而後參加工作，從事計算機軟體開發工作。按照工作要求，一

適合Web開發人員的10個CSS程式碼生成器

轉載自：微信公眾號 qianduan1024 前端開發的同名文章 原文：http://www.hongkiat.com/blog/css-code-generator-web-apps/ 摘要：Web開發人員們總是在尋找可以幫助他們節省時間的捷徑。許多優秀的開發人員工具

編寫高效能Web 應用程式的 10 個技巧

  本文討論 • 常見 ASP.NET 效能難點 •

程式設計師程式設計的10個實用技巧

你想成為一名程式設計師，並且正在為之奮鬥，那麼你努力的方式，比如做事方法、思維習慣都將會影響你會成為怎樣的一名程式設計師。 那麼，你需要成為一個天才才能學好程式設計嗎？我覺得沒有必要。 你必須建立自己的做事方式。需要學習一些（或更多的）技巧， 我將在這裡分享一些技巧，幫你

優秀程式設計師具備的10個共同特徵？

一、前言 如果你對最新的程式語言和最新的框架有最新的瞭解——非常棒！你已經掌握了編寫優秀程式碼所需的技術技能。但是，擁有堅實的技術能力並不是唯一需要程式設計師的職業。要想脫穎而出，你需要具備做這項工作所需要的各種特質，並做好它。 二、特徵分類 以下幾個是優秀程式設計師特徵的分類:： 1、愛好和經歷都很廣泛。深

#Java、Web和移動程式設計師可以在2018年學習的10個框架

在今天的文章中，我將分享一些您可以學習的最好的框架，以提高您在移動和Web開發以及大資料技術方面的知識。 在當今世界，對各種框架的瞭解是非常重要的。它們使您可以快速開發原型和實際專案。 如果有想學習java的程式設計師，可來我們的java學習扣qun：79979，2590免費送java的視訊

前端特效demo | 值得收藏的6個 HTML5 Canvas 實用案例

一起 開發 線路 mage 降落 收藏 案例 前端 同時 HTML5 動畫在Canvas 上得到了充分的發揮，我們 VIP 視頻也分享過很多相關的動畫特效制作視頻，這次給大家帶來 6 款超炫酷的HTML5 canvas 動畫的 demo，一起來看看吧~ 文內附有

值得Web設計師收藏的20套免費圖示素材

在網站設計中，圖示是一個非常重要的元素，因為它們可以體現出很多細節，但在網站設計中，圖示設計有時候很容易被忽略。也許圖示只是一個很小的圖形元素，但它們卻在網站整體外觀設計中起到了很重要的作用。 比如，要聯絡你的使用者你可以使用社交型別的圖示，如果你想讓網站顯得更直觀，你

值得 Web 開發人員學習的20個 jQuery 例項教程

1. How to create a parallax scrolling using jQuery學習使用 jQuery 實現一個精美的視差滾動（Parallax Scrolling）幻燈片效果。線上演示     原始碼下載 2. How to make a curving

值得收藏的8個Web端組件庫

get 常用 後臺應用 上海 開發 好的 lar clas yun 值得收藏的8個Web端組件庫 Ant Design 介紹：一個服務於企業級產品的設計體系，基於『確定』和『自然』的設計價值觀和模塊化的解決方案，讓設計者專註於更好的用戶體驗。 組件庫地址：htt

@程式設計師，這四個學習建議值得收藏

在我看來，學習能力應該是一個人最重要的能力之一。因為我們賴以生存的所有技能，無一例外都是通過學習獲得的。那些優秀的人，也不過是學習能力或者學習效率比一般人強而已。 這樣的觀點被很多人論證過，商業理論家阿里·德赫斯（Arie de Geus）曾說過，“比你的競爭對手學習速度更快，可能

2015年郵件營銷人員最值得關註的10個焦點

商務 ng- 如果 gin 郵件發送 項目 mic 20px 基礎 2015年上半年，差點兒大部分歐美國家的大中小型電子商務企業以及快消品公司，他們無不關註並探討著郵件營銷領域相似的焦點話題。到底有哪些話題是郵件營銷發達國家的從業者們所重視的呢？W

10個值得深思的PHP面試題

number 進制 程序 false convert val 數字轉換 str1 long 第一個問題關於弱類型 $str1 = ‘yabadabadoo‘; $str2 = ‘yaba‘; if (strpos($str1,$str2)) { echo "/""

10個提高web前段工程師審美的網站

網址導航 青年 工程 提高 導航 學習 以及 組合 素材 對於審美，我除了可以回答你我喜歡什麽顏色，覺得什麽顏色好看之外，其他關於審美的專業知識我一竅不通。 不過對於正在學習web前端的我來說，肯定需要懂一些審美的知識，這方便於自己的工作以及和u

上海嶽城科技Web開發者必知的10個職業常識

們的 價格 在哪裏 寫文章 影響 隨著 不知道 自由職業 思路 上海嶽城科技在哪裏？眾所周知，Web開發行業的持續發展和需求的不斷變化給開發人員提出了新的要求與挑戰。就網站而言，用戶期望網站內容能更加豐富多彩、頁面更加美觀並且能提供良好的用戶體驗。如果Web開發人員一直止步

10個基於jquery的超酷動畫教程和插件推薦

acp mtp p2p http 個人 存儲 sep hbm lte 在場的幾個人，只有鬼炙的攻擊類型是暗黑魔法，這件裝備給紫韻兒的話，或許能加上一些法力值，但是絕對算得上是浪費，消亡套裝只有在鬼炙身上才能真正的體現價值！ 【亡靈水袋】（暗金器）亡靈生物用於存儲生命氣血的容