如何用原生js写出滑动下拉菜单
<style>#menu{position:relative;background:black;width:150px;height:30px;margin:200pxa...
<style>
#menu{
position:relative;
background: black;
width:150px;
height:30px;
margin:200px auto;
overflow:hidden;
}
#sc{
position:absolute;
background: #80ffff;
width:150px;
height:120px;
top:-120px;
}
</style>
<div id="menu" onmouseover="startscroll()">
<div id="sc">
</div>
</div>
<script>
var menu=document.getElementById('menu');
var sc=document.getElementById('sc');
function menuscroll(){
sc.scrollTop+=10;
}
menu.onmouseover=function(){setInterval("menuscroll", 1000);}
</script>
这是我写的代码,为什么一点反应没有,高手帮忙看看 展开
#menu{
position:relative;
background: black;
width:150px;
height:30px;
margin:200px auto;
overflow:hidden;
}
#sc{
position:absolute;
background: #80ffff;
width:150px;
height:120px;
top:-120px;
}
</style>
<div id="menu" onmouseover="startscroll()">
<div id="sc">
</div>
</div>
<script>
var menu=document.getElementById('menu');
var sc=document.getElementById('sc');
function menuscroll(){
sc.scrollTop+=10;
}
menu.onmouseover=function(){setInterval("menuscroll", 1000);}
</script>
这是我写的代码,为什么一点反应没有,高手帮忙看看 展开
1个回答
2015-08-20
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#menu {
position: relative;
background: black;
width: 150px;
height: 30px;
margin: 200px auto;
overflow: hidden;
}
#sc {
position: absolute;
background-color: #80ffff;
width: 150px;
height: 120px;
top: 0;
}
</style>
<script>
</script>
</head>
<body>
<div id="menu">
<div id="sc"></div>
</div>
<script>
var menu = document.getElementById('menu');
var sc = document.getElementById('sc');
var interval;
function menuscroll() {
var top = parseFloat(sc.style.top) || sc.scrollTop;
top += 10;
sc.style.top = top + "px";
}
menu.onmouseenter = function() {
interval = setInterval("menuscroll()", 90);
}
menu.onmouseleave = function() {
clearInterval(interval);
sc.style.top = 0;
}
</script>
</body>
</html>
追问
var top = parseFloat(sc.style.top) || sc.scrollTop; 请问这有什么用?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询