项目开发中有一个页面元素较多,为了使页面更简洁决定对其中一些元素进行隐藏,鼠标划过的时候才显示出来,于是就有了这篇文章。
实现这个效果的几个主要元素是:onmouseover、onmouseout、opacity,简言之就是捕捉鼠标的over事件和out事件,并设置目标元素的透明度opacity,示例代码如下:
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function mouseOver() {
var overlay = document.getElementById('seldiv');
startrun(overlay, "opacity", 100.0);
}
function mouseOut() {
var overlay = document.getElementById('seldiv');
startrun(overlay, "opacity", 0.0);
}
function startrun(obj, attr, target, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var cur = 0;
if (attr == "opacity") {
cur = Math.round(parseFloat(getstyle(obj, attr)) * 100);
} else {
cur = parseInt(getstyle(obj, attr));
}
var speed = (target - cur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur == target) {
clearInterval(obj.timer);
if (fn) {
fn();
}
} else {
if (attr == "opacity") {
obj.style.filter = "alpha(opacity=" + (cur + speed) + ")";
obj.style.opacity = (cur + speed) / 100;
} else {
obj.style[attr] = cur + speed + "px";
}
}
}, 30);
}
function getstyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="seldiv" style="width: 700px; position: absolute; margin-left: 50px; opacity: 0;">
<dl id="overlay" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" style="text-align:center">
<ul class="inline">
<li style="padding-left:3px;padding-right:2px;">variable</li>
<li style="padding-left:3px;padding-right:2px;">patrol</li>
<li style="padding-left:3px;padding-right:2px;">inventory</li>
<li style="padding-left:3px;padding-right:2px;">compete</li>
<li style="padding-left:3px;padding-right:2px;">vehicle</li>
</ul>
</dl>
</div>
</form>
</body>