下班了~~~我把今天整理的一個(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)
疑難解答
圖片精選