显示隐藏分享图标，鼠标放上后显示图标，移开后隐藏图标_图片特效

显示隐藏分享图标，鼠标放上后显示图标，移开后隐藏图标: 发布时间：2019-09-08编辑：脚本学堂

显示隐藏分享图标，鼠标放上后显示图标，移开后隐藏图标。

<!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(/source/images/201207/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/<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>">
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="/source/images/201207/index1.png"></span>
	<div class="sure_box">
		<span class="sina"><img src="/source/images/201207/sina.png"></span>
		<span class="tencent"><img src="/source/images/201207/ten.png"></span>
	</div>
</div>
</body>
</html>

提示：可修改代码后再运行!

上一篇：jQuery与css实现的个性的图片幻灯片特效代码
下一篇：JavaScript实现的图片无缝滚动

与显示隐藏分享图标，鼠标放上后显示图标，移开后隐藏图标有关的文章

本文标题：显示隐藏分享图标，鼠标放上后显示图标，移开后隐藏图标
本页链接：http://www.jb200.com/tx/126.html

浏览排行

栏目分类

热点文章

显示隐藏分享图标，鼠标放上后显示图标，移开后隐藏图标