js控制div显示隐藏效果

时间：2012-05-02 编辑：简简单单来源：一聚教程网

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>显示隐藏效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
.use_box_text{position:relative;}
.sure_box{display:none;background:#e5e5e5 url(/images/20124/262130/sure_wb.png) no-repeat;position:absolute;bottom:35px;left:55px;}
.sure {position:absolute;bottom:10px;left:100px;cursor:pointer;background:#F00;}
.sure_box span{position:absolute;bottom:20px;}
.sure_box .sina{left:20px;}
.sure_box .tencent{right:20px;}
</style>
<script  type="text/javascript">
function getByClass(oParent,sClass)
{
	var aEle = oParent.getElementsByTagName('*');
	var aResult = [];
	var re = new RegExp('b'+sClass+'b','i');
	for(var i = 0; i<aEle.length;i++)
	{
		if(re.test(aEle[i].className))
		{
			aResult.push(aEle[i]);
		}
	}
	return aResult;
}
var timer = null;
window.onload = function()
{
	var oSure = getByClass(document,'sure')[0];
	var oSureBox = getByClass(document,'sure_box')[0];
	oSure.onmouseover = oSureBox.onmouseover = disBlock;
	oSure.onmouseout = function()
	{
		oSureBox.style.display='block';
		timer = setTimeout(function()
		{
			oSureBox.style.display='none';
		},300);
	}
	oSureBox.onmouseout = function()
	{
		oSureBox.style.display='none';
		timer = setTimeout(function()
		{
			oSureBox.style.display='none';
		},300);
	}
	function disBlock()
	{
		clearTimeout(timer);
		oSureBox.style.display='block';
	}
}
</script>
</head>
<body>

<div class="use_box_text">
	<span class="sure"><img  src="https://img.111com.net/get_pic/2012/05/02/2012050201022055.png"></span>
	<div class="sure_box">
		<span class="sina"><img  src="https://img.111com.net/get_pic/2012/05/02/20120502010226852.png"></span>
		<span class="tencent"><img  src="https://img.111com.net/get_pic/2012/05/02/20120502010232775.png"></span>
	</div>
</div>
</body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

上一个：仿Windows XP开机滚动条页面加载效果
下一个： js 相互竖向切换展示的窗口代码

推荐专题

最新下载

热门教程

js控制div显示隐藏效果

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程