显示隐藏的分享图标

答案：<!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/css">
.use_box_text{width:200px;height:200px;position:relative;}
.sure_box{display:none;background:#e5e5e5 url(/jscss/demoimg/201204/sure_wb.png) no-repeat;width:111px;height:84px;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="/jscss/demoimg/201204/1.png"></span>
	<div class="sure_box">
		<span class="sina"><img src="/jscss/demoimg/201204/sina.png"></span>
		<span class="tencent"><img src="/jscss/demoimg/201204/ten.png"></span>
	</div>
</div>
</body>
</html>
上一个：横向图文无缝滚动代码，全兼容
下一个：文本和图片无缝滚动代码
更多图片编程知识: