자바스크립트 oop_javascript 기술을 활용한 슬라이딩 메뉴 컨트롤 개발

var $sliding = document.getElementById("silding")
var s1 = new Sliding(); .commands = $sliding.getElementsByTagName(" dt");
s1.panels = $sliding.getElementsByTagName("dd");
s1.init("mouseover", "active");

데모 코드 포인트 두 파일 Slide.js 및 Slide.html에 대한 코드

function Slider(i, panelHeight) { //dto
this.index = i;
this.panelHeight = 패널높이;
}
//class Sliding {
function Sliding(activeIndex) {
this.commands = [];
this.panels = [];
this.activeIndex = activeIndex || 0;
this.sliderCache = {};
}
Sliding.prototype = {
//绑정사건
init: function(eventName, activeCssClass) {
var _this = this;
var cmds = _this.commands;
_this.activeClass = activeCssClass;
for (var i = 0, n = cmds.length; i < n; i ) {
cmds[i]["on" eventName] = function(e) {
_this.handel( 이 e);
}
cmds[i].index = i;
if (i == _this.activeIndex) {
_this.sliderCache = new Slider(i, _this.panels[i].offsetHeight);
}
}
},
//事件处理函数
handel: function(elem, args) {
var _this = this;
var index = elem.index;
var 캐시인덱스 = _this.sliderCache.index;
var 캐시Elem = _this.commands[cacheIndex];
if (인덱스 == 캐시인덱스) return;
var showPanel = _this.panels[index];
var hidePanel = _this.panels[cacheIndex];
var h =parseInt(_this.sliderCache.panelHeight);
showPanel.style.height = "0px";
showPanel.style.display = "차단";
_this.tween(hidePanel, showPanel, h);
elem.className = _this.activeClass;
cacheElem.className = 캐시Elem.className.replace(eval("/ ?" _this.activeClass " ?/"),"");
_this.sliderCache = new Slider(index, h);
},
//动画算法
tween: function(obj0, obj1, h) {
_this =args.callee;
var 단계 = 20;
if ("v" == "v") {
단계 = 30;
}
if (h > 0) {
var h0 = obj0.offsetHeight;
var h1 = obj1.offsetHeight;
if (h < step) {
obj0.style.display = "none";
obj0.style.height = (h1 h) "px";
obj1.style.height = (h1 h) "px";
} else {
h = h - 단계;
obj0.style.height = (h0 - 단계) "px";
obj1.style.height = (h1 단계) "px";
setTimeout(function() {
_this(obj0, obj1, h)
},
50)
}
}
}
}
/ /}

상면就所有代码了这里因为是演示所以让HTML CSS尽weight的简化,另外使用jquery的 fn.slideUp fn.slideDown 实现起来䚚更容易不过我易为一个专业的开发많은 사람들이 JS에 대해 이야기하고 있습니다.