第十五篇 JS 移入移出事件 模拟一个二级菜单
来源:互联网 发布:个人在淘宝卖食品 编辑:程序博客网 时间:2024/05/09 22:02
JS 移入移出事件 模拟一个二级菜单
老师演示一个特别简单二级菜单,同学们除了学习JS,还要注意它的元素和CSS样式。
这节课介绍的是JS鼠标移入、移出事件:onmouseover是移入事件,onmouseout是移出事件。当然还有其他的事件效果,这里就先不说明了。
先直接上一段代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>二级菜单,鼠标移出和移入事件</title>
<style>
ul li{
/*取消 li前面的黑点*/
list-style:none;
}
#er{
/*让二级ul移动到 一级ul下面去*/
margin:5px 0 0 -40px;
/*因为做二级菜单效果,它先是隐藏的*/
display: none;
}
</style>
</head>
<body>
<div onclick="dianji()">点击我</div>
<ul onmouseover="yiru()" onmouseout="yichu()">
<li>我的</li>
<li>
<ul id="er">
<li>个人资料</li>
<li>密码安全</li>
</ul>
</li>
</ul>
<br/><br/><br/><br/>
<p>那么onclick是点击事件,我们还有鼠标移入事件和移出事件</p>
<p>onmouseout是移出事件,onmouseover是移入事件</p>
<p>移入事件,鼠标移动到某个元素上,这个元素触发onmouseover事件</p>
<p>我们在第一个ul里给出移入事件和移出事件,再到JS里去写函数</p>
<p>注意:<br/>ul是块级元素,是整行的,同学们可以自己加个背景颜色看效果<br/>
显示出来的二级ul也是块级元素,它会占用自己的位置而影响之后的元素</p>
<script>
function dianji(){
//这里简单测试一下 onclick点击事件
alert('嗨,同学们好!');
}
//function关键字 定义 函数 yiru()
function yiru(){
var erji = document.getElementById("er");
//找到二级ul的ID,然后修改它的样式,就可以显示出来了
erji.style.display="block";
}
//那么移出事件是同一个意思,就是反过来即可
function yichu(){
var erji = document.getElementById("er");
//找到二级ul的ID,然后修改它的样式,就可以显示出来了
erji.style.display="none";
}
</script>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>二级菜单,鼠标移出和移入事件</title>
<style>
ul li{
/*取消 li前面的黑点*/
list-style:none;
}
#er{
/*让二级ul移动到 一级ul下面去*/
margin:5px 0 0 -40px;
/*因为做二级菜单效果,它先是隐藏的*/
display: none;
}
</style>
</head>
<body>
<div onclick="dianji()">点击我</div>
<ul onmouseover="yiru()" onmouseout="yichu()">
<li>我的</li>
<li>
<ul id="er">
<li>个人资料</li>
<li>密码安全</li>
</ul>
</li>
</ul>
<br/><br/><br/><br/>
<p>那么onclick是点击事件,我们还有鼠标移入事件和移出事件</p>
<p>onmouseout是移出事件,onmouseover是移入事件</p>
<p>移入事件,鼠标移动到某个元素上,这个元素触发onmouseover事件</p>
<p>我们在第一个ul里给出移入事件和移出事件,再到JS里去写函数</p>
<p>注意:<br/>ul是块级元素,是整行的,同学们可以自己加个背景颜色看效果<br/>
显示出来的二级ul也是块级元素,它会占用自己的位置而影响之后的元素</p>
<script>
function dianji(){
//这里简单测试一下 onclick点击事件
alert('嗨,同学们好!');
}
//function关键字 定义 函数 yiru()
function yiru(){
var erji = document.getElementById("er");
//找到二级ul的ID,然后修改它的样式,就可以显示出来了
erji.style.display="block";
}
//那么移出事件是同一个意思,就是反过来即可
function yichu(){
var erji = document.getElementById("er");
//找到二级ul的ID,然后修改它的样式,就可以显示出来了
erji.style.display="none";
}
</script>
</body>
</html>
二级ul显示之后,会影响之后的元素比如这里的p元素,那这样做的话,会导致页面乱掉的,用户体验不够友好,所以我们可以在css里面加样式,比如定位咯!
阅读全文
0 0
- 第十五篇 JS 移入移出事件 模拟一个二级菜单
- JS鼠标移入,移出事件
- js鼠标移入移出事件样例
- JS之鼠标移入移出事件2
- 鼠标移入移出事件
- 鼠标移入移出事件
- 鼠标移入显示一个菜单列表 移出隐藏
- MFC鼠标移入移出事件
- 鼠标的移入移出事件
- jQuery的移入移出事件
- 菜单鼠标移入移出切换图片
- Jquery 下拉菜单移入移出特效
- 初学JS值之用JS实现鼠标移入移出事件
- 鼠标移入移出事件图片更换
- Qt的鼠标移入移出事件
- jQuery 鼠标移入移出事件切换
- 鼠标事件移入移出的比较
- jQuery的鼠标移入与移出事件
- Day-6- 函数式编程
- 高通android 7.0短信发送流程
- 一直显示文件夹正在使用中然而我没有打开文件夹
- DDMS 打不开"Provide the path to Android SDK "
- Hibernate关联关系配置(一对多、一对一和多对多)
- 第十五篇 JS 移入移出事件 模拟一个二级菜单
- bzoj 4557: [JLoi2016]侦察守卫
- 8. String to Integer (atoi)
- 智能硬件产品的测试经验总结
- 关于IDEA开发工具,WEB 项目编译后的class文件存放的地方!
- Lua ——函数
- DataTable添加列和行的三种方法
- table tr th td 去除默认的边距,间距方法
- nodejs基础: 如何升级Noejs版本