先下載jquery-1。2。6。pack。js，包含到文件中

EnlargeFont-size:12pxSmall

Andy Moor – Fake Awake (Eco mix) (Anjunabeats)

Humate – Love Stimulation (Glenn Morrison & Bruce Aisher mix) (Poker Flat

EnlargeFont-size:12pxSmall

Andy Moor – Fake Awake (Eco mix) (Anjunabeats)

Humate – Love Stimulation (Glenn Morrison & Bruce Aisher mix) (Poker Flat

樣式CSS:

。

fsize{ border:1px solid #444; margin:10px; height:auto;}

。fsize div p{ line-height:1。5em; padding:10px;}

。

fsize h3{ font-size:12px; font-weight:500; height:24px; text-align:right; padding:0 10px; line-height:24px; background:#f0f0f0; display:block;}

。

fsize h3 em,

。fsize h3 strong{ font-weight:500; color:#c00; font-style:normal; cursor:pointer;}

。fsize h3 em,

。

fsize h3 span{ float:left; margin-right:6px; text-align:left;}

腳本JS:

下面是腳本：

$(document)。

ready(function(){

//字體變大 class為。fsize 的h3 下的 em 元素被點(diǎn)擊時：

$("。fsize h3")。find("em")。click(function(){

//算出h3 下面的 div 中的 p 的字號

var size=parseInt( $(this)。

parent()。next("div")。find("p")。css("font-size"),10);

//最大為22號字

if(size12)

{

size-=2;

$(this)。

prev("span")。html("Font-size:" size "px");

$(this)。parent()。next("div")。find("p")。css({"font-size":size "px"})

}else

{

//提示當(dāng)前已經(jīng)是最小

$(this)。

prev("span")。html("This is the MIN font-size already!");

}

})

//離開時仍然顯示字號

$("。

fsize")。mouseout(function(){

var size=$(this)。find("div")。find("p")。css("font-size");

$(this)。find("h3 span")。

html("Font-size:" size);

})

})。

全部

總結(jié)

以上是生活随笔為你收集整理的html控制按钮里面的文字,有谁可以告诉我web网页制作中通过三个按钮控制页面上的一段文字放? 爱问知识人...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。