html控制按钮里面的文字,有谁可以告诉我web网页制作中通过三个按钮控制页面上的一段文字放? 爱问知识人...

先下载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 元素被点击时：

$("。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

{

//提示当前已经是最小

$(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);

})

})。

全部