如何利用JavaScript来实现导航栏的示例代码分享
程序员文章站
2022-03-30 14:29:08
...
使用js实现一个简单的导航栏。利用js实现某种效果的步骤:1.实现CSS布局;2:js的实现原理;3.写CSS代码。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style> ul { padding:0px; margin:0px; list-style:none; } a { text-decoration:none; background-color:#f1f1f1; display:block; width:50px; text-align:center; } .list { display:none; } ul ul{ width:140px; border:solid #000 1px; position:absolute; } ul ul li { text-align:center; } .item { position:relative; } </style> </head> <body> <ul> <li class="item" id="item"> <a href="#" id="link">微博</a> <ul class="list" id="list"> <li>私信</li> <li>评论</li> <li>@我</li> </ul> </li> </ul></body><script> var link = document.getElementById("link"); var item = document.getElementById("item"); var list = document.getElementById("list"); item.onmouseover = show; item.onmouseout = hide; function show(){ list.style.display = "block"; link.style.background = "yellow"; } function hide(){ list.style.display = "none"; }</script></html>
js从视线中移除某个元素的方法:
(1)display:none;(不占用文档流)
(2)visibility:hidden;(隐藏某个元素,仍然占用文档流)
(3)透明度设置为0,即为opacity:0;(IE浏览器中,透明度可以这样设置 filter:alpha(opacity=0);)
(4)设置margin值,例如设置margin值为负值
(5)通过overflow:hidden;和相对定位,改变left,和top值移动元素的位置
(6)通过一个白色的p,把这个覆盖在上面的p移除。
……
js中的事件:鼠标事件,键盘事件,系统事件,表单事件,自定义事件等等。常见的鼠标事件有:onmouseover,onmouseout,onmousemove,onclick,onmounseup,mounsedown等等。函数的调用方式:事件调用,匿名调用,直接调用.
以上就是如何利用JavaScript来实现导航栏的示例代码分享的详细内容,更多请关注其它相关文章!
推荐阅读
-
分享Javascript如何实现找不同色块游戏的示例代码分享
-
JavaScript实现精美个性导航栏筋斗云效果的示例代码
-
JavaScript如何实现多级菜单效果的示例代码分享
-
分享Javascript如何实现找不同色块游戏的示例代码分享
-
Javascript如何实现StopWatch功能的示例代码分享
-
如何使用JavaScript实现选中文字提示新浪微博分享效果的示例代码分享
-
关于css如何实现背景图片不规则的导航菜单的示例代码分享
-
如何使用python来实现个性化词云的示例代码分享
-
Javascript如何实现从小到大的数组转换成二叉搜索树的示例代码分享
-
如何利用CSS实现曲面阴影效果的示例代码分享