这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
百叶窗下拉菜单效果非常棒,今天小编给大家分享一段 js 代码实现类似百叶窗下拉菜单效果,需要的朋友参考下
废话不多说了,直接给大家贴代码了,具体代码如下所示:
- function leftmove() {
- var oLeft_ul = document.getElementById('left_ul');
- var aLeft_li = oLeft_ul.children; //获得左侧ul下的第一个子集li
- var aleft_ul_hidden = oLeft_ul.getElementsByTagName('ul');
- var aleft_span_hidden = oLeft_ul.getElementsByTagName('span');
- var arr = [];
- var span_arr = [];
- getclassname(aleft_ul_hidden, 'cl_hidden', arr) getclassname(aleft_span_hidden, 'sj', span_arr);
- for (var i = 0; i < aLeft_li.length; i++) {
- aLeft_li[i].index = i;
- aLeft_li[i].onmouseenter = function() {
- for (var j = 0; j < aLeft_li.length; j++) {
- move(aLeft_li[j], {
- height: 40
- });
- span_arr[j].style.borderColor = '#f2f2f2 #f2f2f2 #f2f2f2 #666';
- span_arr[j].style.top = '13px';
- span_arr[j].style.left = '8px';
- }
- var ul_height = arr[this.index].children.length * 40 move(aLeft_li[this.index], {
- height: 40 + ul_height
- });
- span_arr[this.index].style.borderColor = '#666 #0ad #0ad #0ad';
- span_arr[this.index].style.top = '17px';
- span_arr[this.index].style.left = '6px';
- };
- aLeft_li[i].onmouseleave = function() {
- for (var j = 0; j < aLeft_li.length; j++) {
- move(aLeft_li[j], {
- height: 40
- });
- span_arr[j].style.borderColor = '#f2f2f2 #f2f2f2 #f2f2f2 #666';
- span_arr[j].style.top = '13px';
- span_arr[j].style.left = '8px';
- }
- };
- arr[i].onmouseover = function() {
- for (var i = 0; i < arr.length; i++) {
- span_arr[i].style.borderColor = '#f2f2f2 #f2f2f2 #f2f2f2 #666';
- span_arr[i].style.top = '13px';
- span_arr[i].style.left = '8px';
- }
- span_arr[this.parentNode.index].style.borderColor = '#666 #f2f2f2 #f2f2f2 #f2f2f2';
- span_arr[this.parentNode.index].style.top = '17px';
- span_arr[this.parentNode.index].style.left = '6px';
- };
- arr[i].onmouseout = function() {
- for (var i = 0; i < arr.length; i++) {
- span_arr[i].style.borderColor = '#f2f2f2 #f2f2f2 #f2f2f2 #666';
- span_arr[i].style.top = '13px';
- span_arr[i].style.left = '8px';
- }
- span_arr[this.parentNode.index].style.borderColor = '#666 #0ad #0ad #0ad';
- span_arr[this.parentNode.index].style.top = '17px';
- span_arr[this.parentNode.index].style.left = '6px';
- };
- }
- }
- leftmove();
来源: http://www.phperz.com/article/17/0619/328978.html