您的位置：首页 > Web前端 > JavaScript

js javascript 鼠标触碰select下拉列表渐变出div层,鼠标离开渐变缩回

2009-07-10 22:24 603 查看

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>黑色头发</title>
<mce:style type="text/css"><!--
body {
margin:0px;
}
#but {
position:relative;
}
#but_temp {
background:#f3f3f3;
border:1px solid #ccc;
font-size:12px;
position:absolute;
padding:10px;
overflow:hidden;
display:none;
}
--></mce:style><style type="text/css" mce_bogus="1">body {
margin:0px;
}
#but {
position:relative;
}
#but_temp {
background:#f3f3f3;
border:1px solid #ccc;
font-size:12px;
position:absolute;
padding:10px;
overflow:hidden;
display:none;
}</style>
</head>
<body>
<table width='100%'>
<tr>
<td width='200'> </td><td><img src="http://images.51job.com/im/images/select.gif" mce_src="http://images.51job.com/im/images/select.gif" id='but' /></td>
</tr>
</table>
<div id='but_temp'><a href="http://heisetoufa.javaeye.com" mce_href="http://heisetoufa.javaeye.com">黑色头发</a><img src="http://hao123.com/logox3.gif" mce_src="http://hao123.com/logox3.gif" /></div>
<mce:script type="text/javascript"><!--
function $(o){
return document.getElementById(o);
}
var IsStop = false;
var s;
function Show(o){
var ow = parseInt($(o).style.width);
var oh = parseInt($(o).style.height);
if(ow < 200 && IsStop){
$(o).style.width = ow + 5 + "px";
$(o).style.height = oh + 2 + "px";
}
if(ow > 0 && !IsStop){
$(o).style.width = ow - 5 + "px";
$(o).style.height = oh - 2 + "px";
if(ow == 5){
$(o).style.display = 'none';
}
}
if(ow >= 0 && ow <= 200){
s = setTimeout("Show('" + o + "')", 1);
}
}
function getDefaultStyle(o, a){
return o.currentStyle ? o.currentStyle[a] : document.defaultView.getComputedStyle(o, false)[a];
}
$('but').onmouseover = function(){
with($('but_temp').style){
width = '0';
height = '0';
top = this.offsetTop + this.offsetHeight + 'px';
right = document.documentElement.clientWidth - this.offsetLeft - this.offsetWidth + 'px';
display = 'block';
}
IsStop = true;
s && clearTimeout(s);
Show('but_temp');
this.onmouseout = $('but_temp').onmouseout = function(e){
var e = window.event || e;
var s = e.toElement || e.relatedTarget;
if(s != $('but_temp') && s.parentNode != $('but_temp')){
IsStop = false;
}
}
}
// --></mce:script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航