자바스크립트 모방 QQ 슬라이딩 메뉴 효과 code_javascript 기술

【程序源码】

复代码 代码如下:

var QQ = function() {
// 공공용函数
function T$(id) { return document.getElementById(id); }
function T$$(root, tag) { return (root || document).getElementsByTagName(tag); }
함수 $extend(des, src) { for(var p in src) { des[p] = src[p]; } 반환 des; }
function $each(arr, callback, thisp) {
if (arr.forEach) {arr.forEach(callback, thisp);}
else { for (var i = 0, len = arr .length; i }
function currentStyle(elem, style) {
return elem.currentStyle | | document.defaultView.getCompulatedStyle(elem, null);
}
// 缓动类
var Tween = {
Quart: {
easeOut: function(t,b,c,d){
return -c * (( t=t/d-1)*t*t*t - 1) b;
}
},
뒤로: {
easeOut: function(t,b,c,d,s){
if (s == 정의되지 않음) s = 1.70158;
return c*((t=t/d-1)*t*((s 1)*t s) 1) b;
}
},
바운스: {
easeOut: function(t,b,c,d){
if ((t/=d) return c*(7.5625*t*t) b;
} else if (t return c*(7.5625*(t-=(1.5/2.75))*t .75) b;
} else if (t return c*(7.5625*(t-=(2.25/2.75))*t .9375) b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t .984375) b;
}
}
}
}

// 主类构造函数
var scrollTrans = function(cid, sid, count, config) {
var self = 이;
if (!(scrollTrans의 자체 인스턴스)) {
새 scrollTrans(cid, sid, count, config)를 반환합니다.
}
self.container = T$(cid);
self.scroller = T$(sid);
if (!(self.container || self.scroller)) {
return;
}
self.config = $extend(defaultConfig, config || {});
self.index = 0;
self.timer = null;
self.count = 개수;
self.step = self.scroller.offsetWidth / 개수;
};

// 默认配置
var defaultConfig = {
trigger: 1, // 触发方式1:click other: mouseover
auto: true, // 是否自动切换
tween : Tween.Quart.easeOut, // 默认缓动类
시간: 10, // 滑动延时
기간: 50, // 切换时间
일시 중지: 3000, // 停顿时间
start: function() {}, // 切换开始执行函数
end: function() {} // 切换结束执行函数
};

scrollTrans.prototype = {
생성자: scrollTrans,
변형: function(index) {
var self = this;
index == 정의되지 않음 && (index = self.index);
색인 = self.count && (색인 = 0);
self.time = 0;
self.target = -Math.abs(self.step) * (self.index = 인덱스);
self.begin = parsInt(currentStyle(self.scroller)['left']);
self.change = self.target - self.begin;
self.duration = self.config.duration;
self.start();
self.run();
},

run: function() {
var self = this;
clearTimeout(self.timer);
if (self.change && self.time self.moveTo(Math.round(self.config.tween(self.time , self.begin, self.change, self. 지속)));
self.timer = setTimeout(function() {self.run()}, self.config.Time);
} else {
self.moveTo(self.target);
self.config.auto && (self.timer = setTimeout(function() {self.next()}, self.config.pause));
}
},

moveTo: function(i) {
this.scroller.style.left = i 'px';
},

다음: function() {
this.transform( this.index);
}
};

return {
scroll: function(cid, sid, count, config) {
window.onload = function() {
var frag = document.createDocumentFragment(),
숫자 = [];
for (var i = 0; i var li = document.createElement('li');
(nums[i] = frag.appendChild(document.createElement('li'))).innerHTML = i 1;
}
T$('페이지').appendChild(frag);

// 调사용주类
var st = scrollTrans(cid, sid, count, config);
$each(nums, function(o, i) {
o[st.config.trigger == 1 ? 'onclick' : 'onmouseover'] = function() { o.className = 'on'; st.transform(i); }
o.onmouseout = function() { o.className = ''; st.transform();}
});
st.start = function() {
$each(nums, function(o, i) {
o.className = st.index == i ? 'on' : '';
});
};
st.transform();
}
}
}
}();

QQ.scroll('컨테이너', '스크롤러', 5, {트리거: 0});

【参数说明】

复代码 代码如下:

var defaultConfig = {
trigger: 1, // 트리거 방법 1: click Rest: mouseover
auto: true, // 자동 전환 여부
tween: Tween.Quart.easeOut , //기본 여유 클래스
시간: 10, //슬라이딩 지연
기간: 50, //전환 시간
일시 중지: 3000, //일시 중지 시간
시작: function() {} , // 실행 시작 함수로 전환
end: function() {} // 실행 종료 함수로 전환

【사용법】

코드 복사 코드는 다음과 같습니다.

QQ.scroll('container' /*외부 컨테이너 ID*/, 'scroller' /*슬라이딩 컨테이너 ID*/, 5/*사진 전환 수*/, {trigger: 0} /*기본 구성*/)

[소스 코드 다운로드]

슬라이더