本文介绍了一种使用JavaScript实现的DIV动态效果案例。通过监听鼠标悬停事件改变DIV的底部位置，展示了基本的网页交互设计。
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
onload=function(){
var getDiv = document.getElementById("div1");
getDiv.onmouseover = function(){
this.style.pixelBottom==0?this.style.pixelBottom=280:this.style.pixelBottom=0;
}
}
</script>
<style type="text/css">
div{border:solid 1px Red;}
#div0{width:200px; margin:auto; height:300px;position:relative}
.div1{position:absolute;bottom:100px;width:198px; background:Red;}
</style>
</head>
<body>
<div id="div0">
<div id="div1" class="div1">
aaaaaaaaaaaaaaa
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
