事情是这样的,我想实现一个带动画效果的下拉框,当然用JQ的slideDown()实现起来很容易,但是我在学JS,所以想用JS来实现这个功能,但是总也实现不了,萌新的我很难受。求各位大腿帮忙指点一下。
<!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 runat="server">
<title>JavaScript下拉菜单</title>
</head>
<style>
#ss {
width: 100px;
height: 100px;
position: absolute;
background: #F00;
display: none;
}
/* #aba:hover #ss{height: 300px;}*/
</style>
<body>
onmouseout 和onmouseover 全部要小写
<div id="aba" style="width:100px;height:100px;">123123123</div>
<div id="ss">dddd</div>
<script>
var obj1 = document.getElementById("aba");
var xk = document.getElementById("ss");
obj1.onmouseover = function() {
this.style.background = "#65CBFF";
xk.style.display = "block";
xk.style.transition = "all 2s";
xk.style.WebkitTransition = "all 2s";
xk.style.height = "300px";
return true;
}
obj1.onmouseout = function() {
this.style.backgroundColor = "#EEEEEE";
xk.style.display = "none";
xk.style.transition = "all 2s";
xk.style.WebkitTransition = "all 2s";
return true;
}
</script>
</body>
</html>