———————- android培訓、java培訓、期待與您交流! ———————-
跟大傢推薦我自學期間收集的各種絕好視頻:
風靡騰訊網絡的Java+3G開發全套視頻教程
屌絲們,最愛的.NET全套視頻項目教程
史上一直被模仿10多年的PHP元老全套視頻教程
javascript中動態改變頁面字體大小:
<title>動態改變字體大小</title>
<style type="text/css">
.max{
width:500px;
background-color:#00FF66;
font-size:36px;
color:#330099;
}
.normal{
width:500px;
background-color:#FF9933;
color:#FF0000;
font-size:24px;
}
.min{
width:500px;
color:#FFFF00;
background-color:#FF00CC;
font-size:16px;
}
</style>
<script type="text/javascript">
function changeSize(className){
var node=document.getElementById("pid");
node.className=className;
}
</script>
</head>
<body>
<h2>新聞標題</h2><br/>
<a href="javascript:void(0)" onClick="changeSize('max')">大</a>
<a href="javascript:void(0)" onClick="changeSize('normal')">中</a>
<a href="javascript:void(0)" onClick="changeSize('min')">小</a><br/>//雙引號中間一定得用單引號
<p id="pid" class="normal">
惡化服務費和違法後位富翁復合物i惡風<br/>
惡化服務費和違法後位富翁復合物i惡風<br/>
惡化服務費和違法後位富翁復合物i惡風<br/>
惡化服務費和違法後位富翁復合物i惡風<br/>
惡化服務費和違法後位富翁復合物i惡風<br/>
惡化服務費和違法後位富翁復合物i惡風<br/>
惡化服務費和違法後位富翁復合物i惡風<br/>
惡化服務費和違法後位富翁復合物i惡風<br/>
</p>
</body>
</html>
javascript模仿QQ聯系人列表效果:
註:實現可多級展開效果:strecthClose( );實現隻能打開一個列表的效果:listOnlyOne( )
<title>js模仿QQ列表效果</title>
<style type="text/css">
table{
border:1px #00FF66 solid;
}
table td{
border:1px solid #FF9933;
}
a:link,a:visited{
text-decoration:none;
color:#CC33CC;
}
.open{
display:block;
}
.close{
display:none;
}
</style>
<script type="text/javascript">
function strecthClose(aNode){
var tdNode=aNode.parentNode;
var pNode=tdNode.getElementsByTagName("p")[0];
if(pNode.className=="open")
pNode.className="close";
else
pNode.className="open";
}
function listOnlyOne(aNode)
{
var tdNode=aNode.parentNode;
var pNode=tdNode.getElementsByTagName("p")[0];
var pNodes=document.getElementsByTagName("p");
for(var x=0;x<pNodes.length;x++){
if(pNodes[x]==pNode){
if(pNode.className=="open")
pNode.className="close";
else
pNode.className="open";
}
else
pNodes[x].className="close";
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" onclick="listOnlyOne(this)">好友列表</a>
<p class="close">
水電費過水電費</br>
水電費過水電費</br>
水電費過水電費</br>
水電費過水電費</br>
水電費過水電費</br>
</p>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="listOnlyOne(this)">好友列表</a>
<p class="close">
水電費過水電費</br>
水電費過水電費</br>
水電費過水電費</br>
水電費過水電費</br>
水電費過水電費</br>
</p>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="listOnlyOne(this)">好友列表</a>
<p class="close">
水電費過水電費</br>
水電費過水電費</br>
水電費過水電費</br>
水電費過水電費</br>
水電費過水電費</br>
</p>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="listOnlyOne(this)">好友列表</a>
<p class="close">
水電費過水電費</br>
水電費過水電費</br>
水電費過水電費</br>
水電費過水電費</br>
水電費過水電費</br>
</p>
</td>
</tr>
</table>
</body>
</html>