JS字随鼠标移动,伸缩菜单

最新推荐文章于 2021-05-30 20:21:04 发布

冰雪巅峰

最新推荐文章于 2021-05-30 20:21:04 发布

阅读量98

点赞数

文章标签： javascript ViewUI

字随鼠标移动

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.d1{
position: absolute;
left: 30px;
top: 20px;
}
</style>
</head>
<body>
<font color="red" class="d1" id="d1">hello</font>
<script type="text/javascript">
var d1_node=document.getElementById("d1");
document.οnmοusemοve=function(e){
var e=e?e:window.event;
d1_node.style.left=e.clientX;
d1_node.style.top=e.clientY;
}
</script>
</body>
</html>

伸缩菜单：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
li{ list-style:none}
ul li ul{display:none;}
.view{display:block;}
.noview{display:none;}
</style>
</head>
<body οnlοad="demo()">
<ul id="d1">
<li>
<a href="#">一级菜单01</a>
<ul>
<li>一级菜单01_1</li>
<li>一级菜单01_2</li>
</ul>
</li>
<li><a href="#">一级菜单02</a></li>
<ul>
<li>一级菜单02_1</li>
<li>一级菜单02_2</li>
</ul>
<li>
<a href="#">一级菜单03</a>
<ul>
<li>一级菜单03_1</li>
<li>一级菜单03_2</li>
</ul>
</li>
</ul>
<script type="text/javascript">
function demo(){
var ul_n=document.getElementById("d1");
var ul_chs=ul_n.childNodes;
for(var i=0;i<ul_chs.length;i++)
{
if(ul_chs[i].tagName=="LI")
{
ul_chs[i].οnclick=change;
}
}
}
function change(){
li_chs=this.childNodes;
for(var i=0;i<li_chs.length;i++){
if(li_chs[i].tagName=="UL")
{
if(li_chs[i].className=="view")
{
li_chs[i].className="noview"
}
else{
li_chs[i].className="view"
}
}
}
}
</script>
</body>
</html>