黑马程序员__javascript重点实用实例!
---------------------- 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("divid");
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/>//双引号中间一定得用单引号
<div id="divid" class="normal">
恶化服务费和违法后位富翁复合物i恶风<br/>
恶化服务费和违法后位富翁复合物i恶风<br/>
恶化服务费和违法后位富翁复合物i恶风<br/>
恶化服务费和违法后位富翁复合物i恶风<br/>
恶化服务费和违法后位富翁复合物i恶风<br/>
恶化服务费和违法后位富翁复合物i恶风<br/>
恶化服务费和违法后位富翁复合物i恶风<br/>
恶化服务费和违法后位富翁复合物i恶风<br/>
</div>
</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 divNode=tdNode.getElementsByTagName("div")[0];
if(divNode.className=="open")
divNode.className="close";
else
divNode.className="open";
}
function listOnlyOne(aNode)
{
var tdNode=aNode.parentNode;
var divNode=tdNode.getElementsByTagName("div")[0];
var divNodes=document.getElementsByTagName("div");
for(var x=0;x<divNodes.length;x++){
if(divNodes[x]==divNode){
if(divNode.className=="open")
divNode.className="close";
else
divNode.className="open";
}
else
divNodes[x].className="close";
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" onclick="listOnlyOne(this)">好友列表</a>
<div class="close">
水电费过水电费</br>
水电费过水电费</br>
水电费过水电费</br>
水电费过水电费</br>
水电费过水电费</br>
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="listOnlyOne(this)">好友列表</a>
<div class="close">
水电费过水电费</br>
水电费过水电费</br>
水电费过水电费</br>
水电费过水电费</br>
水电费过水电费</br>
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="listOnlyOne(this)">好友列表</a>
<div class="close">
水电费过水电费</br>
水电费过水电费</br>
水电费过水电费</br>
水电费过水电费</br>
水电费过水电费</br>
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="listOnlyOne(this)">好友列表</a>
<div class="close">
水电费过水电费</br>
水电费过水电费</br>
水电费过水电费</br>
水电费过水电费</br>
水电费过水电费</br>
</div>
</td>
</tr>
</table>
</body>
</html>
跟大家推荐我自学期间收集的各种绝好视频：
风靡腾讯网络的Java+3G开发全套视频教程
丝们，最爱的.NET全套视频项目教程
史上一直被模仿10多年的PHP元老全套视频教程
---------------------- android培训、java培训、期待与您交流！ ----------------------详细请查看：http://edu.csdn.net/heima