下班了~~~我把今天整理的一個(gè)jquery小特效發(fā)一下，個(gè)人覺得比較簡(jiǎn)單，嗖嗖的就寫出來了~~~
下面先來看最終的動(dòng)態(tài)效果：
一、來看一下主體框架程序：
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>點(diǎn)擊查看全文</title> <link type="text/CSS" rel="stylesheet" href="css/layout.css" /> <script type="text/javascript" src="js/jquery-1.11.3.js"></script> <script type="text/Javascript" src="js/layout.js"></script> </head> <body> <div class="showAll"> <p class="title"> 一則勵(lì)志故事 </p> <p class="author"> 作者：來自網(wǎng)絡(luò) 發(fā)表時(shí)間：2014-3-1 </p> <p> 彼得·韓德先生現(xiàn)任卡內(nèi)基公司 (Dale Carnegie & Associates) 總裁及首席執(zhí)行官。卡內(nèi)基公司為訓(xùn)練界中的翹楚,在全世界85個(gè)國(guó)家有160個(gè)分支機(jī)構(gòu)。 除此之外，彼得先生還是數(shù)家大公司的董事，作為一個(gè)培訓(xùn)別人怎樣獲得成功的專業(yè)機(jī)構(gòu)的總裁，他是怎樣獲得成功的呢？日前，記者在北京的東方君悅大酒店采訪了 這位CEO，聽他講述了自己是怎樣獲得成功的故事。 彼得先生通過一個(gè)故事講了他對(duì)成功的理解。他說他在五歲時(shí)因?yàn)樯∪タ瘁t(yī)生，當(dāng)時(shí)病痛... <a class="showContent" href="javascript:void(0);">查看全文</a> </p> <div class="content"> 彼得·韓德先生現(xiàn)任卡內(nèi)基公司 (Dale Carnegie & Associates) 總裁及首席執(zhí)行官。卡內(nèi)基公司為訓(xùn)練界中的翹楚,在全世界85個(gè)國(guó)家有160個(gè)分支機(jī)構(gòu)。 除此之外，彼得先生還是數(shù)家大公司的董事，作為一個(gè)培訓(xùn)別人怎樣獲得成功的專業(yè)機(jī)構(gòu)的總裁，他是怎樣獲得成功的呢？日前，記者在北京的東方君悅大酒店采訪了 這位CEO，聽他講述了自己是怎樣獲得成功的故事。 彼得先生通過一個(gè)故事講了他對(duì)成功的理解。他說他在五歲時(shí)因?yàn)樯∪タ瘁t(yī)生，當(dāng)時(shí)病痛使他很難受，醫(yī)生當(dāng)時(shí)問他，你最想要的是什么，彼得先生對(duì)醫(yī)生說，我想 要快樂，醫(yī)生說，那你快樂就是了，結(jié)果他真的很快樂。所以彼得先生說，有許多人想追求成功，也有許多人問他，怎樣才能盡快地獲得成功。他認(rèn)為，這要先看你對(duì) 成功的定義是什么？你的成功定義若是家庭和諧，那你就應(yīng)想辦法跟家庭成員更多地溝通，為此付出更多的時(shí)間，并在提升家庭成員的和諧之中也提升自己處理家庭問 題的能力。 彼得先生說：“我對(duì)成功的定義是快樂，我不會(huì)做我不喜歡的事和不喜歡的工作。中國(guó)的一句俗語(yǔ)說‘人在屋檐下，不得不低頭’，我不喜歡那樣的境況，我也不會(huì)那樣 做。由于我認(rèn)為快樂就是成功，所以說，我在5歲時(shí)就已經(jīng)很成功了。” <a class="hideContent" href="javascript:void(0);">收起全文</a> </div> </div> </body></html>
上面程序布局需要注意的是名字為“content”的div里面的內(nèi)容需要與省略號(hào)“. . .”以前的文字保持一致，也就是重復(fù)一段文字。
原因是：因?yàn)槭÷蕴?hào)“. . .”以前的文字會(huì)在點(diǎn)擊“查看全文”按鈕的時(shí)候隱藏，如果不隱藏省略號(hào)“. . .”之前的文字的話，它會(huì)在點(diǎn)擊“查看全文”按鈕后“. . .”不消失，這樣文章就不能順利閱讀了~~~~
二、下面來看看樣式：
*{ padding: 0; margin: 0;}.showAll{ width: 60%; margin: 0 auto; background: #ecebeb; padding: 10px;}.showAll .title{ font-size: 20px; font-weight: bold; color:#af0015;}.showAll .author{ color: #a1a1a1; margin: 12px 0;}.showAll .content{ display: none; //注意這里讓文字不顯示}上面需要注意的是需要給名字為“content”的div隱藏，這樣點(diǎn)擊“查看全文”按鈕后才可以觸發(fā)顯示事件。
三、Jquery程序：
$(document).ready(function(){ $(".showContent").click(function(){ //當(dāng)“展開全文”按鈕點(diǎn)擊的時(shí)候 $(".content").show(); //展示未完全顯示的那部分內(nèi)容 $(this).parent().hide(); //此處需要注意隱藏簡(jiǎn)略說明的文字，因?yàn)樵瓉砦淖掷锩孀詈笥惺÷蕴?hào)，不隱藏的后果就是展開后省略號(hào)仍舊在那里 }); $(".hideContent").click(function(){ //當(dāng)“收起全文”按鈕點(diǎn)擊的時(shí)候 $(this).parent().hide(); //隱藏已經(jīng)顯示出來的文字 $(".showContent").parent().show(); //將簡(jiǎn)略說明的文字顯示出來 });});看了上面一段代碼我笑了，真是太簡(jiǎn)單了~~~~覺得貼到博客園讓大神看見了一定會(huì)嘲笑我O(∩_∩)O~~~，本人有個(gè)毛病，特別愛寫注釋，方便以后看~~~~
不要給我說你看不懂，要不然我都會(huì)鄙視你，我把注釋寫的那么清楚，小白都能看懂~~~~
新聞熱點(diǎn)
疑難解答
圖片精選
