这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JavaScript 下拉菜单实例代码, 非常不错,具有参考借鉴价值,需要的朋友可以参考下
本文给大家分享一段实例代码关于 js 实现下拉菜单功能,具体代码如下所示:
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>下拉菜单</title>
- <style type="text/css">
- body,
- ul,
- li {
- margin: 0;
- padding: 0;
- font-size: 13px;
- }
- ul,
- li {
- list-style: none;
- }
- #divselect {
- width: 186px;
- margin: 80px auto;
- position: relative;
- z-index: 10000;
- }
- #divselect cite {
- width: 150px;
- height: 24px;
- line-height: 24px;
- display: block;
- color: #807a62;
- cursor: pointer;
- font-style: normal;
- padding-left: 4px;
- padding-right: 30px;
- border: 1px solid #333333;
- /*background: url(xjt.png) no-repeat right center;*/
- }
- cite:before {
- content: '';
- position: absolute;
- right: 7px;
- bottom: 7px;
- width: 0;
- height: 0;
- border-width: 4px;
- border-style: solid;
- border-color: #888 transparent transparent transparent;
- transition: all 0.2s;
- -webkit-transition: all 0.2s;
- -moz-transition: all 0.2s;
- -o-transition: all 0.2s;
- -ms-transition: all 0.2s;
- transform-origin: 50% 25%;
- -ms-transform-origin: 50% 25%;
- -moz-transform-origin: 50% 25%;
- -webkit-transform-origin: 50% 25%;
- -o-transform-origin: 50% 25%;
- }
- .extended cite:before {
- transform: rotate(180deg);
- -webkit-transform: rotate(180deg);
- -moz-transform: rotate(180deg);
- -o-transform: rotate(180deg);
- -ms-transform: rotate(180deg);
- }
- #divselect ul {
- width: 184px;
- border: 1px solid #333333;
- background-color: #ffffff;
- position: absolute;
- z-index: 20000;
- margin-top: -1px;
- display: none;
- }
- #divselect ul li {
- height: 24px;
- line-height: 24px;
- }
- #divselect ul li a {
- display: block;
- height: 24px;
- color: #333333;
- text-decoration: none;
- padding-left: 10px;
- padding-right: 10px;
- }
- .animated {
- animation-fill-mode: both;
- -webkit-animation-fill-mode: both;
- -moz-animation-fill-mode: both;
- -o-animation-fill-mode: both;
- -ms-animation-fill-mode: both;
- }
- .speed_fast {
- animation-duration: .3s;
- /*-webkit-animation-duration: 0.2s;
- -moz-animation-duration: 0.2s;
- -o-animation-duration: 0.2s;
- -ms-animation-duration: 0.2s;*/
- }
- .anim_extendDown {
- animation-name: extendDown;
- -webkit-animation-name: extendDown;
- -moz-animation-name: extendDown;
- -o-animation-name: extendDown;
- -ms-animation-name: extendDown;
- }
- @keyframes extendDown {
- 0% {
- border-bottom-color: transparent;
- height: 0;
- }
- 100% {
- border-bottom-color: #333;
- height: 120px;
- }
- }
- @-webkit-keyframes extendDown {
- 0% {
- border-bottom-color: transparent;
- height: 0;
- }
- 100% {
- border-bottom-color: #333;
- height: 120px;
- }
- }
- @-moz-keyframes extendDown {
- 0% {
- border-bottom-color: transparent;
- height: 0;
- }
- 100% {
- border-bottom-color: #333;
- height: 120px;
- }
- }
- @-o-keyframes extendDown {
- 0% {
- border-bottom-color: transparent;
- height: 0;
- }
- 100% {
- border-bottom-color: #333;
- height: 120px;
- }
- }
- @-ms-keyframes extendDown {
- 0% {
- border-bottom-color: transparent;
- height: 0;
- }
- 100% {
- border-bottom-color: #333;
- height: 120px;
- }
- }
- </style>
- </head>
- <body>
- <div id="divselect">
- <cite>请选择分类</cite>
- <ul>
- <li id="li">
- <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="1">ASP开发</a>
- </li>
- <li>
- <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="2">.NET开发</a>
- </li>
- <li>
- <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="3">PHP开发</a>
- </li>
- <li>
- <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="4">Javascript开发</a>
- </li>
- <li>
- <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="5">Java特效</a>
- </li>
- </ul>
- </div>
- <script type="text/javascript">
- window.onload = function() {
- var box = document.getElementById('divselect'),
- title = box.getElementsByTagName('cite')[0],
- menu = box.getElementsByTagName('ul')[0],
- as = box.getElementsByTagName('a'),
- index = -1;
- //初始样式
- function resetM() {
- box.className = "";
- menu.className = "";
- menu.style.display = "none";
- index = -1;
- resetA();
- }
- //清空a选项样式
- function resetA() {
- for(var i = 0; i < as.length; i++) {
- as[i].style.background = "#fff";
- }
- }
- // 点击三角时
- title.onclick = function(event) {
- //阻止事件冒泡
- event = event || window.event;
- event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
- if(box.className == "extended") {
- resetM();
- } else {
- box.className = "extended"; //给box加类名让三角旋转
- menu.className = "animated speed_fast anim_extendDown"; //下拉菜单的下拉动画
- menu.style.display = "block";
- }
- }
- document.onkeydown = function(event) {
- event = event || window.event;
- if(box.className == "extended") {
- if(event.keyCode == 38) { //向上键
- event.preventDefault ? event.preventDefault() : event.returnValue = false;
- index--;
- if(index == -1) {
- index = as.length - 1;
- }
- resetA();
- as[index].style.background = "#ccc";
- } else if(event.keyCode == 40) { //向下键
- event.preventDefault ? event.preventDefault() : event.returnValue = false;
- index++;
- if(index == as.length) {
- index = 0;
- }
- resetA();
- as[index].style.background = "#ccc";
- } else if(event.keyCode == 13) { //回车键
- event.preventDefault ? event.preventDefault() : event.returnValue = false;
- title.innerHTML = as[index].innerHTML;
- resetM();
- }
- }
- }
- // 滑过滑过、离开、点击每个选项时
- for(var i = 0; i < as.length; i++) {
- as[i].onmouseover = function() {
- resetA();
- this.style.background = "#ccc";
- index = this.getAttribute('selectid') - 1;
- }
- as[i].onclick = function() {
- resetM();
- title.innerHTML = this.innerHTML;
- }
- }
- // 点击页面空白处时
- document.onclick = function() {
- resetM();
- }
- }
- </script>
- </body>
- </html>
1、要阻止事件冒泡
2、键盘事件,用 index 索引
3、通过设置类名或清空类名的方式给元素增加动画和恢复原有样式
以上所述是小编给大家介绍的 JavaScript 下拉菜单功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0515/327188.html