JavaScript 模倣 QQ スライド メニュー効果コード_JavaScript スキル

【程序源码】

复制代码代码如下:

var QQ = function() {
// パブリック関数数
function T$(id) { return document.getElementById(id); }
function T$$(root, tag) { return (root || document).getElementsByTagName(tag); }
function $extend(des, src) { for(var p in src) { des[p] = src[p];戻り値; }
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.getComputedStyle(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;
}
}
}
}

// 主类构造関数
varscrollTrans = function(cid, sid, count, config) {
var self = これ;
if (!(selfinstanceofscrollTrans)) {
return newscrollTrans(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 / count;
};

// 默认構成
vardefaultConfig = {
trigger: 1, // 触発方式 1:click other: Mouseover
auto: true, // 否か自動切换
tween : Tween.Quart.easeOut, // 默认缓动类
Time: 10, // 滑動延長時間
duration: 50, // 切换時間间
pause: 3000, // 停止時間间
start: function() {}, // 切换开始执行関数数
end: function() {} // 切换廓束执行関数数
};

scrollTrans.prototype = {
constructor:scrollTrans,
transform:function(index) {
var self = this;
インデックス == 未定義 && (インデックス = self.index);
インデックス< 0 && (インデックス = self.count - 1) ||インデックス >= self.count && (インデックス = 0);
self.time = 0;
self.target = -Math.abs(self.step) * (self.index = インデックス);
self.begin = parseInt(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.duration) {
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';
},

next: 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$('page').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.start = function() {
$each(nums, function(o, i) {
o.className = st.index == i ? 'on' : '';
});
};
st.transform();
}
}
}
}();

QQ.scroll('コンテナ', 'スクローラー', 5, {トリガー: 0});

【パラメータ说明】

复制代码代码如下:

var defaultConfig = {
trigger: 1, // トリガー方法 1: クリック レスト: マウスオーバー
auto: true, // 自動的に切り替えるかどうか
tween: Tween.Quart.easeOut , //デフォルトのイージングクラス
時間: 10, //スライディング遅延
期間: 50, //切り替え時間
一時停止: 3000, //一時停止時間
開始: function() {} , // 実行開始に切り替える関数
end: function() {} // 実行終了に切り替える関数

【使い方】


;

コードをコピーします コードは次のとおりです:

QQ.scroll('container' /*外部コンテナ ID*/, 'scroller' /*スライディングコンテナID*/, 5/*切り替え画像数*/, {trigger: 0} /*デフォルト設定*/);

[ソースコードダウンロード]

スライダー